PWA配置清单

记录各模板工程 PWA 配置

generateSW 模式下配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  importWorkboxFrom: 'local', // cdn为google域名 或 local
  skipWaiting: true, // 安装完SW不等待直接接管网站
  clientsClaim: true,
  navigateFallback: '/index.html', 
  // 在预缓存中排除 .map 文件
  // 在预缓存中排除图片 /\.(?:png|jpg|jpeg|svg)$/,
  exclude: [/\.map$/],
  // 定义运行时缓存
  runtimeCaching: [
    {
      urlPattern: process.env.NODE_ENV === 'production' ? new RegExp('^https://m.域名.com/') : '/',
      handler: 'NetworkFirst',
      options: {
        networkTimeoutSeconds: 20,
        cacheName: 'cdn-cache',
        cacheableResponse: {
          statuses: [200]
        }
      }
    }
  ]
}

Vue-CLI

https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md

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
28
29
30
31
32
33
34
35
36
37
# vue.config.js
module.exports = {
  // productionSourceMap: false,
  pwa: {
    name: '*',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      importWorkboxFrom: 'local', // cdn 或 local
      skipWaiting: true, // 安装完SW不等待直接接管网站
      clientsClaim: true,
      navigateFallback: '/index.html', 
      // 在预缓存中排除 .map 文件
      // 在预缓存中排除图片 /\.(?:png|jpg|jpeg|svg)$/,
      exclude: [/\.map$/],
      // 定义运行时缓存
      runtimeCaching: [
        {
          urlPattern: process.env.NODE_ENV === 'production' ? new RegExp('^https://m.域名.com/') : '/',
          handler: 'NetworkFirst',
          options: {
            networkTimeoutSeconds: 20,
            cacheName: 'cdn-cache',
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    }
  }
}
1
2
3
4
5
6
7
# /src/registerServiceWorker.ts
  ...
  updated (registration) {
    console.log('New content is available; please refresh.')
    registration.update();
  },
  ...

Vite

https://github.com.cnpmjs.org/antfu/vite-plugin-pwa
yarn add vite-plugin-pwa
“vite-plugin-pwa”: “^0.8.1”,

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

// sw.js、manifet.webmanifest路径，pwa作用域
const scope = '/vc3-m/base-v3/'

export default {
  base: scope,
  ...
  plugins: [
    VitePWA({
      registerType: 'autoUpdate', // 或  skipWaiting: true, clientsClaim: true,
      manifest: {
        lang: 'zh-cn',
        name: "m-v3",
        short_name: "m-v3",
        start_url: scope,
        background_color: "#ffffff",
        description: "m-v3 项目模板",
        display: "standalone",
        useWebmanifestExtension: true,
        icons: [
          {
            src: 'icons/icon-128x128.png',
            sizes: '128x128',
            type: 'image/png'
          },
          {
            src: 'icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'icons/icon-256x256.png',
            sizes: '256x256',
            type: 'image/png'
          },
          {
            src: 'icons/icon-384x384.png',
            sizes: '384x384',
            type: 'image/png'
          },
          {
            src: 'icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        // workbox options for generateSW
        skipWaiting: true, // 安装完SW不等待直接接管网站
        clientsClaim: true,
        navigateFallback: `${scope}index.html`,
        // 在预缓存中排除图片 /\.(?:png|jpg|jpeg|svg)$/, 
        // 定义运行时缓存
        runtimeCaching: [
          {
            urlPattern: scope,
            handler: 'NetworkFirst',
            options: {
              networkTimeoutSeconds: 20,
              cacheName: 'cdn-cache',
              cacheableResponse: {
                statuses: [200]
              }
            }
          }
        ]
      }
    })
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# main.ts
import { registerSW } from 'virtual:pwa-register'

const updateSW = registerSW({
  onNeedRefresh() {
    // 配置手动刷新或自动刷新
    // show a prompt to user
    // when user clicked the "refresh" button
    updateSW()
    // the page will reload and the up-to-date content will be served.
  },
  onOfflineReady() {
    // show a ready to work offline to user
  },
})
1
2
3
4
5
6
# tsconfig.json
{ 
  "compilerOptions": {
    "types": ["vite-plugin-pwa/client", ...],
  }
}

Nuxtjs

https://pwa.nuxtjs.org/
https://github.com/nuxt-community/pwa-module/blob/dev/lib/workbox/defaults.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
28
29
30
31
32
33
# nuxt.config.js
export default {
  pwa: {
    icon: {
      source: './static/icon.png',
      fileName: 'icon.png',
      targetDir: 'icons',
      pluginName: '$icon',
      plugin: true,
      purpose: ['any', 'maskable'],
      sizes: [64, 120, 144, 152, 192, 384, 512]
    },
    meta: {

    },
    manifest: {
      lang: 'zh-cn',
      name: "www.*.com",
      short_name: "pc-store",
      start_url: "/?standalone=true",
      background_color: "#ffffff",
      description: "## Build Setup",
      display: "standalone",
      useWebmanifestExtension: true
    },
    workbox: {
      /* workbox options */
      clientsClaim: true,
      skipWaiting: true
    }
  },
  ...
}

Quasar-CLI

https://quasar.dev/quasar-cli/developing-pwa/introduction#introduction
https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# quasar.conf.js
...
ssr: {
  pwa: true
},

pwa: {
  workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
  workboxOptions: {
    skipWaiting: true,
    clientsClaim: true,
    exclude: [/vc3-m/, /school/, /m/, /uploads/, /qr2mp/]
  }, // only for GenerateSW
  manifest: {
    name: '官方网站',
    short_name: '官网',
    description: '官方网站 - 123',
    display: 'standalone',
    orientation: 'portrait',
    background_color: '#ffffff',
    theme_color: '#027be3',
    icons: [
      {
        src: 'icons/icon-128x128.png',
        sizes: '128x128',
        type: 'image/png'
      },
      {
        src: 'icons/icon-192x192.png',
        sizes: '192x192',
        type: 'image/png'
      },
      {
        src: 'icons/icon-256x256.png',
        sizes: '256x256',
        type: 'image/png'
      },
      {
        src: 'icons/icon-384x384.png',
        sizes: '384x384',
        type: 'image/png'
      },
      {
        src: 'icons/icon-512x512.png',
        sizes: '512x512',
        type: 'image/png'
      }
    ]
  }
}
...

参考资料

https://xie.infoq.cn/article/d478a1cf6180108e60f07ac08
https://developers.google.cn/web/tools/workbox/guides/using-bundlers
https://www.npmjs.com/package/workbox-sw

#pwa #service-worker
PWA配置清单
http://example.com/20210525-PWA配置清单/
作者
csorz
发布于
2021年5月25日
许可协议