Intro to Progressive Web Apps

Transcript

1. Intro to Progressive Web Apps 研發中心前端組 Afu 2017.08.18 PIXNET 會議室
2. Outline • 行動網頁現況概要 • PWA 定義與關鍵要素 • PWA 案例導覽 • PWA 支援度 • PIXNET 可行性探討 • 結語回顧
3. Build the Next Generation Mobile Web
4. source: Digital in 2017 Global Overview - we are social
5. 使用者投入大部分時間在原生 App .vs. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 13% 87% Mobile web Apps
6. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 80% OF TIME SPENT IS IN USERS’ TOP 3 APPS Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
7. Mobile web reach (2015) Broad Reach, Low Engagement Top 1000 mobile apps .vs. top 1000 mobile web properties comScore Mobile Metrix, U.S., Age 18+, June 2015 Mobile web Apps Monthly UNIQUE visitors (MM) 3.3 8.9 Average minutes per visitor 201.8 10.9
8. Mobile web reach (2016) Broad Reach, Low Engagement Top 1000 mobile apps .vs. top 1000 mobile web properties comScore Mobile Metrix, U.S., Age 18+, June 2016 Mobile web Apps Monthly UNIQUE visitors (MM) 4.0 11.4 Average minutes per visitor 188.6 9.3
9. Capability Web
10. Capability Reach App Web * Web
11. Capability Reach App Web Web PWA
12. PWA 是什麼？
13. 「媲美原生應用的 Web App」 By google
15. Reliable 具備離線瀏覽體驗 能在不穩定的網路環境運作 *技術：使用 Service Worker
16. Reliable 可靠性代表你永遠 在行動網頁 看不到這隻恐龍
17. Service Worker 是可靠性與效能的關鍵 Web server Service worker Client side proxy written in JavaScript Cache
18. Fast 53% 的行動網頁使用者 在頁面載入時超過 3 秒 就會離開 每 2 位使用者中有 1 人 希望網頁 2 秒內載入完成 Source: DoubleClick, Google, Sep 2016
19. 能快就快，降低跳離率 Source: SOASTA, 2015 2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 180,000 140,000 100,000 60,000 0 20,000 58 45 32 19 0 6 Sessions Load time (in seconds) Bounce rate (%) Sessions Bounce rate 13% bounce rate 20% bounce rate 58% bounce rate
20. Engaging • 佔領使用者的手機 (隨手可得) • 安裝到手機桌面 • 無網址列的全螢幕體驗 • 推送通知
21. PWA Case Studies
22. Wego 機票酒店搜尋訂購
23. Twitter Lite demo Source: Owen Chromell-Moore, Google, https://twitter.com/owencm
27. >1M rides daily 110 cities 600K drivers India’s leading ride hailing service
30. 2x more page views 74% increase in time spent 82% more conversions on iOS
31. Alibaba.com 76% Higher conversions across browsers 14% more More monthly activer users on iOS, 30% on Android 4X higher Interaction rate from Add to Homesrceen
34. 更多企業提交給 Google 的 Case Studies https://developers.google.com/web/showcase/
35. PWA.rocks https://pwa.rocks
36. 瀏覽器對 PWA 的支援度
38. Service Workers 支援度
39. Safari 起步走 WebKit 是 Safari 的瀏覽器核心 八月宣布開始開發 Service Worker Alex Russell 是 Google Chrome 團隊的工程師兼 PWA 傳教士
40. 測試你的手機有無支援 PWA https://ispwaready.toxicjohann.com/auto/
41. PIXNET 產品可行性探討
42. PIXstyleMe / 開發中 • 瀏覽器自動詢問是否安裝到桌面
43. PIXstyleMe / 開發中 • 瀏覽器自動詢問是否安裝到桌面
44. PIXstyleMe / 開發中 • 瀏覽器自動詢問是否安裝到桌面 • 從桌面點選圖示啟動網頁 ◦ 過場頁面
45. PIXstyleMe / 開發中 • 瀏覽器自動詢問是否安裝到桌面 • 從桌面點選圖示啟動網頁 ◦ 過場頁面 ◦ 載入首頁 ▪ 無網址列的全螢幕體驗
46. PIXstyleMe / 開發中 • 瀏覽器自動詢問是否安裝到桌面 • 從桌面點選圖示啟動網頁 ◦ 過場頁面 ◦ 載入首頁 ▪ 無網址列的全螢幕體驗 • 關閉行動網路，重複步驟二 ◦ 正常載入首頁
47. PIXNET 產品可行性探討 • 開發中 ◦ PIXstyleMe ◦ 預覽站：https://styleme2.pixnet.net • 適合且可以作的，需要時間與人力 ◦ 行動版大首頁 ◦ Stream 主題頁 ◦ PIXgoods • 適合且可以作但是卡在歷史共業，需要決策的 ◦ 痞客邦部落格前台文章頁
48. 結語回顧
49. 結語回顧 • PWA 是漸進增強的概念 ◦ 電扶梯的例子 ▪ 遇到停電時仍然可以步行移動，核心功能不受限 ▪ 有電時移動體驗更佳 ◦ 電視機的例子 (補) ▪ 不能要求黑白電視機播放節目還得是彩色的 • 支援 PWA 的瀏覽器就能享受此功能，不支援也不會讓網頁壞掉 ◦ Safari 已經開始開發，想優先體驗就改用 Chrome 囉！
50. References: 1. Digital in 2017 Global Overview https://www.slideshare.net/wearesocialsg/digital-in-2017-global-overview, We are social, Jan 2017 2. The need for mobile speed: How mobile latency impacts publisher revenue, https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/, DoubleClick, Sep 2016 3. Apple Starts Work on Progressive Web Apps, https://cloudfour.com/thinks/apple-starts-work-on-progressive-web-apps/, Aug, 2017 4. PWA @ Google Developers, https://developers.google.com/web/progressive-web-apps/ 5. Why you should build a progressive web app now, https://speakerdeck.com/grigs/why-you-should-build-a-progressive-web-app-now, 2016 6. Building Modern Progressive Web Apps, https://speakerdeck.com/ireade/building-modern-progressive-web-apps, 2016 7. Progressive Web Apps line between web and native apps become thinner, https://speakerdeck.com/ozasadnyy/progressive-web-apps-line-between-web-and-native-apps-become-thinner 8. Production-ready Progressive Web Apps, https://speakerdeck.com/clayliao/production-ready-progressive-web-apps, 2017
51. 9. Progressive Web Apps: The new normal, https://speakerdeck.com/addyosmani/progressive-web-apps-the-new-normal 10. Progressive Web App - Google IO Extended Alexandria 2017, https://speakerdeck.com/naderkhaledmousa/progressive-web-app-google-io-extended-alexandria-2017 References:
52. 感謝聆聽