服务工作者
在 Quasar 项目中添加 PWA 模式意味着将创建一个新文件夹：/src-pwa，其中包含 PWA 特定文件
您可以自由地编辑这些文件。请注意以下几点
register-service-worker.[js|ts]会自动导入到您的应用程序中（像任何其他 /src 文件一样）。它会注册服务工作者（由 Workbox 或您的自定义服务工作者创建，具体取决于 workbox 插件模式 - quasar.config 文件 > pwa > workboxPluginMode），您也可以监听服务工作者的事件。您可以使用 ES6 代码。custom-service-worker.[js|ts]将是您的服务工作者文件，但前提是 workbox 插件模式设置为 “injectManifest”（quasar.config 文件 > pwa > workboxMode: ‘injectManifest’）。否则，Quasar 和 Workbox 将为您创建一个服务工作者文件。- 在生产构建中运行 Lighthouse 测试是很有意义的。
提示
在 处理服务工作者 文档页面上，您可以了解更多关于 register-service-worker.[js|ts] 以及如何与服务工作者交互的信息。
quasar.config 文件
您可以在这里配置 Workbox 的行为，也可以调整您的 manifest.json 文件。
pwa: {
workboxMode: 'generateSW', // or 'injectManifest'
injectPwaMetaTags: true, // boolean | (() => string)
swFilename: 'sw.js', // should be .js (as it's the distribution file, not the input file)
manifestFilename: 'manifest.json',
useCredentialsForManifestTag: false,
extendGenerateSWOptions (cfg) {},
extendInjectManifestOptions (cfg) {},
extendManifestJson (json) {},
extendPWACustomSWConf (esbuildConf) {}
}
sourceFiles: {
pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
pwaServiceWorker: 'src-pwa/custom-service-worker',
pwaManifestFile: 'src-pwa/manifest.json',
}如果您想篡改 /src 中 UI 的 Vite 配置
module.exports = function (ctx) {
return {
build: {
extendViteConf (viteConf) {
if (ctx.mode.pwa) {
// do something with ViteConf
}
}
}
}
}更多信息：Workbox。
在 index.html 中添加自己的元标签
Quasar CLI 会（动态地）在您的 index.html 中添加一些面向 PWA 的元标签。如果您想自定义标签，请先在 /quasar.config 文件中禁用此行为
pwa: {
injectPwaMetaTags: false
}然后，编辑您的 /index.html 文件。以下是 Quasar CLI 动态注入的实际元标签
<head>
<% if (ctx.mode.pwa) { %>
<meta name="theme-color" content="<%= pwaManifest.theme_color %>">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="<%= pwaManifest.theme_color %>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">
<meta name="apple-mobile-web-app-title" content="<%= pwaManifest.name %>">
<link rel="apple-touch-icon" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="icons/apple-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<% } %>
</head>请注意，您可以通过上面的 pwaManifest 访问您的 PWA 清单。
或者，您可以像下面这样为 injectPwaMetaTags 分配一个函数
pwa: {
injectPwaMetaTags () {
return `<meta name="apple-mobile-web-app-capable" content="yes">`
+ `<meta name="apple-mobile-web-app-status-bar-style" content="default">`
}
}选择 Workbox 模式
Workbox 有两种运行模式：generateSW（默认）和 injectManifest。
通过 /quasar.config 文件设置您要使用的模式
pwa: {
workboxMode: 'generateSW',
extendGenerateSWOptions (cfg) {
// configure workbox on generateSW
}
}
pwa: {
workboxMode: 'injectManifest',
extendInjectManifestOptions (cfg) {
// configure workbox on injectManifest
}
}generateSW
何时使用 generateSW
- 您希望预缓存文件。
- 您对运行时配置的需求很简单（例如，配置允许您定义路由和策略）。
何时不使用 generateSW
- 您希望使用其他服务工作者功能（即 Web 推送）。
- 您希望导入其他脚本或添加其他逻辑。
提示
请在 Workbox 网站 上查看此模式可用的 workboxOptions。
InjectManifest
何时使用 InjectManifest
- 您希望对服务工作者有更多控制权。
- 您希望预缓存文件。
- 您在路由方面有更复杂的需求。
- 您希望将服务工作者与其他 API 一起使用（例如 Web 推送）。
何时不使用 InjectManifest
- 您希望最轻松地将服务工作者添加到您的网站。
提示
- 如果您希望使用此模式，则必须自己编写服务工作者文件（
/src-pwa/custom-service-worker.[js|ts]）。 - 请在 Workbox 网站 上查看此模式可用的 workboxOptions。
以下代码段是自定义服务工作者（/src-pwa/custom-service-worker.[js|ts]）的默认代码，它模拟了 generateSW 模式的行为
/*
* This file (which will be your service worker)
* is picked up by the build system ONLY if
* quasar.config file > pwa > workboxMode is set to "injectManifest"
*/
import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching'
import { registerRoute, NavigationRoute } from 'workbox-routing'
self.skipWaiting()
clientsClaim()
// Use with precache injection
precacheAndRoute(self.__WB_MANIFEST)
cleanupOutdatedCaches()
// Non-SSR fallback to index.html
// Production SSR fallback to offline.html (except for dev)
if (process.env.MODE !== 'ssr' || process.env.PROD) {
registerRoute(
new NavigationRoute(
createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
{ denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
)
)
}配置清单文件
清单文件位于 /src-pwa/manifest.json。您可以自由地编辑它。
如果您需要在构建时动态更改它，可以通过编辑 /quasar.config 文件来实现
pwa: {
extendManifestJson (json) {
// tamper with the json
}
}在深入研究之前，请阅读有关 清单配置 的信息。
警告
请注意，您不需要编辑您的 index.html 文件（从 /index.html 生成）来链接到清单文件。Quasar CLI 会为您嵌入正确的内容。
提示
如果您的 PWA 在基本身份验证后面或需要授权标头，请将 quasar.config 文件 > pwa > useCredentialsForManifestTag 设置为 true，以便在清单文件元标签中包含 crossorigin="use-credentials"。
PWA 清单
更多信息：PWA 清单
警告
不要在您的开发构建中运行 Lighthouse，因为在此阶段，代码有意未经优化，并且包含嵌入式源映射（以及许多其他内容）。有关更多信息，请参见这些文档的 测试和审计 部分。
自动重新加载和更新
对于那些不想在服务工作者更新时手动重新加载页面**并且使用默认 generateSW 工作箱模式**的用户，Quasar CLI 已配置 Workbox 一次性激活它。如果您需要禁用此行为
pwa: {
extendGenerateSWOptions (cfg) {
cfg.skipWaiting = false
cfg.clientsClaim = false
}
}文件名哈希问题@quasar/app-vite v1.1+
由于 Rollup 通过 Vite 构建资产的方式，当您更改任何脚本源文件（.js）时，这也会改变（几乎）所有 .js 文件的哈希部分（例如：454d87bd 在 assets/index.454d87bd.js 中）。所有资产的修订号将在您的服务工作者文件中发生改变，这意味着当 PWA 更新时，它将再次重新下载所有资产。这真是浪费带宽，而且 PWA 更新需要更长时间！
默认情况下，Vite 会将所有文件名**包含哈希部分**进行构建。但是，如果您希望您的文件名不包含哈希部分，则需要编辑 /quasar.config 文件
build: {
useFilenameHashes: false // true by default
}当禁用文件名哈希时，最好确保您的 Web 服务器已相应地设置缓存（尽可能低），以确保一致地向无法使用 PWA 功能的客户提供资源。