在这里，您将学习如何在网站/应用程序空间内与服务工作者交互。请记住，**服务工作者必须通过 HTTPS 提供服务**。
重要的是要注意，服务工作者（由 Workbox 自动生成，或者您已配置 Quasar CLI 使用自定义服务工作者）在单独的线程中运行。但是，您可以从 /src-pwa/register-service-worker.js 文件中的应用程序空间与它交互。
与服务工作者交互
在您的 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 提供服务（即使在本地主机上），Workbox 不会在 quasar dev 期间加载您的服务工作者。您可能会看到有两个脚本无法加载。Chrome 浏览器控制台对此相对沉默，但 Firefox 会告诉您发生了什么。您有三个选择
- 设置 quasar.config 文件 > devServer >
https: true - 从本地主机到 127.0.0.1 设置回环（但这并非没有安全隐患）
- 通过 tunnelmole、localhost.run 或 ngrok 提供本地主机，并使用它们提供的 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 证书。但是，如果您想为您的本地主机自己创建一个，请查看 Filippo 的这篇博文。然后，您的 quasar.config 文件 > devServer > https 应该如下所示
devServer: {
https: {
// Use ABSOLUTE paths or path.join(__dirname, 'root/relative/path')
// https://node.org.cn/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 的更多信息，请 点击此处。
重要的托管配置
重要的是，您不允许浏览器缓存服务工作者文件（默认情况下：sw.js）。因为，否则对该文件或您的应用程序的更新可能会从缓存加载服务工作者的浏览器的缝隙中溜走。
这就是为什么您必须始终确保通过托管服务向 sw.js 文件的标头添加 "Cache-Control": "no-cache"。
例如，在 Google Firebase 中，您需要在 firebase.json 配置中添加以下内容
{
"hosting": {
"headers": [
{ "source":"/sw.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
]
}
}