在這裡您將學習如何從您的網站/應用程式空間內與 Service Worker 互動。請記住，service worker 必須透過 HTTPS 提供服務。
重要的是要注意 Service Worker（由 Workbox 自動產生，或者您已配置 Quasar CLI 以使用自訂的 Service Worker）在單獨的執行緒中運行。但是，您可以從應用程式空間內的 /src-pwa/register-service-worker.js 檔案與其互動。
與 Service Worker 互動
將 register-service-worker npm 套件作為依賴項新增至您的 package.json 檔案中（如果尚未存在）。
import { register } from 'register-service-worker'
register(process.env.SERVICE_WORKER_FILE, {
ready (registration) {
console.log('Service worker is active.')
},
registered (registration) {
console.log('Service worker has been registered.')
},
cached (registration) {
console.log('Content has been cached for offline use.')
},
updatefound (registration) {
console.log('New content is downloading.')
},
updated (registration) {
console.log('New content is available; please refresh.')
},
offline () {
console.log('No internet connection found. App is running in offline mode.')
},
error (error) {
console.error('Error during service worker registration:', error)
}
})提示
此檔案由 Quasar CLI 自動捆綁到您的網站/應用程式中，因為它被視為應用程式空間 /src 的一部分。這表示您可以使用 ES6、匯入其他檔案等等。
SSL 憑證
您可能會在某些開發環境中注意到，如果您未使用 HTTPS 提供服務（即使在 localhost 上），Workbox 在 quasar dev 期間將不會載入您的 service worker。您可能會看到有兩個腳本無法載入。Chrome 瀏覽器控制台對此相對沉默，但 Firefox 會告訴您發生了什麼事。您有三個選項：
- 設定 quasar.config 檔案 > devServer >
https: true - 設定從 localhost 到 127.0.0.1 的迴路（但這並非沒有安全隱憂）
- 透過 tunnelmole、localhost.run 或 ngrok 來伺服您的 localhost，並使用它們提供的 https 位址。
這是一個 tunnelmole 的範例 (請先使用 yarn global add tunnelmole 或 npm i -g tunnelmole 安裝)
$ tmole 80
http://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
https://b8ootd-ip-157-211-195-182.tunnelmole.com is forwarding to localhost:80
# ...and use the HTTPS url shown in the output當您在 quasar.config 檔案中設定 devServer > https: true 時，Quasar 會指示 Vite 為您自動產生 SSL 憑證。然而，如果您想要為您的 localhost 建立自己的憑證，請查看 Filippo 的這篇部落格文章。然後您的 quasar.config file > devServer > https 應該看起來像這樣
devServer: {
https: {
// Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
// https://node.dev.org.tw/api/https.html#https_https_createserver_options_requestlistener
key: "/path/to/server.key",
pfx: "/path/to/server.pfx",
cert: "/path/to/server.crt",
ca: "/path/to/ca.pem",
passphrase: 'vite-dev-server' // do you need it?
}
}關於 Vite 和 HTTPS 的更多資訊請參閱 這裡。
重要的託管設定
重要的是您不要允許瀏覽器快取 Service Worker 檔案 (預設為：sw.js)。因為否則，對於從快取載入 service-worker 的瀏覽器來說，此檔案或您的應用程式的更新可能會被忽略。
這就是為什麼您必須始終確保將 "Cache-Control": "no-cache" 新增到您的託管服務提供的 sw.js 檔案的標頭中。
作為 Google Firebase 如何完成此操作的範例，您需要將以下內容新增到 firebase.json 設定中
{
"hosting": {
"headers": [
{ "source":"/sw.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
]
}
}