iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 30
2
Modern Web

30 天 Progressive Web App 學習筆記系列 第 30

Day 30 - 30 天 Progressive Web App 學習筆記 - 最終回《也是一個新的開始》

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

奉上範例:

特別感謝 洪名辰​ 幫忙 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,才能找到對應的屬性以及註冊、快取等事件。

資料來源:


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。

資料來源:


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

資料來源:


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

資料來源:


小聚分享的兩個影片:


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

上一篇
Day 29 - 30 天 Progressive Web App 學習筆記 - 介紹 Offline Storage
系列文
30 天 Progressive Web App 學習筆記30

1 則留言

0
幻幽
iT邦新手 3 級 ‧ 2017-01-15 20:38:02

恭喜完賽!!

我要留言

立即登入留言