Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

高速傳愛～三小時進化 PWA


Avatar for chph chph
January 06, 2017
Technology
310
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
78
淺談 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
240
Optimize JavaScript execution and parse time using optimize-js
Avatar for chph chph
0
170
Modern Web 2016 議程分享：
網站自動化測試
 - 以 PIXNET 搜尋 & 
美妝口碑大賞為例
Avatar for chph chph
0
140

Other Decks in Technology

See All in Technology
あるけみー式LTスライド作成術
Avatar for Ryotaro Harada alchemy1115
1
160
OpenTelemetry eBPF Instrumentationの舞台裏 / Behind the Scenes of OpenTelemetry eBPF Instrumentation
Avatar for ymotongpoo ymotongpoo
3
970
目の前の楽しいが人生を変える - コミュニティの螺旋の歩き方と楽しむコツ / change your life
Avatar for soudai sone soudai
PRO
4
370
【視聴者参加型！】AWSセキュリティアンチパターンクイズ
Avatar for Shun Yoshie syoshie
1
490
Where Is JetBrains AI Heading- — Central CLI, Air Alpha, and the Agentic Development Stack
Avatar for Daisuke Masuda x5gtrn
PRO
0
150
Microsoft 365 Copilot chat -tekoälypalvelun tietosuojaongelmat
Avatar for Harto Pönkä hponka
0
640
ペアプロの価値はコードを書くことだけじゃない
Avatar for コドモン開発チーム codmoninc
PRO
0
160
プロダクト思考 × 基盤思考を AIで実現する Compound Engineering
Avatar for Watanabe Takeshi(Buzz) tkc66buzz
1
310
Driving AI Adoption Using In-House GPUs to Serve Qwen
Avatar for po3rin po3rin
2
480
OpenTelemetryのメトリクスをCloudWatchに送ってPromQLで見てみた
Avatar for Itaru Ota ota1022
0
120
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
Avatar for yuki honyanya
1
330
「図書館」という名前のままでいいのか -Code4Lib JAPANカンファレンス2026 アンカンファレンス報告- / Code4Lib JAPAN Conference 2026: Unconference Report
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
160

Featured

See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
440
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
510
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
520
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
690
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
380
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
460

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/