Quasar CLI with Vite - @quasar/app-vite

处理 Service Worker

在这里，您将学习如何在应用中与 Service Worker 进行交互。Service Worker 需要安全上下文，生产环境必须使用 HTTPS。浏览器将 http://localhost 视为可信来源，因此本地 Quasar 开发通常不需要 HTTPS。

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

与 Service Worker 交互

注意，如果 register-service-worker 包尚未安装，请将其作为依赖添加到 package.json 中。

// 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);
  },
});

TIP

构建时 Quasar CLI 会将此文件与 /src 一起作为应用的一部分打包到构建产物中。所以您可以在其中使用 ES6，导入其他文件……

SSL 证书

如果您通过浏览器不认为可信的主机名访问开发服务器，需要使用 HTTPS。可用的选项包括：

在同一台机器上开发时，通过 http://localhost:<port> 或 http://127.0.0.1:<port> 访问；浏览器会将这些来源视为可信
设置 quasar.config file > devServer > https: true
通过局域网地址、自定义主机名或其他设备测试时，使用 HTTPS 隧道转发开发服务器，例如 tunnelmole、localhost.run 或 ngrok

下面有一个使用 tunnelmole 的示例。首先安装它：

PNPM

NPM

pnpm add --global 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 会利用 vite 自动生成一个 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: 'vite-dev-server' // do you need it?
    }
}

更多关于 Vite 和 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" }] }
    ]
  }
}

Caught a mistake?Edit this page in browser