我们将使用 Quasar CLI 开发和构建一个渐进式 Web 应用。构建 SPA、移动应用、Electron 应用、PWA 或 SSR 之间的区别仅仅取决于 “quasar dev” 和 “quasar 构建” 命令中的 “mode” 参数。

¥We’ll be using Quasar CLI to develop and build a PWA. The difference between building a SPA, Mobile App, Electron App, PWA or SSR is simply determined by the “mode” parameter in “quasar dev” and “quasar build” commands.

为了构建 PWA，我们首先需要将 PWA 模式添加到我们的 Quasar 项目中：

¥In order to build a PWA, we first need to add the PWA mode to our Quasar project:

$ quasar mode add pwa

如果你想直接开始开发，可以跳过 “quasar 模式” 命令并执行：

¥If you want to jump right in and start developing, you can skip the “quasar mode” command and issue:

$ quasar dev -m pwa

如果缺少 PWA 模式，这将自动添加它。

¥This will add PWA mode automatically, if it is missing.

你的项目文件夹中将出现一个新文件夹（配置 PWA 页面上有详细说明）：

¥A new folder will appear in your project folder (which is explained in detail on the Configuring PWA page):

以上所有文件将在下一页详细介绍，但概要如下：

¥All the files above are going to be detailed in the next pages, but the high overview is:

• register-service-worker.js 文件是 UI 代码的一部分，用于与 Service Worker 通信。

  ¥The register-service-worker.js file is part of the UI code and communicates with the service worker.

• manifest.json 是 PWA 清单文件。

  ¥The manifest.json is the PWA manifest file.

• 使用 InjectManifest 时，你可以编写自己的自定义服务工作线程 (custom-service-worker.js)。

  ¥When using InjectManifest, you can write your own custom service worker (custom-service-worker.js).

如果你想要使用不同的文件名，你可以通过编辑 /quasar.config 文件来实现：

¥Should you want to use different filenames, you can do so by editing the /quasar.config file:

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