前言
Progressive Web Apps (漸進式網頁應用程式) 是 Google 於西元 2015 年提出的新興網頁應用程式形態,Microsoft 等瀏覽器廠商共同支持。簡單地說,progressive web apps 透過數種技術讓網頁程式有著和原生程式相近的體驗:
- 可安裝到行動裝置的桌面
- 在網路連線不佳時仍可順暢地瀏覽網站
- 可離線存取網站內容
- (改善中) 可使用硬體資源
本書共 469 頁,分為 10 章,算是一本中量級的書籍。接下來,我們會逐一介紹各章的內容。
Introduction to Progressive Web Apps
由於 progressive web apps 算是一個相對新穎的概念,本章會說明 progressive web apps 的由來、特性及這類應用程式所帶來的改進。
本書會展示三個範例程式:
- 2048 遊戲
- 照片庫 (photo gallery)
- 訂票系統
註:其實本書第二個範例程式是廣播 (podcast) 程式,而非照片庫,這應該是原作者吃書而編輯沒有發現。
本章會介紹本書第一個程式:2048。
Creating a Home Screen Experience with a Web Manifest
透過設置 web manifest,網站訪客就可以將網站裝到主畫面,對於行動裝置的訪客來說,這項特性相當方便。透過設置 JSON 格式的設定檔即可開啟 web manifest,算是相當容易取得的特性。
Making Your Website Secure
本章介紹 SSL 和 TLS 認證,接著介紹 HTTPS 協定。不論是為了網站安全還是 SEO,我們都應該把網站升級成 HTTPS 協定。早期 HTTPS 協定相對昂貴,現在透過 Let's Encrypt 我們可以用相對低廉的代價將網站升級到 HTTPS 協定。此外,本章介紹數個網站升級後應做的調整事項。
HTTPS 網站不算是 progressive web apps 的特性,只能算是其前置條件。但若網站沒有使用 HTTPS 協定,不會引發 progressive web apps 應有的特性,故我們仍要將網站升級到 HTTPS。
Service Worker - Notification, Synchronization, and our Podcast App
Service worker 是 progressive web apps 中相當核心的部分,該元件就像是一個介於瀏覽器和遠端網站間的代理人 (proxy),在背景運行。透過 service worker,可以進行快取、同步化、推播等功能。本章會簡介 service worker 的特性,並介紹一個廣播 (podcast) 程式做為範例。
The Service Worker Life Cycle
本章詳細講解 service worker 的生命週期 (life cycle) 以及在不同階段撰寫相對應的程式碼。雖然這概念不難,但熟悉這些特性,可做出更複雜的 service worker 程式,像是利用 scope 在同一個網站中分別註冊多個 service worker 程式等。
Mastering the Cache API - Managing Web Assets in a Podcast Application
本章介紹 Fetch API 和 Cache API 的用法,算是為下一章做暖身。如果已經熟悉這兩個 API 的讀者,可以快速瀏覽或是略過;反之,可以學一下 API 的使用方式。本章仍然沿用廣播程式為範例。
Service Worker Caching Patterns
本章承續上一章的內容,介紹數個在 service worker 中可用的快取模式,像是
- Precaching
- On activate
- Real-time caching
- On user interaction
- On network response
- Stale while revalidating
- On push notification
- On background sync
以及其他數種模式。本章仍然沿用先前的廣播應用程式。
Applying Advanced Service Worker Cache Strategies
本章結合先前學到的知識,製作一個訂票系統。本範例的重點在於討論不同情境下的快取策略,因為一致的狀態是訂票程式的重點。
Optimizing for Performance
我們在一邊做快取時,仍然要儘量保持順暢的使用者體驗,故本章介紹一些優化 progressive web apps 的手法。另外介紹數個檢測工具,像是 LightHouse 和 WebPageTest 等。
Service Worker Tools
本章介紹數個 progressive web apps 相關的工具:
- PWA Builder:將 progressive web apps 做成 Windows Store 應用程式
- LightHouse:量測 progressive web apps 的工具
- Sonar:另一個量測 progressive web apps 的工具
- Workbox:建置 progressive web apps 的函式庫
這些工具是輔助我們建置或優化 progressive web apps,而非必備事項,大略閱讀後,選取對自己有幫助的工具即可。
結語
雖然本書的標題含有 by Example 的字眼,但本書更注重原理的闡述,範例不會逐行講解。讀者可以將本書提供的範例和書本相互參考,就可以了解範例程式運作的原理。本書文字較多,較難一看就能馬上建立自己的應用程式,耐著性子看完後,更能夠知其然也知其所以然。
本書著重在 web manifest 和 service worker 相關的內容,對於其他的技術,像是 IndexDB 或控制硬體的 API,沒有進行相關的探討。一方面是要控制書本的容量,以免成本過高;一方面是硬體相關的 API 還在發展中,不一定每個瀏覽器都能支援得很好。