Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
高速傳愛~三小時進化 PWA
Search
chph
January 06, 2017
Technology
0
290
高速傳愛~三小時進化 PWA
高速傳愛 為台灣而教助學計畫 - 進化 PWA
chph
January 06, 2017
Tweet
Share
More Decks by chph
See All by chph
Chrome Dev Tools 基礎技巧
chph
0
87
DevOpsDays Taipei 2017 敏捷思維分享
chph
0
100
在 Google Cloud Platform 架設你的網站伺服器並撰寫 Node.js 應用程式
chph
0
680
Intro to Progressive Web Apps
chph
1
62
淺談 Gzip
chph
0
120
Install WordPress on Linode
chph
0
160
Introduction Infrastructure - Linode 入門
chph
0
220
Optimize JavaScript execution and parse time using optimize-js
chph
0
150
Modern Web 2016 議程分享: 網站自動化測試 - 以 PIXNET 搜尋 & 美妝口碑大賞為例
chph
0
110
Other Decks in Technology
See All in Technology
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
130
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
Operating Operator
shhnjk
1
590
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
Lazy application authentication with Tailscale
bluehatbrit
0
210
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
9
4.3k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Practical Orchestrator
shlominoach
189
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Statistics for Hackers
jakevdp
799
220k
Embracing the Ebb and Flow
colly
86
4.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Speed Design
sergeychernyshev
32
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Fireside Chat
paigeccino
37
3.5k
Transcript
⾼速傳愛~三⼩時進化 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
Offline load: Verify
Offline load: Verify
Offline load: Fix ! ! ! ! IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDF XPSLFST
ᅷยိݯɿIUUQTXXXJHWJUBDPNDBQBCJMJUZSFQPSUJOHXJUITFSWJDFXPSLFS
Offline load: Fix ! ! ! ! ᅷยိݯɿIUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTHFUUJOHTUBSUFEQSJNFSTTFSWJDFXPSLFST
sw.js 怎麼來? • ⽅案⼀:⾃⼰寫 • ⽅案⼆:⾃動產⽣
Why & How ? • ⽅案⼆ - ⾃動產⽣ • 懶
• Service Worker Precache (by Chrome team) • 適合靜態網⾴,搭配 cache first 策略產出 sw.js IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF
sw-precache • $ npm install --save-dev sw-precache IUUQTHJUIVCDPN(PPHMF$ISPNFTXQSFDBDIF
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'
產出 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.
初版 sw.js 遇到的問題 • 僅靜態資源 (css/js/圖) 可離線存取 • ⾸⾴ (/)
無法離線存取 • 想更改產出的 server-worker.js 檔名 • 記得寫⼊ .gitignore,⾃動產出的檔案不進版本控制
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' };
看看成果吧!
None
可以繼續優化的部份 • 外部 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 file to your project. IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTFOHBHFBOESFUBJOXFCBQQNBOJGFTU
Manifest.json 怎麼做? • ⽅案⼀:⾃⼰寫 • ⽅案⼆:⾃動產⽣ • https://brucelawson.github.io/manifest/ • https://app-manifest.firebaseapp.com/
Manifest.json
看看成果吧!
Add to Home screen • 只要 icon 與捷徑標題 相匹配表⽰正確讀取
manifest.json UIFNFDPMPS
Add to Home screen
啟動時的過場⾴
Benchmark overview 看看效能如何!
None
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/