Let's play with PWA

Transcript

1. Let's play with PWA Tech Do #5 k-kuwahara @kuwahara_jsri clown0082
2. Basic Information const my_info = { Name: ‘܂ݪ੟ਔ’, Home: ‘૔ෑ, ޿ౡ’, Interest: ‘όεέ, কع, ೔ຊञ’, Workplace: ‘Yumemi, Inc.’, Skillset: ‘JS, Node.js, PHP, Ruby’ }
3. Communities collaborator translator staff staff
4. github.com/k-kuwahara github.com/k-kuwahara
5. Let’s start the today’s talk of PWA !!
6. Table of Contents • Lightly looking back on history • What is PWA? • Let’s play with PWA
7. Lightly looking back on history
8. 1991.8.6 HTML1 was born
9. image by: http://virtuallyfun.com/wordpress/category/win32s/
10. Primary Browser War After the release of IE, it is open war. ɹɹˣ As a result, IE won.
11. In 2005, “Ajax” appeared. The word “web 2.0” is prevalent.
12. Secondary Browser War Each company developed and added its own function to their browser. ɹɹˣ As a result, Chrome won.
13. mobile phones around this time ...
14. The goalden age of feature phone • Low performance • Screen is small • Physical button • Less information • Not a web
15. 2007.1.9 iPhone release !!
16. To smart phone heyday • Performance improvement • Touch panel • Operability is much improved • Install apps freely image by: https://ja.wikipedia.org/wiki/IPhone
18. Responsive
19. The web became easier to see. But, still web first…
20. >
21. Rushed into the era of mobile first
22. Native Application ↓ Hybrid Application ↓ HTML5 Application
23. Mobile first is good, but UX has room for improvement.
24. ⚡AMP (Accelerated Mobile Pages) PWA (Progressive Web Apps) For more mobile first and UX
25. What is PWA?
26. –Pete LePage “Progressive Web Apps are experiences that combine the best of the web and the best of apps.”
27. + +
28. • Progressive • Responsive • Connectivity independent • App-like • Fresh • Safe • Discoverable • Re-engageable • Installable • Linkable Specifications
29. PWA example APP
30. PWA example
31. Let’s play with PWA
32. ⚠PWA operating environment⚠ • Android: Google Chrome ≧ 47 • iOS: Safari ≧ 11.3 • PC: Google Chrome ≧ 67
33. Using Desktop Chrome 67 Access to: chrome://flags • App Banners: Enabled • Enable PWA full code cache: Enabled • Desktop PWAs: Enabled • Desktop PWAs Link Capturing: Enabled
34. Sample Sites • Uber - https://m.uber.com/ • Twitter - https://mobile.twitter.com/home • Trivago - https://www.trivago.jp/ • λ΢ϯϫʔΫ - https://townwork.net/ • ೔ຊܦࡁ৽ฉ(PWA൛) - https://r.nikkei.com/ • Google Photos - https://photos.google.com
35. DEMO
36. Why do we need to HTTS?
37. Why HTTPS ? • A secure web is here to stay https://blog.chromium.org/2018/02/a-secure-web-is- here-to-stay.html • Prefer Secure Origins For Powerful New Features http://www.chromium.org/Home/chromium-security/ prefer-secure-origins-for-powerful-new-features • HTTPS required https://developers.google.com/web/fundamentals/ primers/service-workers/#https
38. Served over HTTPS
39. Uninstall PWAs Access to: chrome://apps
40. Using Lighthouse (implemented in chrome) How to make it PWA?
41. See “Progressive Web App Checklist”. https://developers.google.com/web/progressive-web-apps/checklist How to make it PWA?
42. How to make it PWA? Check the implementation status of the function By Can I use
43. Let’s start PWA !!
44. References • ͸͡ΊͯͷϓϩάϨογϒ΢ΣϒΞϓϦ https://developers.google.com/web/fundamentals/codelabs/your-first- pwapp/?hl=ja • Your First Progressive Web App https://codelabs.developers.google.com/codelabs/your-first-pwapp/ index.html?index=..%2F..%2Findex#0 • What is the good framework to build progressive web app? https://www.quora.com/What-is-the-good-framework-to-build- progressive-web-app
45. Thanks k-kuwahara @kuwahara_jsri clown0082