在这里，你将学习如何在你的网站/应用空间内与 Service Worker 交互。请记住，Service Worker 必须通过 HTTPS 提供服务。

¥Here you’ll learn how to interact with the Service Worker from within your website/app space. Remember, service workers MUST be served over HTTPS.

需要注意的是，Service Worker（由 Workbox 自动生成，或者你已将 Quasar CLI 配置为使用自定义 Service Worker）在单独的线程中运行。但是，你可以在应用空间的 /src-pwa/register-service-worker.js 文件中与其交互。

¥It’s important to note that the Service Worker (which gets automatically generated by Workbox – or you’ve configured Quasar CLI to use your custom one) runs in a separate thread. You can however interact with it from app-space from within /src-pwa/register-service-worker.js file.

与服务交互工作器(Interacting with Service Worker)

¥Interacting with Service Worker

将 register-service-worker npm 包作为依赖添加到你的 package.json 文件中（如果它尚未存在）。

¥Add the register-service-worker npm package in your package.json file as a dependency (if it’s not already there).

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 证书(SSL certificate)

¥SSL certificate

你可能会注意到，在某些开发环境中，如果你没有使用 HTTPS 进行服务，Workbox 将不会在 quasar dev 期间加载你的 Service Worker。 - 即使在本地主机上也是如此。你可能会看到有两个脚本无法加载。Chrome 浏览器控制台对此守口如瓶，但 Firefox 会告诉你发生了什么。你有三个选项：

¥You may notice in some dev environments, that Workbox will not load your service workers during quasar dev if you are not using HTTPS to serve - even on localhost. You may see that there are two scripts that can’t load. The Chrome browser console is relatively tight-lipped about this, but Firefox tells you what is going on. The three options you have are:

• 设置 quasar.config 文件 > devServer > https: true

  ¥set quasar.config file > devServer > https: true

• 设置从 localhost 到 127.0.0.1 的环回（但这并非没有安全隐患）

  ¥setup a loopback from localhost to 127.0.0.1 (but this is not without security implications)

• 通过 tunnelmole、localhost.run 或 ngrok 为你的本地主机提供服务，并使用它们提供的 https 地址。

  ¥serve your localhost over tunnelmole, localhost.run or ngrok and use the https address provided by them.

以下是 tunnelmole 的示例（请先使用 yarn global add tunnelmole 或 npm i -g tunnelmole 安装）：

¥Here is a tunnelmole example (install it first with yarn global add tunnelmole or 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 证书。但是，如果你想为本地主机自行创建一个平台，请查看 Filippo 的这篇博文。然后，你的 quasar.config file > devServer > https 应该如下所示：

¥When you set devServer > https: true in your /quasar.config file, Quasar will auto-generate a SSL certificate for you. However, if you want to create one yourself for your localhost, then check out this blog post by Filippo. Then your quasar.config file > devServer > https should look like this:

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

重要托管配置(Important Hosting Configuration)

¥Important Hosting Configuration

请务必不要允许浏览器缓存 Service Worker 文件（默认情况下为 sw.js）。否则，对于从缓存加载 service-worker 的浏览器来说，对此文件或你的应用的更新可能会被忽略。

¥It’s important that you do not allow browsers to cache the Service Worker file (by default: sw.js). Because otherwise updates to this file or to your app might slip through the cracks for browsers that load the service-worker from cache.

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

¥This is why you must always make sure to add "Cache-Control": "no-cache" to the headers of sw.js file via your hosting service.

以 Google Firebase 为例，你需要将以下内容添加到 firebase.json 配置中：

¥As an example how this is done for Google Firebase, you would add the following to the firebase.json configuration:

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