我们将使用Quasar CLI来开发和构建PWA。构建SPA、移动应用、Electron应用、PWA或SSR之间的区别仅仅由“quasar dev”和“quasar build”命令中的“mode”参数决定。

为了建立PWA，我们首先需要在我们的Quasar项目中加入PWA模式：

$ quasar mode add pwa

如果你想直接进入并开始开发，你可以跳过“quasar mode”命令并发出：

$ quasar dev -m pwa

这将自动添加PWA模式（如果没有的话）。

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

.
└── src-pwa/
    ├── register-service-worker.js  # (or .ts) UI code *managing* service worker
    ├── manifest.json               # Your PWA manifest file
    └── custom-service-worker.js    # (or .ts) Optional custom service worker file
                                    #               (injectManifest mode ONLY)

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

• 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',
}
``