在这里，您将学习如何从您的网站/应用程序空间中与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.conf.js > devServer > https: true   - 设置从localhost到127.0.0.1的环回（但这不是没有安全隐患）   - 通过ngrok提供本地主机并使用ngrok提供的https地址

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

// quasar.conf.js

const fs = require('fs')
// ...

devServer: {
  https: {
    key: fs.readFileSync('/path/to/server.key'),
    cert: fs.readFileSync('/path/to/server.crt'),
    ca: fs.readFileSync('/path/to/ca.pem'),
  }
}

重要的托管配置

不允许浏览器缓存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"}] }
    ]
  }
}