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

高速傳愛～三小時進化 PWA


Avatar for chph chph
January 06, 2017
Technology
0
290

高速傳愛～三小時進化 PWA


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

Avatar for chph

chph

January 06, 2017
Tweet

More Decks by chph

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

Other Decks in Technology

See All in Technology
AIエージェントの活用に重要な「MCP （Model Context Protocol）」とは何か
Avatar for Masaya Mori (森正弥) / CAIO (Chief AI Officer) masayamoriofficial
0
270
異業種出身エンジニアが気づいた、転向して十数年経っても変わらない自分の武器とは
Avatar for macneko-ayu macnekoayu
0
270
Kiroと学ぶコンテキストエンジニアリング
Avatar for Oikon oikon48
6
8k
モバイルアプリ研修
Avatar for Recruit recruitengineers
PRO
5
1.7k
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
Avatar for わだよし yo41sawada
0
190
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
Avatar for gowhich501 gowhich501
1
100
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
Avatar for shibayu36 shibayu36
0
180
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
Avatar for Rakus_Dev rakus_dev
0
270
実運用で考える PGO
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
130
生成AI時代のデータ基盤
Avatar for shibuiwilliam shibuiwilliam
4
2.8k
Agile PBL at New Grads Trainings
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
180
JuniorからSeniorまで: DevOpsエンジニアの成長ロードマップ
Avatar for yuriemori yuriemori
2
360

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.4k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
87
4.8k

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/