PWA 基本概念
Progressive Web App (PWA) 背景
PWA 的核心是在於 progressive (漸進式) 這個詞，主旨核心是根據使用者設備能力逐步增強使用者體驗或者也可以說使網站逐步漸進提升為具有 app 的優點。
總體來說，PWA 是結合網頁與 app 的一項技術，除了最基本的 RWD 與漸進式特性，主要優點包括：
- 可離線工作。
- 可以像 app 一樣變成一個小小 icon 新增在手機桌面上 (看起來就像是一個 app)。
- 可以推播。
- 比一般網站更快的速度。
而且因為 PWA 本體仍然是個網站，所以能對網站做的優化基本對它也可以進行，包括 SEO。
PWA 的基本架構
PWA 的主架構部分環繞在 Service Worker 上，因為 service worker 緩存 (cache) 的功能，可以把網頁內容先緩存到本地資料庫，這樣一方面可以提高 loading 速度，在離線時也可以瀏覽緩存的內容。
PWA 的另一個核心是 app shell，整體概念類似通用佈局，基本就是那些不太會變動的內容，比如功能列或 footer。這樣的好處是，app shell 會在一開始先被載入，讓使用者有最基本的畫面可以看到，不至於盯著一個白色的螢幕乾等，可以提高 UI 體驗。
RAIL Model
RAIL model 是 Google 提出用來衡量網頁應用程序性能的方法，同樣標準可以衡量 PWA 開發。
- Response：系統能迅速響應，在 100 毫秒內能給出回饋。
- Animation：每幀在 10 毫秒內渲染完成。
- Idle：最大化利用空閒時間，比如當程序閒置時可以預先加載內容。
- Load：載入時間小於 1 秒。
info
關於網站效能，還可以考慮 Critical Render Path
Service Worker
Service Worker 作為 PWA 技術的核心架構之一，其實扮演的角色是瀏覽器與伺服器的中間人。每次當瀏覽器發送請求，Service Worker 會先判斷這個請求是否可以直接用 cache (緩存) 中的內容，如果不行才會轉給伺服器做請求。
PWA 的背景同步 (使用者在離線狀態下嘗試發送表單，而背景同步可以實現在接回網路時自動重新傳送表單)、推播通知也都是靠 Service Worker 來實現。
Service Worker 的生命週期大致如下：
- Download：用戶首次訪問該PWA 網站，Service Worker 會被立刻下載。
- Install：接著 Service Worker 會開始安裝，此時也會先緩存核心資料 (app shell)。
- Activate：Service Worker 開始接手網路請求。