本次參加鐵人賽收穫很多，雖然邊寫邊學、每天都在趕十二點，不過最後也完成 To-Do List 實作 PWA 的簡單範例，可以完成離線瀏覽的網站還蠻有趣的。

奉上範例：

• simple-pwa-demo
• PWA To-Do List with Vanilla JS
• PWA To-Do List with Vanilla JS (sw-precache)
• PWA To-Do List with Vanilla JS (sw-precache-webpack-plugin)
• PWA To-Do List with React/Redux

特別感謝 洪名辰​ 幫忙 code review

來講一下這 30 天做了什麼？

首先分享和 PWA 相關的觀念，再『從零開始』寫 To-Do List 的 DEMO，最初規劃架構、建立環境，接著描述案例需求，透過原生 JS 寫對應的行為，然後加入 Service Workers 搭配 webpack & webpack-dev-server 執行，完成離線瀏覽的功能，最後再改寫成 React + Redux 的案例，完成 To-Do List 的開發。

• PWA 基本概念

  • 01 - 前言
  • 02 - 為什麼需要 PWA？
  • 03 - 什麼是 PWA？
  • 04 - Client render & Server render
  • 05 - 什麼是 App Shell?
  • 06 - App Shell 的執行效益與設計方向?
  • 07 - RAIL Model
  • 08 - Critical Render Path
  • 09 - optimizing-content-efficiency
  • 10 - Web App Manifest File
  • 11 - Service Work 簡介
  • 12 - PWA 案例介紹

• 實作 Service Worker

  • 13 - Service Worker - 環境建置
  • 14 - Service Worker - Registering the Service Worker
    • 如何註冊 service worker
    • Chrome 工具使用
  • 15 - Service Worker - Setting up the Default Cache
    • Cache 簡介
    • Chrome Cache Storage
  • 16 - Service Worker - Clearing Old Cache
    • 如何清除快取
  • 17 - Service Worker - Handling Fetch Requests
    • 如何快取 API Response

• 實作簡單 PWA 範例 (原生 JavaScript)

  • 18 - To-Do List 實作 PWA - Application Shell
    • 印出 screenshot
  • 19 - To-Do List 實作 PWA - Service Worker 搭配 Restful API (顯示待辦事項清單)
  • 20 - Service Worker 搭配 Restful API (新增/修改/刪除待辦事項清單)
  • 21 - To-Do List 實作 PWA - Web App Manifest File

• precache 工具 - 簡介/應用

  • 22 - To-Do List 實作 PWA - sw-precache 簡介
  • 23 - To-Do List 實作 PWA - sw-precache 應用
  • 24 - To-Do List 實作 PWA - sw-precache-webpack-plugin 簡介
  • 25 - To-Do List 實作 PWA - sw-precache-webpack-plugin 應用

• 實作簡單 PWA 範例 (React + Redux)

  • 26 - To-Do List 實作 PWA - 搭配 React + Redux(1)
  • 27 - To-Do List 實作 PWA - 搭配 React + Redux(2)
  • 28 - To-Do List 實作 PWA - 搭配 React + Redux(3)

• 29 - 介紹 Offline Storage

• 30 - 最終回《也是一個新的開始》

這 30 天結束後，還希望研究什麼？

其實想學習的還有好多好多，先列出之前有規劃但沒有完成的部分：

• PWA 基本概念

  • HTTP/2
  • Offline UX Considerations
  • PRPL pattern

• Production

  • HTTPS
  • push-notifications

目前完成的範例是 Service Worker 搭配 Cache Api，只能夠 cache 靜態資源和 GET 的資料，不過對於內容為主的網站來說，很夠用了，但之後希望能夠實作 IndexedDB，比較全面。

經過 30 天的 PWA 學習筆記，後續參加了 F2E&RGBA Meetup 一月號的聚會，和大家分享 PWA 學習的一些心得：
http://www.slideshare.net/newstory0113/pwa-html5

額外針對當天 Q&A 問題做進一步的補充：

Q1: Service Worker 程式碼裡面的 self 是什麼？
A: self 會指向 ServiceWorkerGlobalScope，一定要使用 self，才能找到對應的屬性以及註冊、快取等事件。

資料來源：

• Should I use self or this in service worker?

Q2: cache 有沒有容量限制？
A: 可以參考這篇： What is the storage limit for a service worker?

另外『Offline Storage for Progressive Web Apps』文章裡面有提到

Let’s get right to the point with a general recommendation for storing data offline:
For URL addressable resources, use the Cache API (part of service workers).
For all other data, use IndexedDB (with a Promises wrapper).

理由是 Cache API 和 IndexedDB 都是非同步 (IndexedDB is event based and the Cache API is Promise based)，均可以在 web workers、window、service workers 這三種環境裡運作。

Pokedex Progressive Web App 的案例，就是使用 Cache API 和 IndexedDB 作為 Offline Storage。

資料來源：

• Offline Storage for Progressive Web Apps
• Web Storage Overview - Comparison

Q3: 是否能自動產生 Service Worker 檔案?
A: Yes，可以使用 sw-precache，或者搭配 webpack 使用 sw-precache-webpack-plugin。

資料來源：

• sw-precache
• sw-precache-webpack-plugin

Q4: 是否有工具可以檢測 PWA 網站？
A: 有的，官方有釋出 Lighthouse，可以針對 PWA 做評分。

資料來源：

• GoogleChrome/lighthouse（open-source）
• lighthouse 介紹
• 推薦有趣又高分的 PWA 川普網站

小聚分享的兩個影片：

• Build the Next Generation Mobile
• Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016

還有其他感謝的人，待補充 m(_ _)m