渐进式 Web 应用 PWA

icejs 持续为应用提供优秀的性能体验，借助 ice.js 提供的 PWA 能力，您可以：

  • 增强应用的可靠性：在网络不稳定、即便断网情况下，也能快速访问页面
  • 提升应用性能体验：根据我们的实际测量，PWA 能大幅提升页面加载速度
  • 简单：无需关心 Service Worker 的底层 API，快速构建您的 PWA 应用

开启 PWA

在工程配置文件 build.json 中开启：

  1. {
  2.   "pwa": true
  3. }

执行构建命令 npm run build，构建产物中会新增 sw.js 文件。

  1. ├── css
  2. │   └── index.css
  3. ├── js
  4. |   └── index.js
  5. ├── favicon.png
  6. ├── index.html
  7. └── sw.js

自定义 PWA 配置

使用方式如下：

  1. {
  2.   "pwa": {
  3.     "sw": "service-workder.js",
  4.     ... // 其他配置项
  5.   }
  6. }

配置项如下：

  • dev - boolean

是否在 dev 环境下开启 pwa 能力。默认为 true。

  • basename - string

应用的 basename。若配置应用的 basename，也需要在此进行配置。默认为 '/'。

  • scope - string

Service Worker 的作用域， 默认为 '/'。Service Worker 默认在应用全域生效，若配置 /app，则 Service Worker 仅在 /app 下生效。

  • sw - string

生成的 Service Worker 文件名，默认为 sw.js。

  • runTimeCaching - Array;

额外的运行时缓存设置。比如修改内置的图片资源的运行时缓存处理：

  1. {
  2.   pwa: {
  3.     runTimeCaching: [{
  4.       urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,   // 指定缓存的目标
  5.       handler: 'CacheFirst',                                 // 执行缓存的策略
  6.       options: {
  7.         cacheName: 'ice-image-assets',                       // 缓存在 cache 的名字
  8.         expiration: {                                        // 定义过期策略
  9.           maxEntries: 64,
  10.           maxAgeSeconds: 7 * 24 * 60 * 60
  11.         }
  12.       }
  13.     }],
  14.   ...
  15.   }
  16. }

该参数的更多配置，可以参考 RuntimeCachingEntry。

  • additionalManifestEntries - Array;

添加需要额外预缓存的文件。比如：

  1. {
  2.   pwa: {
  3.     additionalManifestEntries: [{
  4.       url: './js/polyfill.js',
  5.     }],
  6.     ...
  7.   }
  8. }
  • skipWaiting - boolean

当新的 Service Worker 注册成功后，是否立即执行 skipWaiting。默认 true。

添加 Manifest 文件

Manifest 文件是在 JSON 文本文件中提供有关应用程序的信息。Manifest 可以将应用安装到设备的主屏幕。

在 ice 应用中，你可以通过在 public 文件下添加一个 manifest.json 文件，可参考如下配置：

  1. {
  2.   "name": "ice.js Progressive Web App",
  3.   "short_name": "ice.js pwa",
  4.   "theme_color": "#ffffff",
  5.   "background_color": "#004740",
  6.   "display": "fullscreen",
  7.   "orientation": "portrait",
  8.   "scope": "/",
  9.   "start_url": "/",
  10.   "icons": [
  11.     {
  12.       "src": "icons/icon-72x72.png",
  13.       "sizes": "72x72",
  14.       "type": "image/png"
  15.     },
  16.     {
  17.       "src": "icons/icon-96x96.png",
  18.       "sizes": "96x96",
  19.       "type": "image/png"
  20.     },
  21.     {
  22.       "src": "icons/icon-128x128.png",
  23.       "sizes": "128x128",
  24.       "type": "image/png"
  25.     },
  26.     {
  27.       "src": "icons/icon-144x144.png",
  28.       "sizes": "144x144",
  29.       "type": "image/png"
  30.     },
  31.     {
  32.       "src": "icons/icon-152x152.png",
  33.       "sizes": "152x152",
  34.       "type": "image/png"
  35.     },
  36.     {
  37.       "src": "icons/icon-192x192.png",
  38.       "sizes": "192x192",
  39.       "type": "image/png"
  40.     },
  41.     {
  42.       "src": "icons/icon-384x384.png",
  43.       "sizes": "384x384",
  44.       "type": "image/png"
  45.     },
  46.     {
  47.       "src": "icons/icon-512x512.png",
  48.       "sizes": "512x512",
  49.       "type": "image/png"
  50.     }
  51.   ],
  52.   "splash_pages": null
  53. }

icejs 会默认将此文件打包至构建产物目录下，并将其添加至 index.html 文件中。

  1. <link rel="manifest" href="/manifest.json">

部署限制

当试图注册一个在部署在 CDN 上的 Service Worker，在浏览器中会出现这个错误：

  1. Uncaught (in promise) DOMException: Failed to register a ServiceWorker: The origin of the provided scriptURL ('https://cdn.example.com/sw.js') does not match the current origin ('https://www.example.com').

因此，生成的 sw.js 需要部署到应用的 host 下。