处理 Service Worker

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

第一点很重要，您需要知道 Service Worker 运行在一个单独的线程中，但是您可以通过 /src-pwa/register-service-worker.js 使其与应用程序空间进行交互。

与 Service Worker 交互

注意，Quasar CLI 已经集成了 register-service-worker npm 包，所以您不需要再手动安装它。

// 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，您会发现有两个脚本无法加载，Chrome 浏览器的控制台可能不会打印相关信息，但是 Firefox 浏览器的控制台会打印它们。有以下三种解决办法：

• 设置 quasar.config.js > devServer > https: true
• 设置从 localhost 到 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

# ...并使用控制台中显示的 HTTPS 地址

当在 quasar.config.js 文件中设置 devServer > https: true 时，Quasar 会利用 webpack 自动生成一个 SSL 证书。如果您希望使用自己的证书，请参考：Filippo 的博客。然后您的 quasar.config.js > devServer > https 应该像这样：

// quasar.config.js

devServer: {
    htpps: {
      // 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?
    }
}

更多关于 Webpack 和 Https 的信息参考这里.

重要的部署主机配置

有一点很重要，不要允许浏览器缓存 Service Worker 文件（默认为 sw.js ），否则，应用的更新可能因为浏览器从缓存中加载 service-worker 而被忽略。

所以在部署的主机上，必须为 sw.js 文件添加 "Cache-Control": "no-cache" 响应头。

例如，使用 Google Firebase 部署时，需要在 firebase.json 中添加如下配置：

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