PWA 準備 | Quasar Framework - Quasar 框架

為什麼捐款

如何貢獻

選項與輔助工具

風格與識別

版面配置與網格

Vue 元件

Vue 指令 (Vue Directives)

Quasar 插件 (Quasar Plugins)

Vue Composables

安全性 (Security)

Quasar CLI (搭配 Vite) (Quasar CLI (with Vite))

Quasar CLI (搭配 Webpack)

quasar.config 檔案

轉換為搭配 Webpack 的 CLI

瀏覽器相容性

支援 TypeScript

CSS 預處理器

延遲載入 - 程式碼分割

處理 process.env

使用 Pinia 的狀態管理

使用 Vuex 的狀態管理

測試與稽核

SPA 模式 (SPA mode)

SSR 模式 (SSR mode)

PWA 模式

PWA 的應用程式圖示

處理 Service Worker

PWA 與 Typescript

開發行動應用程式

Capacitor 模式

Cordova 模式

Electron 模式

瀏覽器擴充功能模式

向公眾開放開發伺服器

Icon Genie CLI

App Extensions

Quasar 工具

Quasar CLI 與 Webpack - @quasar/app-webpack

PWA 的準備工作

我們將使用 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 模式遺失，這將會自動新增。

一個新資料夾將會出現在您的專案資料夾中 (詳細說明請參閱 Configuring PWA 頁面)

src-pwa/

register-service-worker.js

# (或 .ts) 應用程式碼 *管理* service worker

custom-service-worker.js

# (或 .ts) 可選的自訂 service worker 檔案 (僅限 InjectManifest 模式)

這兩個檔案將在接下來的頁面中詳細說明，但概括來說是

register-service-worker.[js|ts] 檔案是 UI 程式碼的一部分，並與 service worker 通訊。
當使用 InjectManifest 時，您可以編寫自己的自訂 service worker (custom-service-worker.[js|ts])。

發現錯誤？在瀏覽器中編輯此頁面