Quasar CLI with Vite - @quasar/app-vite

开发 PWA 的准备工作

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

为了开发或建立一个 PWA 网站,我们首先需要将 PWA 模式添加到我们的 Quasar 项目中:

$ quasar mode add pwa

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

$ quasar dev -m pwa

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

项目中会新建一个目录,详情请参考配置 PWA page)页面。

.
└── src-pwa/
    ├── register-service-worker.js  # (或 .ts) UI 代码管理 service worker
    ├── manifest.json               #  PWA 配置清单文件
    └── custom-service-worker.js    # (或 .ts)可选的自定义 service worker 文件
                                    # (仅在 injectManifest 模式中)

以上所有文件将在下一页中详细介绍,但主要概述如下:

  • register-service-worker.[js|ts] 文件是 UI 代码的一部分,用于与 service worker 通信。
  • manifest.json 是 PWA 的配置清单文件。
  • 当使用 InjectManifest 模式时,您可以自定义 service worker (custom-service-worker.[js|ts])。

可以通过 /quasar.config.js 文件来修改上述文件名称:

// quasar.config.js

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