Service Worker
將 PWA 模式新增至 Quasar 專案表示將會建立一個新資料夾： /src-pwa，其中包含 PWA 特定檔案
您可以自由編輯這些檔案。請注意以下幾點
register-service-worker.[js|ts]會自動匯入到您的應用程式中 (如同任何其他的 /src 檔案)。它會註冊 Service Worker (由 Workbox 或您的自訂 Service Worker 建立，取決於 workbox 外掛程式模式 – quasar.config 檔案 > pwa > workboxPluginMode)，並且您可以監聽 Service Worker 的事件。您可以使用 ES6 程式碼。custom-service-worker.[js|ts]只有在 workbox 外掛程式模式設定為 “injectManifest” (quasar.config 檔案 > pwa > workboxMode: ‘injectManifest’) 時，才會是您的 Service Worker 檔案。否則，Quasar 和 Workbox 將會為您建立一個 service-worker 檔案。- 僅在生產環境建置中進行 Lighthouse 測試才合理。
提示
在 處理 Service Worker 文件頁面上閱讀更多關於 register-service-worker.[js|ts] 以及如何在頁面上與 Service Worker 互動的資訊。
quasar.config 檔案
您可以在這裡設定 Workbox 行為，以及調整您的 manifest.json。
pwa: {
workboxMode: 'generateSW', // or 'injectManifest'
injectPwaMetaTags: true, // boolean | (() => string)
swFilename: 'sw.js', // should be .js (as it's the distribution file, not the input file)
manifestFilename: 'manifest.json',
useCredentialsForManifestTag: false,
extendGenerateSWOptions (cfg) {},
extendInjectManifestOptions (cfg) {},
extendManifestJson (json) {},
extendPWACustomSWConf (esbuildConf) {}
}
sourceFiles: {
pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
pwaServiceWorker: 'src-pwa/custom-service-worker',
pwaManifestFile: 'src-pwa/manifest.json',
}如果您想要修改 /src 中 UI 的 Vite 設定
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf) {
if (ctx.mode.pwa) {
// do something with ViteConf
}
}
}
}
}更多資訊： Workbox。
在 index.html 中新增您自己的 meta 標籤
Quasar CLI (動態地) 將一些 PWA 導向的 meta 標籤新增到您的 index.html 中。如果您希望自訂這些標籤，請先在 /quasar.config 檔案中停用此行為
pwa: {
injectPwaMetaTags: false
}接著，編輯您的 /index.html 檔案。以下是 Quasar CLI 動態注入的實際 meta 標籤
<head>
<% if (ctx.mode.pwa) { %>
<meta name="theme-color" content="<%= pwaManifest.theme_color %>">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="<%= pwaManifest.theme_color %>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="apple-mobile-web-app-title" content="<%= pwaManifest.name %>">
<link rel="apple-touch-icon" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="icons/apple-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<% } %>
</head>請注意，您可以透過上方的 pwaManifest 存取您的 PWA manifest。
或者，您可以像下面這樣指派一個函式給 injectPwaMetaTags
pwa: {
injectPwaMetaTags () {
return `<meta name="apple-mobile-web-app-capable" content="yes">`
+ `<meta name="apple-mobile-web-app-status-bar-style" content="default">`
}
}選擇 Workbox 模式
有兩種 Workbox 運作模式： generateSW (預設) 和 injectManifest。
設定您想要使用的模式是透過 /quasar.config 檔案完成的
pwa: {
workboxMode: 'generateSW',
extendGenerateSWOptions (cfg) {
// configure workbox on generateSW
}
}
pwa: {
workboxMode: 'injectManifest',
extendInjectManifestOptions (cfg) {
// configure workbox on injectManifest
}
}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]) 的預設程式碼，其模仿 generateSW 模式的行為
/*
* This file (which will be your service worker)
* is picked up by the build system ONLY if
* quasar.config file > pwa > workboxMode is set to "injectManifest"
*/
import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching'
import { registerRoute, NavigationRoute } from 'workbox-routing'
self.skipWaiting()
clientsClaim()
// Use with precache injection
precacheAndRoute(self.__WB_MANIFEST)
cleanupOutdatedCaches()
// Non-SSR fallback to index.html
// Production SSR fallback to offline.html (except for dev)
if (process.env.MODE !== 'ssr' || process.env.PROD) {
registerRoute(
new NavigationRoute(
createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
{ denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
)
)
}設定 Manifest 檔案
Manifest 檔案位於 /src-pwa/manifest.json。您可以自由編輯。
如果您需要在建置時動態變更，您可以編輯 /quasar.config 檔案來達成
pwa: {
extendManifestJson (json) {
// tamper with the json
}
}在深入研究之前，請先閱讀關於 manifest 設定。
警告
請注意，您不需要編輯您的 index.html 檔案 (從 /index.html 產生) 來連結到 manifest 檔案。Quasar CLI 會負責為您嵌入正確的東西。
提示
如果您的 PWA 需要基本身份驗證或授權標頭，請將 quasar.config 檔案 > pwa > useCredentialsForManifestTag 設定為 true，以便在 manifest.json meta 標籤中包含 crossorigin="use-credentials"。
PWA 檢查清單
更多資訊：PWA 檢查清單
警告
請勿在您的開發版本上執行 Lighthouse，因為在此階段，程式碼是刻意未經最佳化的，並且包含嵌入的 source map (以及許多其他東西)。請參閱這些文件中的測試與稽核章節以取得更多資訊。
自動重新載入 & 更新
對於那些不想要在 Service Worker 更新時手動重新載入頁面，並且正在使用預設 generateSW workbox 模式的使用者，Quasar CLI 已設定 Workbox 以立即啟用它。如果您需要停用此行為
pwa: {
extendGenerateSWOptions (cfg) {
cfg.skipWaiting = false
cfg.clientsClaim = false
}
}檔案名稱雜湊的怪癖@quasar/app-vite v1.1+
由於 Rollup (透過 Vite) 建置 assets 的方式，當您變更任何程式碼來源檔案 (.js) 時，這也會變更 (幾乎) 所有 .js 檔案的雜湊部分 (例如：assets/index.454d87bd.js 中的 454d87bd)。所有 assets 的修訂編號將在您的 Service Worker 檔案中被變更，這表示當 PWA 更新時，它將重新下載您所有的 assets。這真是頻寬的浪費，而且更新 PWA 的時間也會更長！
預設情況下，Vite 建置的所有檔案名稱都包含雜湊部分。但是，如果您希望您的檔案名稱不包含雜湊部分，您需要編輯 /quasar.config 檔案
build: {
useFilenameHashes: false // true by default
}當檔案名稱雜湊被停用時，明智之舉是同時確保您的網路伺服器已相應地設定快取 (盡可能低)，以確保為無法使用 PWA 功能的用戶端提供一致的資源。