高速傳愛～三小時進化 PWA 

⾼速傳愛～三⼩時進化 PWA  styleMe 會議室∘2017.01.06  afu @ 研發中⼼前端組  @afutseng

緣起台灣⾼鐵董事⻑江耀宗上午將「台灣⾼鐵⾼速傳愛助學計畫」，  募得款項捐贈給「為台灣⽽教協會」，由協會執⾏⻑劉安婷代表接受  http://udn.com/news/story/9/2180211

先檢查⺫前缺什麼？

PWA Checklist • 網站具備 HTTPS 安全憑證 • ⾴⾯可以適應平板與⾏動裝置 • 可以離線載⼊
(⾄少⾸⾴) • 可以把網站加到⾏動裝置主畫⾯ • 3G 網路⾸次瀏覽限制在 10 秒內  … IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU

HTTPS - Verify & Fix ! • 以瀏覽器驗證 SSL 憑證
• 沒有憑證怎麼辦？ ! • 熟 Linux 操作約 2 ⼩時內可完成 IUUQTMFUTFODSZQUPSH

Let’s Encrypt 簽發的憑證 IUUQTMFUTFODSZQUPSH

Ofﬂine load: Verify

Ofﬂine load: Fix ! ! ! !   IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDF XPSLFST
ᅷยိݯɿIUUQTXXXJHWJUBDPNDBQBCJMJUZSFQPSUJOHXJUITFSWJDFXPSLFS

Ofﬂine load: Fix ! ! ! !   ᅷยိݯɿIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDFXPSLFST

sw.js 怎麼來？ • ⽅案⼀：⾃⼰寫 • ⽅案⼆：⾃動產⽣

Why & How ? • ⽅案⼆ - ⾃動產⽣ • 懶
• Service Worker Precache   (by Chrome team) • 適合靜態網⾴，搭配 cache ﬁrst 策略產出 sw.js IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF

sw-precache • $ npm install --save-dev sw-precache IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF

sw-precache 初版設定 sw-precache-conﬁg.js @@ -0,0 +1,12 @@ +module.exports = {
+ stripPreﬁx: 'webroot/', + staticFileGlobs: [ + 'webroot/index.php', + 'webroot/manifest.json', + 'webroot/img/**.*', + 'webroot/css/**.*', + 'webroot/js/**.*' + ], + swFile: 'sw-generated.js'

產出 service worker.js $ node_modules/sw-precache/cli.js   —conﬁg=sw-precache-conﬁg.js Total precache size
is about 3.77 MB for 74 resources. webroot/service-worker.js has been generated with the service worker contents.

初版 sw.js 遇到的問題 • 僅靜態資源 (css/js/圖) 可離線存取 • ⾸⾴ (/)
無法離線存取 • 想更改產出的 server-worker.js 檔名 • 記得寫⼊ .gitignore，⾃動產出的檔案不進版本控制

sw-precache 設定 Ver. patch module.exports = { root: 'webroot/', stripPreﬁx:
'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' };

看看成果吧！

可以繼續優化的部份 • 外部 CDN 的靜態資源也可提供離線存取 • Bootstrap, Font-awesome … etc
• 多數樣式已 inline 到 <head>，故視覺差異不⼤ • 導⼊ HTTP2 使多張圖⽚提早平⾏載⼊ • Lighthouse 有納⼊評核

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 ﬁle to your project. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTFOHBHFBOESFUBJOXFCBQQNBOJGFTU

Manifest.json 怎麼做？ • ⽅案⼀：⾃⼰寫 • ⽅案⼆：⾃動產⽣ • https://brucelawson.github.io/manifest/ • https://app-manifest.ﬁrebaseapp.com/

Manifest.json

看看成果吧！

Add to   Home screen • 只要 icon 與捷徑標題  相匹配表⽰正確讀取 
manifest.json UIFNFDPMPS

Add to   Home screen

啟動時的過場⾴

Benchmark overview 看看效能如何！

Lighthouse score (中華寬頻)

Lighthouse score (中華 4G)

Google PSI 速度指標

Yellow Lab Tools IUUQZFMMPXMBCUPPMTSFTVMUFMYRPRKNI

感謝聆聽 @afutseng

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/

高速傳愛～三小時進化 PWA

高速傳愛～三小時進化 PWA

chph

More Decks by chph

Other Decks in Technology

Featured

Transcript

⾼速傳愛～三⼩時進化 PWA  styleMe 會議室∘2017.01.06  afu @ 研發中⼼前端組  @afutseng

緣起台灣⾼鐵董事⻑江耀宗上午將「台灣⾼鐵⾼速傳愛助學計畫」，  募得款項捐贈給「為台灣⽽教協會」，由協會執⾏⻑劉安婷代表接受  http://udn.com/news/story/9/2180211

先檢查⺫前缺什麼？

PWA Checklist • 網站具備 HTTPS 安全憑證 • ⾴⾯可以適應平板與⾏動裝置 • 可以離線載⼊

HTTPS - Verify & Fix ! • 以瀏覽器驗證 SSL 憑證

Let’s Encrypt 簽發的憑證 IUUQTMFUTFODSZQUPSH

Ofﬂine load: Verify

Ofﬂine load: Verify

Ofﬂine load: Fix ! ! ! !   IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDF XPSLFST

Ofﬂine load: Fix ! ! ! !   ᅷยိݯɿIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDFXPSLFST

sw.js 怎麼來？ • ⽅案⼀：⾃⼰寫 • ⽅案⼆：⾃動產⽣

Why & How ? • ⽅案⼆ - ⾃動產⽣ • 懶

sw-precache • $ npm install --save-dev sw-precache IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF

sw-precache 初版設定 sw-precache-conﬁg.js @@ -0,0 +1,12 @@ +module.exports = {

產出 service worker.js $ node_modules/sw-precache/cli.js   —conﬁg=sw-precache-conﬁg.js Total precache size

初版 sw.js 遇到的問題 • 僅靜態資源 (css/js/圖) 可離線存取 • ⾸⾴ (/)

sw-precache 設定 Ver. patch module.exports = { root: 'webroot/', stripPreﬁx:

看看成果吧！

可以繼續優化的部份 • 外部 CDN 的靜態資源也可提供離線存取 • Bootstrap, Font-awesome … etc

Home screen - Verify & Fix • Verify: use Lighthouse

Manifest.json 怎麼做？ • ⽅案⼀：⾃⼰寫 • ⽅案⼆：⾃動產⽣ • https://brucelawson.github.io/manifest/ • https://app-manifest.ﬁrebaseapp.com/

Manifest.json

看看成果吧！

Add to   Home screen • 只要 icon 與捷徑標題  相匹配表⽰正確讀取

Add to   Home screen

啟動時的過場⾴

Benchmark overview 看看效能如何！

Lighthouse score (中華寬頻)

Lighthouse score (中華 4G)

Google PSI 速度指標

Yellow Lab Tools IUUQZFMMPXMBCUPPMTSFTVMUFMYRPRKNI

感謝聆聽 @afutseng

References 1. http://udn.com/news/story/9/2180211 2. https://developers.google.com/web/progressive-web-apps/ checklist 3. https://letsencrypt.org/ 4.