歡迎學習漸進式網頁應用程式!

本課程會分析現代漸進式網頁應用程式開發作業的各個環節。

本課程將以簡單易懂的方式說明漸進式網頁應用程式開發的基本概念。透過下列模組,您將瞭解什麼是漸進式網頁應用程式、如何建立或升級現有網路內容,以及如何為離線可安裝的應用程式新增所有元件。請使用選單窗格瀏覽各個模組。(選單位於電腦左側,或位於漢堡選單後方)。

您將瞭解 PWA 的基礎知識,例如網頁應用程式資訊清單、服務工作站、如何設計應用程式,以及如何使用其他工具測試 PWA 並進行偵錯。完成這些基礎知識後,您將瞭解如何與平台和作業系統整合、如何改善 PWA 的安裝和使用體驗,以及如何提供離線體驗。

每個單元都包含互動式示範及自我評量,可用來驗收學習成果。您將可在手機、平板電腦或筆記型電腦上測試及試用示範模式,同時玩玩程式碼,瞭解漸進式網頁應用程式的基本概念。

本課程專為初學者和進階網路開發人員所設計。您可以從頭開始瀏覽本系列文章,從上到下大致瞭解 PWA,也可以將其做為特定主題的參考資料。如果您是第一次使用網頁開發,請先熟悉 HTML、CSS 和 JavaScript 的基礎概念。 歡迎查看瞭解 CSS,以及 MDN 的 HTMLJavaScript 課程。

課程內容如下:

開始使用

建構漸進式網頁應用程式時,您可能會想知道該從何著手,是否可以從零開始,將網站升級為 PWA,或是從平台專屬應用程式改用 PWA。本文將協助您獲得解答。

基礎課程

所有漸進式網頁應用程式均以新式的核心網站為基礎,因此請務必為網站奠定穩固基礎,全面採用回應式設計、行動裝置和一切設計、內建函式設計和網站效能。

應用程式設計

漸進式網頁應用程式與傳統網站與網頁應用程式的主要差異之一,就是可安裝性。這樣就能建立與平台和作業系統更緊密整合的獨立服務體驗。安裝內容帶來更大的彈性和新的責任,因為我們不再需要瀏覽器的內容介面。

資產與資料

Progressive Web App 是網站,其所有資產都與網路版相同,但還提供新的工具,讓這些素材資源能在線上快速載入,並且可離線使用。

Service Worker

Service Worker 是 PWA 的基本要素。無論使用哪個網路,都能快速載入、離線存取、推播通知及其他功能。

快取

你可以使用 Cache Storage API 來下載、儲存、刪除或更新裝置上的資產。如此一來,這些資產就能在裝置上提供,無需提出網路要求。

放送

透過 Service Worker 的擷取事件,您可以攔截網路要求,並使用不同技術提供回應。

工作箱

Workbox 是一組模組,可簡化常見的服務工作處理程序互動,例如轉送和快取。每個模組都會探討服務工作處理程序開發的特定層面。Workbox 旨在讓 Service Worker 更容易使用,同時也能視需要彈性滿足複雜的應用程式需求。

離線資料

如要打造可靠的離線體驗,您必須實作儲存空間管理功能。IndexedDB、快取、儲存空間管理工具、永久儲存空間和內容索引等服務都能派上用場。

安裝

已安裝的應用程式都很容易存取,還能與作業系統進行更深入的整合。瞭解如何透過可安裝的 PWA 獲得上述優勢。

網頁應用程式資訊清單

網頁應用程式資訊清單是 JSON 檔案,用於定義 PWA 應如何視為已安裝的應用程式,包含作業系統的外觀和風格及基本行為。

安裝提示

如果網站符合 PWA 安裝條件,瀏覽器就會觸發事件,提示使用者進行安裝。好消息是,您可以利用此事件自訂提示,並邀請使用者安裝應用程式。

更新

您可能還需要更新 PWA。本章節介紹多種工具,可用來更新 PWA 的不同部分,包括資產和中繼資料。

強化

使用者希望獲得良好的體驗。在本章中,您將瞭解如何使用啟動畫面、應用程式捷徑以及工作階段的運作方式,加強 PWA。

偵測

瞭解使用者與應用程式互動的方式,有助於自訂及改善使用者體驗。舉例來說,您可以檢查使用者的裝置是否已安裝應用程式,並實作各種功能,例如將瀏覽器從瀏覽器轉移至獨立應用程式。

OS 整合

您的 PWA 現在可在瀏覽器外使用。本章節將說明如何在使用者安裝應用程式後,進一步與作業系統整合。

視窗管理

瀏覽器之外的 PWA 會管理自己的視窗。在本章中,您將瞭解在作業系統中管理視窗的 API 和功能。

實驗功能

目前仍有 PWA 功能仍處於建構階段,而你可參與其開發作業。本章節會說明 Fugu 專案、如何申請來源試用,以及如何使用實驗性 API

工具與偵錯

我們會探索可用於開發、偵錯及測試漸進式網頁應用程式的工具。

架構

開發 PWA 時,您得做出一些決定,例如是要建立單頁應用程式,還是多頁面應用程式,以及要代管在網域的根層級還是資料夾中。

複雜度管理

讓網頁應用程式保持簡單明瞭並不容易。在本單元中,您將瞭解網路 API 如何與執行緒搭配運作,以及如何將這類 API 用於狀態管理等常見的 PWA 模式。

功能

PWA 並非只與螢幕相關聯。本章節將說明 PWA 在硬體、感應器和平台使用情形方面的現今功能。

結語

後續步驟和資源。

準備好學習 PWA 了嗎?