服务工作者
将 PWA 模式添加到 Quasar 项目中意味着将创建一个新文件夹：/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 > workboxPluginMode: ‘InjectManifest’）。否则，Workbox 将为您创建一个 service-worker 文件。- 在生产构建中运行 Lighthouse 测试是有意义的。
提示
在 处理服务工作者 文档页面上详细了解 register-service-worker.[js|ts] 以及如何与服务工作者交互。
quasar.config 文件
在这里，您可以配置 Workbox 的行为，也可以调整您的 manifest.json。
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
manifest: {
// ...
},
// Use this OR metaVariablesFn, but not both;
// variables used to inject specific PWA
// meta tags (below are default values);
metaVariables: {
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'default',
appleTouchIcon120: 'icons/apple-icon-120x120.png',
appleTouchIcon180: 'icons/apple-icon-180x180.png',
appleTouchIcon152: 'icons/apple-icon-152x152.png',
appleTouchIcon167: 'icons/apple-icon-167x167.png',
appleSafariPinnedTab: 'icons/safari-pinned-tab.svg',
msapplicationTileImage: 'icons/ms-icon-144x144.png',
msapplicationTileColor: '#000000'
},
// Optional, overrides metaVariables above;
// Use this OR metaVariables, but not both;
metaVariablesFn (manifest) {
// ...
return [
{
// this entry will generate:
// <meta name="theme-color" content="ff0">
tagName: 'meta',
attributes: {
name: 'theme-color',
content: '#ff0'
}
},
{
// this entry will generate:
// <link rel="apple-touch-icon" sizes="180x180" href="icons/icon-180.png">
// references /public/icons/icon-180.png
tagName: 'link',
attributes: {
rel: 'apple-touch-icon',
sizes: '180x180',
href: 'icons/icon-180.png'
},
closeTag: false // this is optional;
// specifies if tag also needs an explicit closing tag;
// it's Boolean false by default
}
]
},
// optional; webpack config Object for
// the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
extendWebpackCustomSW (cfg) {
// directly change props of cfg;
// no need to return anything
},
// optional; EQUIVALENT to extendWebpackCustomSW() but uses webpack-chain;
// for the custom service worker ONLY (/src-pwa/custom-service-worker.[js|ts])
// if using workbox in InjectManifest mode
chainWebpackCustomSW (chain) {
// chain is a webpack-chain instance
// of the Webpack configuration
// example:
// chain.plugin('eslint-webpack-plugin')
// .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
}
}更多信息：Workbox Webpack 插件，Workbox。
metaVariables 对象仅供 Quasar 本身使用（对 Workbox 没有任何意义），用于将特定值属性注入到渲染的 HTML 页面中的某些 PWA 元标签中。例如：<meta name="apple-mobile-web-app-status-bar-style"> 将具有值属性，该属性分配给 metaVariables.appleMobileWebAppStatusBarStyle 的内容。
您可以使用 metaVariables 的替代方案：metaVariablesFn(manifest)，它可以返回一个对象数组（请参见上面代码中的形式）。如果您将此函数配置为不返回数组或返回空数组，那么 Quasar App CLI 会理解为不要添加任何标签 - 因此您可以手动将自定义标签直接添加到 /index.html 或 /src/index.template.html 中。
选择 Workbox 模式
Workbox 有两种操作模式：GenerateSW（默认）和 InjectManifest。第一个模式会根据 quasar.config 文件 > pwa > workboxOptions（如果有）自动生成一个服务工作者，而第二个模式允许您编写自己的服务工作者文件。
设置要使用的模式是通过 /quasar.config 文件完成的
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: { ... }
}警告
确保您的 workboxOptions 与您选择的 Workbox 模式相匹配，否则 workbox webpack 插件可能会 阻止您的应用编译。
GenerateSW
何时使用 GenerateSW
- 您想要预缓存文件。
- 您有简单的运行时配置需求（例如，配置允许您定义路由和策略）。
何时不使用 GenerateSW
- 您想要使用其他服务工作者功能（即 Web Push）。
- 您想要导入其他脚本或添加其他逻辑。
提示
请在 Workbox 网站 上查看此模式的可用 workboxOptions。
InjectManifest
何时使用 InjectManifest
- 您想要更多地控制您的服务工作者。
- 您想要预缓存文件。
- 您在路由方面有更复杂的需求。
- 您希望将您的服务工作者与其他 API（例如 Web Push）一起使用。
何时不使用 InjectManifest
- 您想要最简单的方式将服务工作者添加到您的站点。
提示
- 如果您想使用此模式，您将不得不自己编写服务工作者 (
/src-pwa/custom-service-worker.[js|ts]) 文件。 - 请在 Workbox 网站 上查看此模式的可用 workboxOptions。
以下代码段是自定义服务工作者 (/src-pwa/custom-service-worker.[js|ts]) 的默认代码
import { precacheAndRoute } from 'workbox-precaching'
// Use with precache injection
precacheAndRoute(self.__WB_MANIFEST)配置清单文件
清单文件由 Quasar CLI 使用默认配置生成。但是，您可以从 /quasar.config 文件中调整此配置
pwa: {
// workboxPluginMode: 'InjectManifest',
// workboxOptions: {},
manifest: {
name: 'Quasar Play',
short_name: 'Quasar-Play',
description: 'Quasar Framework Showcase',
icons: [
{
'src': 'icons/icon-128x128.png',
'sizes': '128x128',
'type': 'image/png'
},
{
'src': 'icons/icon-192x192.png',
'sizes': '192x192',
'type': 'image/png'
},
{
'src': 'icons/icon-256x256.png',
'sizes': '256x256',
'type': 'image/png'
},
{
'src': 'icons/icon-384x384.png',
'sizes': '384x384',
'type': 'image/png'
},
{
'src': 'icons/icon-512x512.png',
'sizes': '512x512',
'type': 'image/png'
}
],
display: 'standalone',
orientation: 'portrait',
background_color: '#ffffff',
theme_color: '#027be3'
}
}在深入研究之前，请阅读有关 清单配置 的信息。
警告
请注意，您不需要编辑 index.html 文件（从 /index.html 或 /src/index.template.html 生成）以链接到清单文件。Quasar CLI 会为您嵌入正确的内容。
提示
如果您的 PWA 位于基本身份验证后面或需要授权标头，请将 quasar.config 文件 > pwa > useCredentials 设置为 true，以便在 manifest.json 元标签上包含 crossorigin="use-credentials"。
PWA 清单
更多信息：PWA 清单
警告
不要在您的开发版本上运行 Lighthouse，因为在此阶段代码故意没有进行优化，并包含嵌入式源映射（以及其他许多内容）。有关更多信息，请参阅这些文档的 测试和审计 部分。
自动重新加载和更新
对于那些不想在服务工作者更新时手动重新加载页面**并使用默认 GenerateSW 工作区模式**的人，您可以立即使其生效。更新 /quasar.config 文件中的 workboxOptions 配置，如下所示
pwa: {
workboxOptions: {
skipWaiting: true,
clientsClaim: true
}
}