Progressive Web App 之是否是我的未來

簡報於前端魔法師六月份小聚

====
簡介
====

一開始聽到 Progressive Web App 就想到以下幾個名詞：

1. Multi-page App
2. Single Page App
3. Universal Web App

那 PWA 跟它們有關係嗎？

=======
Takeaway
=======

Progressive Web App 就是想像你的 Web App

1. 可以直接被使用者下載到桌面上使用
2. 被打開時可以有 Splash Screen
3. 完全看不到 URL bar，操作起來像 Native App
4. 可以讓使用者 offline 使用
5. 可以擁有跟 Native App 一樣的推播功能
6. 有效率更高的使用者體驗

最後不管未來是什麼，
目的就是讓你的使用者有個更美好的 Web 體驗呀！

=======
參考連結
=======

Frontend Engineering－認識 Single Page Application（SPA）

http://www.jollen.org/blog/2014/09/single-page-application.html

Universal JavaScript

https://medium.com/@mjackson/universal-javascript-4761051b7ae9

Isomorphic JavaScript: The Future of Web Apps
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

Progressive Web App Demos
http://airhorner.com
https://github.com/andreasbovens/simple-demo
https://weather-pwa-sample.firebaseapp.com/step-08

Google Web Fundamentals

https://developers.google.com/web/fundamentals/

Progressive Web Apps across all frameworks - Google I/O 2016

Video: https://www.youtube.com/watch?v=srdKq0DckXQ

Slide: https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks



Progressive Web Apps (Chrome Dev Summit 2015)

https://www.youtube.com/watch?v=MyQ8mtR9WxI

=======
工商連結
=======

React Quick Tutorial
https://github.com/shiningjason1989/react-quick-tutorial

「24 小時，快速入門 React」線上課程
https://4cats.teachable.com/courses/24hrs-react-101

Softnshare 社群
https://softnshare.wordpress.com/slack/


前端魔法師社團，play with us ：）
https://www.facebook.com/groups/1635233983410054

Transcript

1. Progressive Web App ⛓
   僽や僽䧮涸劢⢵
2. ⯓闍穡锸
3. 穡锸
    䧮ⶍ䷬
   1SPHSFTTJWF
   8FC
   "QQ
4. 穡锸
    ⡹➛㣔♶剚聃ⵌ㥶⡦㻜⡲
 1SPHSFTTJWF
   8FC
   "QQ
   
5. 穡锸
    䧮➛㣔Ⱖ㻜僽⢵
 鼝锞⡹⿮莅劢⢵涸
6. 穡锸
    ꧪ搭䧮♶濼麥
 1SPHSFTTJWF
   8FC
   "QQ
   僽♶僽劢⢵
   9%%
7. Ꟛ㨥㓫
8. ♧Ꟛ㨥聃ⵌ
   1SPHSFTTJWF
   8FC
   "QQ
   僽㖈⿡䎃
9. 鑨铞➛䎃涸
   (PPHMF
   *0
 ⡹剤聃㌨
10. ➛䎃ꤑ✫
    73"*
 㖈
    8FC
    酭㽠僽㕠粕
    18"
    ✫
    
    "OHVMBS
    
11. Google Trend
12. 䧮♧Ꟛ㨥聃ⵌ
    18"
    㽠䟝ⵌ⟃♴䎙⦐そ鑂
13. 4JOHMF
    1BHF
    "QQ
    6OJWFSTBM
    8FC
    "QQ
14. 齡
    18"
    騈㸐⦛剤ꡠ⤚㌨
15. Single Page App
16. 闍㸐⟃⵹⯓㔐彸ⵌ⫄窡涸
17. Multi-page App Single Page App
18. 㕮晚⢵彂https://blog.4psa.com/an-intro-into-single-page-applications-spa/
19. Single Page App Multi-page App
20. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
21. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
22. 㕮晚⢵彂https://blog.4psa.com/an-intro-into-single-page-applications-spa/
23. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
24. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
    ˖ $MJFOUTJEF
    63-
    3PVUJOH
25. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
    ˖ $MJFOUTJEF
    63-
    3PVUJOH
    ˖ "QQMJDBUJPO
    -PHJD
    
    %BUB
    .PEFM
26. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
    ˖ $MJFOUTJEF
    63-
    3PVUJOH
    ˖ "QQMJDBUJPO
    -PHJD
    
    %BUB
    .PEFM
    ˖ 7BMJEBUJPO
    -PHJD
    
    .PEFM
    4UBUF
27. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
    ˖ $MJFOUTJEF
    63-
    3PVUJOH
    ˖ "QQMJDBUJPO
    -PHJD
    
    %BUB
    .PEFM
    ˖ 7BMJEBUJPO
    -PHJD
    
    .PEFM
    4UBUF
    ˖ 3&45
    "1*
    FUD
28. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
    ˖ $MJFOUTJEF
    63-
    3PVUJOH
    ˖ "QQMJDBUJPO
    -PHJD
    
    %BUB
    .PEFM
    ˖ 7BMJEBUJPO
    -PHJD
    
    .PEFM
    4UBUF
    ˖ 3&45
    "1*
    FUD
    ˖ ⮛럊痧♧儘꟦♴鯺㸤侮⦐墂呪㼩懳錒罏⢵铞乽⡲刿⫹
    %FTLUPQ
    "QQ
29. ˖ 捀鍑对չ1PPS
    JOUFSBDUJWJUZ
    BOE
    SFTQPOTJWFOFTTպ涸㉏겗
    ˖ ㉬涮倴
    "+"9䲿⣘
    6TFS
    刿⨋ぢ
    %FTLUPQ
    BQQMJDBUJPO
    涸⢪欽竤뀿
    ˖ 㻜⡲倰岁
    ˖ $MJFOUTJEF
    63-
    3PVUJOH
    ˖ "QQMJDBUJPO
    -PHJD
    
    %BUB
    .PEFM
    ˖ 7BMJEBUJPO
    -PHJD
    
    .PEFM
    4UBUF
    ˖ 3&45
    "1*
    FUD
    ˖ ⮛럊痧♧儘꟦♴鯺㸤侮⦐墂呪㼩懳錒罏⢵铞乽⡲刿⫹
    %FTLUPQ
    "QQ
    ˖ 緄럊ꨈ⟃
    4&0
    䵃㼦䒸乿剓⢕⻋
30. ⿮罌鸮穡
 'SPOUFOE
    &OHJOFFSJOH钢陏
    4JOHMF
    1BHF
    "QQMJDBUJPO41"
 http://www.jollen.org/blog/2014/09/single-page-application.html
31. Universal Web App Isomorphic Web App Single Page App Multi-page App
32. A word that describes the same code, but running in a different environment.
33. 㕮晚⢵彂https://medium.com/@mjackson/universal-javascript-4761051b7ae9
34. 㕮晚⢵彂https://medium.com/@mjackson/universal-javascript-4761051b7ae9
35. 㕮晚⢵彂https://codepicnic.com/posts/universal-javascript-and-the-future-of-the-single-page-apps-084b6fbb10729ed4da8c3d3f5a3ae7c9
36. ⿮罌鸮穡
 Universal JavaScript
 https://medium.com/@mjackson/universal-javascript-4761051b7ae9 Isomorphic JavaScript: The Future of Web Apps http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
37. Progressive Web App Universal Web App Single Page App Multi-page App
38. 㛇劥♳㸐㖈闍
39. ˖ 䟝⫹⡹涸
    8FC
    "QQ
    〳⟃湬䱺鄄⢪欽罏♴鯺ⵌ呲꬗♳⢪欽
40. 㕮晚⢵彂https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
41. /BUJWF
    "QQ
    㥶卓扫
    
    ⦐⢪欽罏涸鑨
 鸒䌢〫剚剤
    
    涸➃♴鯺 㕮晚⢵彂https://www.youtube.com/watch?v=MyQ8mtR9WxI
42. ˖ 䟝⫹⡹涸
    8FC
    "QQ
    〳⟃湬䱺鄄⢪欽罏♴鯺ⵌ呲꬗♳⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鄄䩧Ꟛ儘鼩〳⟃剤
    4QMBTI
    4DSFFO
 罜㸤溏♶ⵌ
    63-
    CBS
    䧴懳錒㐼湱ꡠ涸⸆腋
43. 㕮晚⢵彂https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
44. ˖ 䟝⫹⡹涸
    8FC
    "QQ
    〳⟃湬䱺鄄⢪欽罏♴鯺ⵌ呲꬗♳⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鄄䩧Ꟛ儘鼩〳⟃剤
    4QMBTI
    4DSFFO
 罜㸤溏♶ⵌ
    63-
    CBS
    䧴懳錒㐼湱ꡠ涸⸆腋
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鼩〳⟃雊⢪欽罏
    PJOF
    ⢪欽
45. 㕮晚⢵彂https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
46. ˖ 䟝⫹⡹涸
    8FC
    "QQ
    〳⟃湬䱺鄄⢪欽罏♴鯺ⵌ呲꬗♳⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鄄䩧Ꟛ儘鼩〳⟃剤
    4QMBTI
    4DSFFO
 罜㸤溏♶ⵌ
    63-
    CBS
    䧴懳錒㐼湱ꡠ涸⸆腋
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鼩〳⟃雊⢪欽罏
    PJOF
    ⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    ⛳〳⟃乩剤騈
    /BUJWF
    "QQ
    ♧垺涸䲀久⸆腋
47. ˖ 䟝⫹⡹涸
    8FC
    "QQ
    〳⟃湬䱺鄄⢪欽罏♴鯺ⵌ呲꬗♳⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鄄䩧Ꟛ儘鼩〳⟃剤
    4QMBTI
    4DSFFO
 罜㸤溏♶ⵌ
    63-
    CBS
    䧴懳錒㐼湱ꡠ涸⸆腋
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鼩〳⟃雊⢪欽罏
    PJOF
    ⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    ⛳〳⟃乩剤騈
    /BUJWF
    "QQ
    ♧垺涸䲀久⸆腋
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    剤刿莞黠涸⢪欽罏넓뀿
48. 㕮晚⢵彂https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
49. 㕮晚⢵彂https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
50. 㕮晚⢵彂https://speakerdeck.com/addyosmani/progressive-web-apps-across-all-frameworks
51. 䨾⟃
    18"
    㽠僽
52. ˖ 䟝⫹⡹涸
    8FC
    "QQ
    〳⟃湬䱺鄄⢪欽罏♴鯺ⵌ呲꬗♳⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鄄䩧Ꟛ儘鼩〳⟃剤
    4QMBTI
    4DSFFO
 罜㸤溏♶ⵌ
    63-
    CBS
    䧴懳錒㐼湱ꡠ涸⸆腋
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    鼩〳⟃雊⢪欽罏
    PJOF
    ⢪欽
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    ⛳〳⟃乩剤騈
    /BUJWF
    "QQ
    ♧垺涸䲀久⸆腋
    ˖ 䟝⫹⡹涸
    8FC
    "QQ
    剤刿莞黠涸⢪欽罏넓뀿
53. ꣳⵖ
56. 18"
    %&.0
57. - http://airhorner.com - https://github.com/andreasbovens/simple-demo - https://weather-pwa-sample.firebaseapp.com/step-08
58. 籏穡
59. ♶盘劢⢵僽➊랃
    㽠僽雊⡹涸⢪欽罏剤⦐刿繡㥪涸
    8FC
    넓뀿
60. 䨾⟃ㄎ䥰穡锸
    㥪㣼㖒㉏♧♴⡹⦛㼩
    18"
    剤莇馱㌨
61. 㥶卓剤锞荛
    Google Web Fundamentals
 https://developers.google.com/web/fundamentals/
62. 䧴僽
 Progressive Web Apps across all frameworks - Google I/O 2016
 https://www.youtube.com/watch?v=srdKq0DckXQ
 https://speakerdeck.com/addyosmani/progressive-web- apps-across-all-frameworks
 
 Progressive Web Apps (Chrome Dev Summit 2015)
 https://www.youtube.com/watch?v=MyQ8mtR9WxI
63. 䊨㉂儘꟦
64. 㥶卓⡹㼩
    3FBDU
    剤莇馱  3FBDU
    2VJDL
    5VUPSJBM
    俒㶶來勞
 https://github.com/shiningjason1989/react-quick-tutorial
     
    㼭儘䘰鸠ⰅꟌ
    3FBDU
    箁♳铭玑갸飑⚥
 https://4cats.teachable.com/courses/24hrs-react-101
     姹鵔⡹鷴麕♴꬗倰䒭莅䧮耢窄
 ⸈Ⰵ
    TPGUOTIBSF
    爢纈猙鎝
    TIJOJOHKBTPO
 https://softnshare.wordpress.com/slack/
 
 &NBJM
 shiningjason1989@gmail.com