我们将利用 Quasar CLI 开发和构建 PWA 网站。构建 SPA、Mobile App、Electron App、PWA 或 SSR 之间的区别仅仅是由 quasar dev 和 quasar build 命令中的 mode 参数决定的。

为了开发或构建一个 PWA 网站，我们首先需要将 PWA 模式添加到 Quasar 项目中：

quasar mode add pwa

如果您想直接开始开发，也可以跳过 “quasar mode” 命令，直接使用：

quasar dev -m pwa

这样，如果项目缺少 PWA 模式，则会自动添加后启动。

项目中会新建一个目录（详情请参考配置 PWA 页面）：

以上所有文件将在后续页面中详细介绍，但主要概述如下：

• register-service-worker.js 文件是 UI 代码的一部分，用于与 service worker 通信。
• manifest.json 是 PWA 的 manifest 文件。
• 当使用 InjectManifest 模式时，您可以编写自定义的 service worker（custom-service-worker.js）。

如果您想使用不同的文件名，可以在 /quasar.config 文件中进行修改：

sourceFiles: {
  pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
  pwaServiceWorker: 'src-pwa/custom-service-worker',
  pwaManifestFile: 'src-pwa/manifest.json',
}