Upgrade to Pro — share decks privately, control downloads, hide ads and more …

高速傳愛～三小時進化 PWA


Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for chph chph
January 06, 2017
Technology
300
0

高速傳愛～三小時進化 PWA


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

Avatar for chph

chph

January 06, 2017

More Decks by chph

See All by chph
Chrome Dev Tools 基礎技巧
Avatar for chph chph
0
100
DevOpsDays Taipei 2017 敏捷思維分享
Avatar for chph chph
0
120
在 Google Cloud Platform 架設你的網站伺服器並撰寫 Node.js 應用程式
Avatar for chph chph
0
720
Intro to Progressive Web Apps
Avatar for chph chph
1
76
淺談 Gzip
Avatar for chph chph
0
140
Install WordPress on Linode
Avatar for chph chph
0
170
Introduction Infrastructure - Linode 入門
Avatar for chph chph
0
230
Optimize JavaScript execution and parse time using optimize-js
Avatar for chph chph
0
170
Modern Web 2016 議程分享：
網站自動化測試
 - 以 PIXNET 搜尋 & 
美妝口碑大賞為例
Avatar for chph chph
0
130

Other Decks in Technology

See All in Technology
Mastraエージェント、どのクラウドにデプロイする？
Avatar for みのるん minorun365
PRO
2
170
Foxgloveについて 実際にExtensionを開発して公開するまでの話 / About Foxglove: The Story of Developing and Releasing an Extension
Avatar for Ryo Kabutan ry0_ka
0
130
しぶいSRE: サーバから見えない障害にどう向き合うか。ラストワンマイルのデバッグ実践 / Shibui SRE
Avatar for Hokuto Hoshi kanny
7
2.1k
そのハーネス、本当に境界になっていますか？ AIエージェント時代の実行環境設計【MEGU-Meet #4】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
0
110
Keeping applications secure by evolving OAuth 2.0 and OpenID Connect
Avatar for Alexander Schwartz ahus1
PRO
1
140
なぜ人は自分のプロジェクトを 「なんちゃってアジャイル」と 自嘲するのか
Avatar for Kozo Taira kozotaira
0
250
証券システムを10年Scalaで作り続けるということ - 関数型まつり2026
Avatar for krrrr38 krrrr38
2
430
AWS Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
Avatar for Kazuki Adachi k_adachi_01
2
350
スタートアップにおけるアジャイルの実践について #shibuyagile
Avatar for bayashi murabayashi
3
2.1k
cccccc
Avatar for moznion moznion
0
1.7k
そのタスクオンスケですか？
Avatar for フクイ poropinai1966
0
130
なぜ私たちのSREプラクティスはなかなか機能しないのか 〜システムより先に組織を見る〜 / Why our SRE practices aren't really working
Avatar for VTRyo vtryo
0
750

Featured

See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
230
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
Done Done
Avatar for chrislema chrislema
186
16k
It's Worth the Effort
Avatar for 3n 3n
188
29k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
8.5k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
380
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.2k

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. 看看成果吧！

  19. None

  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 看看效能如何！

  29. None

  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/