高速傳愛～三小時進化 PWA

高速傳愛 為台灣而教助學計畫 - 進化 PWA

Transcript

1. ⾼速傳愛～三⼩時進化 PWA
 styleMe 會議室∘2017.01.06
 afu @ 研發中⼼前端組
 @afutseng
2. 緣起 台灣⾼鐵董事⻑江耀宗上午將「台灣⾼鐵 ⾼速傳愛助學計畫」，
 募得款項捐贈給「為台灣⽽教協會」，由協會執⾏⻑劉安婷代表接受
 http://udn.com/news/story/9/2180211 
3. 先檢查⺫前缺什麼？
4. PWA Checklist • 網站具備 HTTPS 安全憑證 • ⾴⾯可以適應平板與⾏動裝置 • 可以離線載⼊ (⾄少⾸⾴) • 可以把網站加到⾏動裝置主畫⾯ • 3G 網路⾸次瀏覽限制在 10 秒內
 … IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU
5. HTTPS - Verify & Fix ! • 以瀏覽器驗證 SSL 憑證 • 沒有憑證怎麼辦？ ! • 熟 Linux 操作約 2 ⼩時內可完成 IUUQTMFUTFODSZQUPSH
6. Let’s Encrypt 簽發的憑證 IUUQTMFUTFODSZQUPSH
7. Offline load: Verify
8. Offline load: Verify
9. Offline load: Fix ! ! ! ! 
 IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDF XPSLFST ᅷยိݯɿ
   IUUQTXXXJHWJUBDPNDBQBCJMJUZSFQPSUJOHXJUITFSWJDFXPSLFS
10. Offline load: Fix ! ! ! ! 
 ᅷยိݯɿIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDFXPSLFST
11. sw.js 怎麼來？ • ⽅案⼀：⾃⼰寫 • ⽅案⼆：⾃動產⽣
12. Why & How ? • ⽅案⼆ - ⾃動產⽣ • 懶 • Service Worker Precache 
 (by Chrome team) • 適合靜態網⾴，搭配 cache first 策略產出 sw.js IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF
13. sw-precache • $ npm install --save-dev sw-precache IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF
14. sw-precache 初版設定 sw-precache-config.js @@ -0,0 +1,12 @@ +module.exports = { + stripPrefix: 'webroot/', + staticFileGlobs: [ + 'webroot/index.php', + 'webroot/manifest.json', + 'webroot/img/**.*', + 'webroot/css/**.*', + 'webroot/js/**.*' + ], + swFile: 'sw-generated.js'
15. 產出 service worker.js $ node_modules/sw-precache/cli.js 
 —config=sw-precache-config.js Total precache size is about 3.77 MB for 74 resources. webroot/service-worker.js has been generated with the service worker contents.
16. 初版 sw.js 遇到的問題 • 僅靜態資源 (css/js/圖) 可離線存取 • ⾸⾴ (/) 無法離線存取 • 想更改產出的 server-worker.js 檔名 • 記得寫⼊ .gitignore，⾃動產出的檔案不進版本控制
17. sw-precache 設定 Ver. patch module.exports = { root: 'webroot/', stripPrefix: 'webroot/', directoryIndex: 'index.php', staticFileGlobs: [ 'webroot/index.php', 'webroot/manifest.json', 'webroot/sw-generated.js', 'webroot/img/**/*.*', 'webroot/css/**.*', 'webroot/js/**.*' ], swFile: 'sw-generated.js' };
18. 看看成果吧！
20. 可以繼續優化的部份 • 外部 CDN 的靜態資源也可提供離線存取 • Bootstrap, Font-awesome … etc • 多數樣式已 inline 到 <head>，故視覺差異不⼤ • 導⼊ HTTP2 使多張圖⽚提早平⾏載⼊ • Lighthouse 有納⼊評核
21. Home screen - Verify & Fix • Verify: use Lighthouse to verify "User can be prompted to Add to Home screen" is all Yes. • Fix: Add a Web App Manifest file to your project. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTFOHBHFBOESFUBJOXFCBQQNBOJGFTU
22. Manifest.json 怎麼做？ • ⽅案⼀：⾃⼰寫 • ⽅案⼆：⾃動產⽣ • https://brucelawson.github.io/manifest/ • https://app-manifest.firebaseapp.com/
23. Manifest.json
24. 看看成果吧！
25. Add to 
 Home screen • 只要 icon 與捷徑標題
 相匹配表⽰正確讀取
 manifest.json UIFNFDPMPS
26. Add to 
 Home screen
27. 啟動時的過場⾴
28. Benchmark overview 看看效能如何！
30. Lighthouse score (中華寬頻)
31. Lighthouse score (中華 4G)
32. Google PSI 速度指標
33. Yellow Lab Tools IUUQZFMMPXMBCUPPMTSFTVMUFMYRPRKNI
34. 感謝聆聽 @afutseng
35. References  1. http://udn.com/news/story/9/2180211 2. https://developers.google.com/web/progressive-web-apps/ checklist 3. https://letsencrypt.org/ 4. https://developers.google.com/web/fundamentals/getting- started/primers/service-workers 5. https://www.igvita.com/2014/12/15/capability-reporting- with-service-worker/ 6. https://github.com/GoogleChrome/sw-precache 7. https://www.webpagetest.org/ 8. http://yellowlab.tools/ 9. https://developers.google.com/speed/pagespeed/insights/