我們將使用 Quasar CLI 來開發和建置 PWA。建置 SPA、行動應用程式、Electron 應用程式、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|ts] 檔案是 UI 程式碼的一部分，並與 service worker 通訊。
• manifest.json 是 PWA manifest 檔案。
• 當使用 InjectManifest 時，您可以編寫自己的自訂 service worker (custom-service-worker.[js|ts])。

如果您想使用不同的檔案名稱，您可以透過編輯 /quasar.config 檔案來完成

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