在30天內學​​習漸進式Web應用開發

banq發表於2022-06-05
Web

漸進式 Web 應用程式 (PWA)是一種傳統的 Web 應用程式，它使用開放式 Web 技術逐步增強，以確保它根據可用功能在每臺裝置上提供最佳體驗。

漸進式增強是一種設計理念，強調開發人員的內容優先體驗

  • 確保有基準體驗，以便使用者可以從任何裝置（即使是使用舊版瀏覽器的裝置）消費核心內容。
  • 檢測是否存在更新的功能（例如，在現代瀏覽器、更新的裝置上）並增強這些裝置的使用體驗。


漸進式Web Apps 利用開放式 Web 技術（如 Service Workers、HTTPS、Web App Manifest、推送通知和其他 Web API 和功能）來檢測和調整體驗以適應平臺上的可用功能。
  • 在較舊的裝置和瀏覽器上 - 可能檢測不到任何新內容，它提供了基準網站體驗。
  • 在較新的裝置上——它可以檢測裝置外形尺寸並提供與特定平臺行為一致的響應式體驗。
  • 在現代瀏覽器上 - 它可以檢測對 Service Worker 和 Web App Manifest 的支援，並使用它們來解鎖和支援可安裝性和離線操作等功能- 就像特定於平臺的應用程式一樣。

隨著平臺的發展，以及更多平臺向右移動（在功能支援方面），PWA 開發將成為在最廣泛的裝置上提供可擴充套件體驗的關鍵。

PWA Studio 是一個Vscode擴充套件外掛，它將構建 PWA 所需的一切帶到VSCode中。安裝 PWA Studio時，您可以：
  • 使用 PWABuilder pwa-starter 在幾秒鐘內開始構建新的 PWA。
  • 瞭解如何使用Azure 靜態 Web 應用將應用釋出到 Web
  • 將 Web App Manifest 和 Service Worker 新增到現有的 Web 應用
  • 為 Microsoft Store、Google Play 和 Apple App Store 打包 PWA
  • 為你的 PWA 生成圖示
  • 驗證您的 PWA 是否可安裝在瀏覽器中並準備好釋出到應用商店
  • 詳細瞭解如何使用 Web App Manifest 在 PWA 中啟用新功能
  • 使用程式碼片段來實現特定於平臺的功能，這些功能可以改善 PWA 的使用者體驗。

這就是我們如何使用新的 PWA Studio VSCode 擴充套件和 PWA Starter 開始構建 PWA，只需單擊幾下按鈕！

 

相關文章