在这里，您将了解如何在网站/应用程序空间内与服务工作者进行交互。请记住，**服务工作者必须通过 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 提供服务 - 即使在 localhost 上，Workbox 也不会在 quasar dev 期间加载您的服务工作者。您将看到有两个脚本无法加载。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.js 文件的标头添加 "Cache-Control": "no-cache"。
例如，要在 Google Firebase 中完成此操作，您需要将以下内容添加到 firebase.json 配置中
{
"hosting": {
"headers": [
{ "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
]
}
}