PWA Reference

PWA 介紹

• Progressive Web Apps
  • https://developers.google.com/web/progressive-web-apps/
• Building Progressive Web Apps Today (Chrome Dev Summit 2016)
  • https://www.youtube.com/watch?v=U52dD0tegsA&feature=youtu.be&t=5m20s
• Build the Next Generation Mobile
  • https://www.youtube.com/watch?v=3tb-1MWg44Y
• Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016
  • https://www.youtube.com/watch?v=cmGr0RszHc8&feature=youtu.be&t=4m25s

---

PWA - 案例網站

• outweb（依照網站性質分類）
  • https://outweb.io/
• pwa.rock（依照網站性質分類）
  • https://pwa.rocks/
• PWA Directory（可以依照網站評分排行）
  • https://pwa-directory.appspot.com/
• PWA Stats（列出網站使用 PWA 所帶來的成效）
  • https://www.pwastats.com/

---

PWA - 檢測 PWA 工具

• Lighthouse (由 Google 工程師所開發)
  • https://developers.google.com/web/tools/lighthouse/
  • https://github.com/GoogleChrome/lighthouse

---

PWA - Service Workers 介紹

• Can I use Service Workers?
  • http://caniuse.com/#feat=serviceworkers
• is Service Worker ready?
  • https://jakearchibald.github.io/isserviceworkerready/
• ServiceWorker Cookbook
  • https://serviceworke.rs/
• The offline cookbook（offline 詳解）
  • https://jakearchibald.com/2014/offline-cookbook 例如：
    • Cache only
      • https://jakearchibald.com/2014/offline-cookbook/#cache-only
    • Network First
      • https://jakearchibald.com/2014/offline-cookbook/#network-falling-back-to-cache

---

PWA - generate Service Workers tools

• GoogleChrome/sw-toolbox
  • https://github.com/GoogleChrome/sw-toolbox
• GoogleChrome/sw-precache
  • https://github.com/GoogleChrome/sw-precache
• goldhand/sw-precache-webpack-plugin
  • https://github.com/goldhand/sw-precache-webpack-plugin
• sw-precache? sw-toolbox? What's the difference?
  • https://github.com/GoogleChrome/sw-precache/blob/master/sw-precache-and-sw-toolbox.md

---

Q&A

Q1: Service Worker 程式碼裡面的 self 是什麼？

A: self 會指向 ServiceWorkerGlobalScope，一定要使用 self，才能找到對應的屬性以及註冊、快取等事件。

資料來源： Should I use self or this in service worker? http://stackoverflow.com/questions/38040044/should-i-use-self-or-this-in-service-worker

---

Q2: cache 有沒有容量限制？

A: 可以參考這篇：What is the storage limit for a service worker? http://stackoverflow.com/questions/35242869/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。 https://www.pokedex.org/

資料來源： Offline Storage for Progressive Web Apps https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa?hl=zh-tw

Web Storage Overview - Comparison https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/?hl=zh-tw#comparison

---

Q3: 是否能自動產生 Service Worker 檔案?

A: Yes，可以使用 sw-precache，或者搭配 webpack 使用 sw-precache-webpack-plugin。

資料來源： sw-precache https://github.com/GoogleChrome/sw-precache

sw-precache-webpack-plugin https://github.com/AnnaSu/todolist-pwa-demo/tree/sw-precache-webpack-plugin

---

Q4: 是否有工具可以檢測 PWA 網站？

A: 有的，官方有釋出 Lighthouse，可以針對 PWA 做評分。

資料來源： GoogleChrome/lighthouse（open-source） https://github.com/GoogleChrome/lighthouse

lighthouse 介紹 https://developers.google.com/web/tools/lighthouse/

---

Q5: 如果 handler 設定為 cache only 之後，檔案突然需要變更怎麼辦？

A: 可以修改 cacheId 的值來變更 cache 名稱，或者修改檔案命名，進一步取得新的 cache。

---

Q6: 分享中主要是藉由 Webpack plugin 產生出 service worker 的 js 檔，那麼這部分有推薦的 gulp plugin 嗎?

可以參考 Google Developer Training: https://google-developer-training.gitbooks.io/progressive-web-apps-ilt-codelabs/content/docs/lab_sw-precache_and_sw-toolbox.html#4

DEMO: https://github.com/GoogleChrome/sw-precache/blob/master/demo/gulpfile.js

---

Q7: 使用 POST 或 PUT method 的 API，也可以離線操作嗎？

A: 可以，基本做法就是把 request 暫存到 IndexDB，等到上線後再發出。

不過我也還沒有實作過，但可以參考：

https://bitsofco.de/bitsofcode-pwa-part-2-instant-loading-with-indexeddb/

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa

https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/

https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications

---

Anna Su 分享資源

簡報

• PWA 與 Service Worker (2017/01/23【F2E&RGBA Meetup】所分享的簡報)
  • https://www.slideshare.net/newstory0113/pwa-html5
• PWA 應用 - 實現網站離線瀏覽 (2017/04/13【線上 React 讀書會】所分享的簡報)
  • https://www.slideshare.net/newstory0113/pwa-75011567

範例

• simple-pwa-demo

  • https://github.com/AnnaSu/simple-pwa-demo

• PWA To-Do List with Vanilla JS

  • https://github.com/AnnaSu/todolist-pwa-demo

• PWA To-Do List with Vanilla JS (sw-precache)

  • https://github.com/AnnaSu/todolist-pwa-demo/tree/sw-precache

• PWA To-Do List with Vanilla JS (sw-precache-webpack-plugin)

  • https://github.com/AnnaSu/todolist-pwa-demo/tree/sw-precache-webpack-plugin

• PWA To-Do List with React/Redux

  • https://github.com/AnnaSu/todolist-pwa-demo-react