PWA beyond theory - How to create your progressive web app

Presented on DevFest London 2018.

Transcript

1. PWA BEYOND THEORY How to create your progressive web app
3. 13% 87% Mobile web Apps Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
4. 80% of time is spent on 3 apps Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
5. ZERO number of apps the average user installs per month Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
6. New web features • Push Messages • Offline storage • Audio & Video Capture • Recording Media • Geolocation • Web Bluetooth API • More: https://whatwebcando.today
8. WHAT IS A PWA? it's a website that behaves like an app
9. WHAT IS A PWA? new level of caring about the quality of your end-to-end user experience
10. Starbucks https://app.starbucks.com
11. The Washington Post https://www.washingtonpost.com/pwa
12. Twitter https://mobile.twitter.com
14. PWA aspects • Site works cross-browser • Pages are responsive on tablets & mobile devices • First load fast even on 3G • All app URLs load while offline • Metadata provided for Add to Home screen • Site is served over HTTPS
15. ✓ site works cross-browser
16. ✓ responsive ✓ first load fast
17. ✓ all app URLs load while offline
18. SERVICE WORKER advanced offline experiences
19. Web server
20. Service worker Client side proxy (wrote in JavaScript) Cache Web server
21. SERVICE WORKER it's for the SECOND loading
22. implementing a Service Worker
24. registering a Service Worker
26. adding install event
28. preload resources
30. activate event
32. almost finishing
34. controlling the loading
38. cache strategy network, otherwise use the cache
39. the offline cookbook by Jake Archibald https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
40. ✓ add to home screen
41. <link rel="manifest" href="/manifest.json"> { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
42. manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
43. manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
44. manifest.json { "name": "The Washington Post", "short_name": "Wash Post", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
45. manifest.json { "name": "Currency Converter", "short_name": "CConverter", "icons": [{ "src": "icon-48x48.png", "sizes": "48x48", "type": "image/png" }, {...}], "start_url": "/index.html", "display": "standalone", "orientation": "portrait", "background_color": "#06f8c5", "theme_color": "#06f8c5" }
46. ✓ safe
47. keeping users safe is hugely important • Reliability: Is this the site that the user expects? • Integrity: Has anyone changed this content? • Privacy: Can anyone monitor my navigation?
50. Let’s Encrypt is a trademark of the Internet Security Research Group.
51. that's all :D
52. last considerations • Storage is not required • Easy to share (conversion flow) • Always updated • Lower costs compared to native app development.
53. Lighthouse
54. use your creativity • https://developers.google.com/web/progressive-web-apps/checklist • https://whatwebcando.today
55. try it: http://bit.ly/pwacconverter
56. the code is available on github: https://github.com/amandavilela/currencyconverter
57. Obrigada! Amanda Vilela amandavilela.com