在这里，您将学习如何从您的网站/应用程序空间中与Service Worker进行交互。 请记住，Service Worker必须通过HTTPS提供服务。

重要的是要注意Service Worker（由Workbox自动生成 - 或者您已配置Quasar CLI以使用自定义CLI）在单独的线程中运行。 但是，你可以从/src-pwa/register-service-worker.js文件中的app-space与它进行交互。

与Service Worker进行交互

请注意[register-service-worker]（https://github.com/yyx990803/register-service-worker）npm包，它与Quasar CLI一起开箱即用（所以不要自己安装）。

// src-pwa/register-service-worker.js file

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)
  }
})

SSL证书

您可能会注意到在某些开发环境中，如果您没有使用HTTPS来服务，Workbox将不会在“quasar dev”期间加载您的service worker - 即使在localhost上也是如此。您将看到有两个脚本无法加载。 Chrome浏览器控制台对此比较苛刻，但Firefox会告诉您发生了什么。你有三个选择：   - 设置quasar.config.js > devServer > https: true   - 设置从localhost到127.0.0.1的环回（但这不是没有安全隐患）   - 通过ngrok提供本地主机并使用ngrok提供的https地址

在quasar.config.js文件中设置devServer > https: true时，Quasar将指示Vite为您自动生成SSL证书。但是，如果您想自己为本地主机创建一个，请查看Filippo的博客文章。然后你的quasar.config.js > devServer > https应如下所示：

关于Vite和HTTPS的更多信息在这里。

重要的托管配置

重要的是，你不允许浏览器缓存服务工作者（Service Worker）文件（默认为：sw.js）。因为否则的话，这个文件或你的应用程序的更新可能会让那些从缓存中加载服务工作器的浏览器漏掉。

这就是为什么你必须始终确保添加"Cache-Control": "no-cache"到sw.js文件的头部中，通过你的主机服务。

一个展示如何做到这点的Google Firebase例子，您可以将以下内容添加到firebase.json文件配置：

{
  "hosting": {
    "headers": [
      { "source":"/sw.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
    ]
  }
}