跳到主要内容

移动网页的渐进式网络应用(PWA)

为什么选择渐进式网络应用?

  • 可以通过 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;否则,缓存可能无法更新。