Saber 集成 PWA

发表于   |   分类于

Saber 是基于 Vue CLI 构建，@vue/cli3.0 的 package 目录下有很多具体的可添加模块，其中就包括 cli-plugin-pwa。具体步骤如下。

添加 pwa 插件

项目根目录下执行 vue add @vue/pwa ，会添加或修改如下文件

打包

npm run build

部署

在 dist 目录下执行 python -m SimpleHTTPServer 1888

测试

自定义配置

参考 vue-cli/packages/@vue/cli-plugin-pwa at dev · vuejs/vue-cli · GitHub，通过 vue.config.js 的 pwa 字段进行配置。

vue.config.js 添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    // 配置 workbox 插件
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // InjectManifest 模式下 swSrc 是必填的。
      swSrc: 'dev/sw.js',
      // ...其它 Workbox 选项...
    },
  },

dev 目录下添加 sw.js 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
self.addEventListener('install', event => {
  console.log('Version installing', event);
  event.waitUntil(
    caches
      .open('static-v1')
      .then(cache =>
        cache.addAll([
          '/',
          'index.html',
          '/cdn',
          '/css',
          '/img',
          '/js',
          '/svg',
          '/util',
        ])
      )
  );
});
self.addEventListener('activate', () => {
  console.log('Version now ready to handle');
});
self.addEventListener('fetch', event => {
  console.log('fetch', event.request);
});

注意，src/registerServiceWorker.js 文件中修改内容 service-worker.js 为 sw.js。