為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
延遲載入 - 程式碼分割
處理資源
啟動檔案
預先載入功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 進行狀態管理
使用 Vuex 進行狀態管理
Linter (程式碼檢查工具)
測試與稽核
開發行動應用程式
Ajax 請求
公開開放開發伺服器
Quasar CLI with Webpack - @quasar/app-webpack
什麼是 PWA

Progressive Web App (PWA) 是一種使用現代網路技術,為使用者提供類似應用程式體驗的網路應用程式。這些應用程式符合特定要求(如下所述),部署到網路伺服器,並可透過 URL(在 HTTPS 協定上)存取。

這可以與 Cordova 結合使用,為所有使用者提供多個部署目標。Quasar CLI 允許您將應用程式部署為 PWA 以及行動應用程式,並充分利用這兩個管道。

所需條件

要被視為 Progressive Web App,您的應用程式必須是

  • 漸進式 - 適用於每位使用者,無論瀏覽器選擇為何,因為它們是以漸進式增強作為核心原則而建構的。
  • 響應式 - 適用於任何外形尺寸,桌上型電腦、行動裝置、平板電腦或任何接下來的裝置。
  • 連線獨立 - 透過 Service Worker 增強,可在離線或低品質網路下運作。
  • 類應用程式 - 使用應用程式外殼模型提供應用程式風格的導航和互動。
  • 即時更新 - 由於 Service Worker 更新流程,始終保持在最新狀態。
  • 安全 - 透過 HTTPS 提供服務,以防止窺探並確保內容未被竄改。
  • 可探索 - 由於 W3C Manifest 和 Service Worker 註冊範圍,可識別為「應用程式」,讓搜尋引擎能夠找到它們。
  • 可重新互動 - 透過推播通知等功能,讓重新互動變得容易。
  • 可安裝 - 允許使用者將他們認為最有用的應用程式「保留」在主螢幕上,而無需應用程式商店的麻煩。
  • 可連結 - 透過 URL 輕鬆分享,且不需要複雜的安裝。

更多資訊請參閱 Addy Osmani 的關於 PWA 的文章

Manifest 檔案

應用程式 Manifest 檔案描述您的應用程式將需要的資源。這包括您應用程式的顯示名稱、圖示以及啟動畫面。Quasar CLI 會為您配置此檔案,但您可以從 /quasar.config 檔案中覆蓋任何屬性。請造訪設定 PWA文件頁面,了解如何操作。

更多資訊:Manifest 檔案

Service Worker

Service Worker 提供了一種程式化的方式來快取應用程式資源(檔案)。程式化 API 允許開發人員決定如何處理快取,並提供比其他選項更靈活的體驗。

更多資訊:Service Worker API