Service Worker
在 Quasar 專案中新增 PWA 模式表示將建立一個新資料夾：/src-pwa，其中包含 PWA 專用檔案
您可以自由編輯這些檔案。請注意以下幾點
register-service-worker.[js|ts]會自動匯入到您的應用程式中 (就像任何其他 /src 檔案一樣)。它會註冊 service worker (由 Workbox 或您的自訂 service worker 建立，取決於 workbox 外掛程式模式 – quasar.config 檔案 > pwa > workboxPluginMode)，而且您可以監聽 Service Worker 的事件。您可以使用 ES6 程式碼。- 只有在 workbox 外掛程式模式設定為 “InjectManifest” 時，
custom-service-worker.[js|ts]才會是您的 service worker 檔案 (quasar.config 檔案 > pwa > workboxPluginMode: ‘InjectManifest’)。否則，Workbox 會為您建立 service-worker 檔案。 - 建議僅在生產版本上執行 Lighthouse 測試。
提示
在處理 Service Worker 文件頁面上閱讀更多關於 register-service-worker.[js|ts] 以及如何與 Service Worker 互動的資訊。
quasar.config 檔案
您可以在此處設定 Workbox 行為，並調整您的 manifest.json。
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
manifest: {
// ...
},
// Use this OR metaVariablesFn, but not both;
// variables used to inject specific PWA
// meta tags (below are default values);
metaVariables: {
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'default',
appleTouchIcon120: 'icons/apple-icon-120x120.png',
appleTouchIcon180: 'icons/apple-icon-180x180.png',
appleTouchIcon152: 'icons/apple-icon-152x152.png',
appleTouchIcon167: 'icons/apple-icon-167x167.png',
appleSafariPinnedTab: 'icons/safari-pinned-tab.svg',
msapplicationTileImage: 'icons/ms-icon-144x144.png',
msapplicationTileColor: '#000000'
},
// Optional, overrides metaVariables above;
// Use this OR metaVariables, but not both;
metaVariablesFn (manifest) {
// ...
return [
{
// this entry will generate:
// <meta name="theme-color" content="ff0">
tagName: 'meta',
attributes: {
name: 'theme-color',
content: '#ff0'
}
},
{
// this entry will generate:
// <link rel="apple-touch-icon" sizes="180x180" href="icons/icon-180.png">
// references /public/icons/icon-180.png
tagName: 'link',
attributes: {
rel: 'apple-touch-icon',
sizes: '180x180',
href: 'icons/icon-180.png'
},
closeTag: false // this is optional;
// specifies if tag also needs an explicit closing tag;
// it's Boolean false by default
}
]
},
// optional; webpack config Object for
// the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
extendWebpackCustomSW (cfg) {
// directly change props of cfg;
// no need to return anything
},
// optional; EQUIVALENT to extendWebpackCustomSW() but uses webpack-chain;
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
chainWebpackCustomSW (chain) {
// chain is a webpack-chain instance
// of the Webpack configuration
// example:
// chain.plugin('eslint-webpack-plugin')
// .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
}
}更多資訊：Workbox Webpack Plugin、Workbox。
metaVariables 物件僅供 Quasar 本身使用 (對 Workbox 沒有意義)，用於將特定值屬性注入到呈現的 HTML 頁面中的某些 PWA meta 標籤。範例：<meta name="apple-mobile-web-app-status-bar-style"> 的 value 屬性將會指派給 metaVariables.appleMobileWebAppStatusBarStyle 的內容。
您可以使用 metaVariables 的替代方案：metaVariablesFn(manifest)，它可以傳回物件陣列 (請參閱上方程式碼中的格式)。如果您將此函式設定為不傳回陣列或傳回空陣列，則 Quasar App CLI 會理解為不新增任何標籤 – 因此您可以直接在 /index.html 或 /src/index.template.html 中手動新增您的自訂標籤。
選擇 Workbox 模式
有兩種 Workbox 運作模式：GenerateSW (預設) 和 InjectManifest。第一種模式會根據 quasar.config 檔案 > pwa > workboxOptions (如果有的話) 自動產生 service worker，而第二種模式則允許您編寫自己的 service worker 檔案。
您想要使用的模式設定是透過 /quasar.config 檔案完成的。
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: { ... }
}警告
請確保您的 workboxOptions 符合您選擇的 Workbox 模式，否則 workbox webpack 外掛程式可能會阻止您的應用程式編譯。
GenerateSW
何時使用 GenerateSW
- 您想要預先快取檔案。
- 您的執行階段組態需求很簡單 (例如，組態允許您定義路由和策略)。
何時不使用 GenerateSW
- 您想要使用其他 Service Worker 功能 (即 Web Push)。
- 您想要匯入其他腳本或新增其他邏輯。
提示
請在 Workbox 網站 上查看此模式可用的 workboxOptions。
InjectManifest
何時使用 InjectManifest
- 您想要更精細地控制您的 service worker。
- 您想要預先快取檔案。
- 您的路由需求更複雜。
- 您想要將您的 service worker 與其他 API (例如 Web Push) 一起使用。
何時不使用 InjectManifest
- 您想要以最簡單的方式將 service worker 新增到您的網站。
訣竅
- 如果您想要使用此模式，則必須自行編寫 service worker (
/src-pwa/custom-service-worker.[js|ts]) 檔案。 - 請在 Workbox 網站 上查看此模式可用的
workboxOptions。
以下程式碼片段是自訂 service worker (/src-pwa/custom-service-worker.[js|ts]) 的預設程式碼
import { precacheAndRoute } from 'workbox-precaching'
// Use with precache injection
precacheAndRoute(self.__WB_MANIFEST)配置 Manifest 檔案
Manifest 檔案是由 Quasar CLI 產生，並具有預設組態。但是，您可以從 /quasar.config 檔案調整此組態。
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
manifest: {
name: 'Quasar Play',
short_name: 'Quasar-Play',
description: 'Quasar Framework Showcase',
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'
}
],
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3'
}
}請先閱讀關於 manifest 組態 的資訊，再深入了解。
警告
請注意，您不需要編輯您的 index.html 檔案 (從 /index.html 或 /src/index.template.html 產生) 來連結到 manifest 檔案。Quasar CLI 會負責為您嵌入正確的內容。
提示
如果您的 PWA 位於基本驗證之後或需要 Authorization 標頭，請將 quasar.config 檔案 > pwa > useCredentials 設定為 true，以在 manifest.json meta 標籤上包含 crossorigin="use-credentials"。
PWA 檢查清單
更多資訊：PWA 檢查清單
警告
請勿在您的開發版本上執行 Lighthouse，因為在此階段，程式碼是有意不進行最佳化的，並且包含嵌入式原始碼地圖（以及許多其他內容）。請參閱這些文件中的「測試與稽核」章節以取得更多資訊。
自動重新載入與更新
對於那些不希望在 Service Worker 更新時手動重新載入頁面，並且正在使用預設 GenerateSW workbox 模式 的使用者，您可以使其立即生效。請如下更新 /quasar.config 檔案中的 workboxOptions 設定
pwa: {
workboxOptions: {
skipWaiting: true,
clientsClaim: true
}
}