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
110
DevOpsDays Taipei 2017 敏捷思維分享
Avatar for chph chph
0
120
在 Google Cloud Platform 架設你的網站伺服器並撰寫 Node.js 應用程式
Avatar for chph chph
0
730
Intro to Progressive Web Apps
Avatar for chph chph
1
80
淺談 Gzip
Avatar for chph chph
0
150
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
Snowflake Horizon Catalog と Apache Iceberg で作る オープンなデータ基盤
Avatar for キタガワ kitagawaz
0
250
手を動かして実感する、Kiro が変える開発体験
Avatar for Riku INADA inariku
0
400
音声コミュニティを守るAI監視基盤_ 90%以上の入力削減を支えたServerless設計と運用判断
Avatar for 岡修平 shuheioka123
0
110
AIに書かせて、プラットフォームで縛る ― EKSプラットフォームで実践した責任境界と権限設計
Avatar for elmo elmodev09
0
890
ADKで始める業務改善 - AIエージェント開発時の考えと設計
Avatar for Kazuki Hara harappa80
2
300
CI/CDではもう遅い - 人とAIが迂回しないDevSecOps Verify基盤の再設計 -
Avatar for KintoTech_Dev kintotechdev
1
360
サーバーレスをどこまで使う？ WebRTC対戦ゲームで選んだVPSとの共存設計
Avatar for kaidouji85 kaidouji85
0
470
「どのログを見ればいい？」 から始めた サーバーレス障害解析
Avatar for y_waka1 y_waka1
1
160
AI coding 整合正規方法
Avatar for philipz philipz
0
550
人にやさしく、AIにやさしく、書き手を選ばないIaCのガードレール再考 / Rethinking IaC Guardrails for Humans and AI Alike
Avatar for kohbis kohbis
5
1.5k
HacobuにおけるFDEとは/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
1
140
AI臭い文章とは何なのか
Avatar for Kiminori Yokoi nasuvitz
18
21k

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.6k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
530
HDC tutorial
Avatar for Michiel Stock michielstock
2
920
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
370
The Language of Interfaces
Avatar for Des Traynor destraynor
162
27k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
840
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.5k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
880
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
41k

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/