移动网页的渐进式网络应用（PWA）
· 阅读需 2 分钟
为什么选择渐进式网络应用？
- 可以通过 Chrome 和 Safari 添加到主屏幕
- 利用服务工作者离线工作
- 通过推送通知增加用户参与度
- 在所有浏览器中新用户的转化率提高 104%，在 iOS 上提高 82%
“渐进式”意味着改进不是二元和终结的，而是逐步演进的。
这是什么？
PWA = 为移动设备优化的网站 + manifest.json + 服务工作者加载和注册
如何将其添加到您的网站？
manifest.json 是简单的部分。将以下内容放入 example.com/manifest.json
{
"short_name": "短名称",
"name": "较长名称",
"icons": [
{
"src": "favicon.png",
"sizes": "192x192 150x150 144x144 64x64 32x32 24x24 16x16",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#de4c4f",
"background_color": "#f3f3f3"
}
并将以下内容添加到 HTML 的 <head> 中
<link rel="manifest" href="/manifest.json"/>
<link rel="apple-touch-icon" href="/favicon.png"/>
然后在 iOS 和 Android 上，用户可以将该网站添加到主屏幕。
然后 ... 服务工作者的加载和注册
我推荐使用 create-react-app 的服务工作者加载脚本， 它具有良好的安全实践，并采用 优先缓存策略。 并且它还包括注销功能。
注册部分更复杂 - 我们添加了以下 webpack 插件来准备 service-worker.js。
// ...
plugins: [
// ...
new SWPrecacheWebpackPlugin(
{
mergeStaticsConfig: true,
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
minify: false,
navigateFallback: '/',
navigateFallbackWhitelist: [/^(?!\/__).*/],
staticFileGlobs: [
`${OUTPUT_DIR}/**`,
],
stripPrefix: OUTPUT_DIR,
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
dynamicUrlToDependencies: {
'/index.html': glob.sync(path.resolve(`${OUTPUT_DIR}/**/*.js`)),
},
}
),
],
// ...
这里的棘手部分是，如果您像我们一样有 SSR - 请小心指定 dynamicUrlToDependencies；否则，缓存可能无法更新。
![[object Object]](https://tp-misc.b-cdn.net/tianpan-avatar.jpg){kind=avatar}