在這裡，您將學習如何從您的網站/應用程式空間內與 Service Worker 互動。請記住，Service Worker 必須透過 HTTPS 提供服務。
重要的是要注意，Service Worker（由 Workbox 自動產生，或者您已將 Quasar CLI 設定為使用您的自訂 Service Worker）在單獨的執行緒中執行。但是，您可以從應用程式空間內，從 /src-pwa/register-service-worker.js 檔案中與其互動。
與 Service Worker 互動
在您的 package.json 檔案中新增 register-service-worker npm 套件作為依賴項（如果尚未存在）。
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 將自動為您產生 SSL 憑證。但是，如果您想為您的 localhost 建立一個憑證，請查看 Filippo 的這篇部落格文章：Filippo。然後您的 quasar.config 檔案 > devServer > https 應該看起來像這樣
devServer: {
server: {
type: 'https', // NECESSARY
options: {
// Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
key: "/path/to/server.key",
pfx: "/path/to/server.pfx",
cert: "/path/to/server.crt",
ca: "/path/to/ca.pem",
passphrase: 'webpack-dev-server' // do you need it?
}
}
}重要的託管設定
重要的是，您不要允許瀏覽器快取 service-worker.js 檔案。因為否則，對於從快取載入 Service Worker 的瀏覽器，對此檔案或您的應用程式的更新可能會被忽略。
這就是為什麼您必須始終確保將 "Cache-Control": "no-cache" 新增到透過您的託管服務提供的 service-worker.js 檔案的標頭中。
作為 Google Firebase 如何完成此操作的範例，您可以將以下內容新增到 firebase.json 設定中
{
"hosting": {
"headers": [
{ "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
]
}
}