在 Vue 專案自動更新 PWA 漸進式網頁應用程式

PWA
, ,

做法

修改 vue.config.js 檔。

1
2
3
4
5
6
7
8
9
10
11
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  pwa: {
    workboxOptions: {
      skipWaiting: true, // 強制讓等待中的 Service Worker 被啟動
      clientsClaim: true, // 新的 Service Worker 被啟動後，使其立即獲得頁面控制權 
    },
  },
  transpileDependencies: true,
});

修改 registerServiceWorker.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* eslint-disable no-console */

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    // ...
    updated() {
      console.log('New content is available; please refresh.');
      // 重新整理頁面並強制下載資源
      window.location.reload(true);
    },
    // ...
  });
}