PWA: Supercharging your webapp

You've probably heard about the revolution in web development: Progressive Web Apps. In this talk, Koen will introduce you to the wonderful world of PWAs and what they're all about. In a world of connectedness, the offline-first approach is often neglected.

Leveraging the power of service workers, it is now easier than ever to create awesome near native applications using the technologies you're already acquainted with!

Speaker: While making the web a better place at SiteOptimo, Koen likes playing around with interesting new technologies to see how they can improve both the developer's and user's experience. In his spare time, he fails graciously at trying to balance his various interests and hobbies.

Links
-------
* evolutionoftheweb.com: http://www.evolutionoftheweb.com/
* Jake Archibald: https://jakearchibald.com
* whatwebcando.today: https://whatwebcando.today/
* Offline Cookbook: https://jakearchibald.com/2014/offline-cookbook
* Serviceworke.rs: https://serviceworke.rs
* developers.google.com: https://developers.google.com/web/progressive-web-apps/
* developer.mozilla.org: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
* jakearchibald.github.io/isserviceworkerready: https://jakearchibald.github.io/isserviceworkerready

Transcript

1. Supercharging your web app By Koen Van den Wijngaert
2. LIE-FI
3. Progressive Web Apps
4. Progressive Web Apps ✓ What are they? ✓ Why should we use them? ✓ What can they do? ✓ Who uses them? ✓ How do I start?
5. What are they?
6. Progressive web apps use modern web APIs along with the traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps.
7. Where did they come from?
8. The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone. And these apps can integrate perfectly with iPhone services. [...] And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. — Steve Jobs, at the WWDC °11/6/2017
9. Cool, right?!
10. Let me just say it: We want native third party applications on the iPhone, and we plan to have an SDK in developers hands in February. — Also Steve Jobs, 4 months later °17/10/2017
11. evolutionoftheweb.com
12. Why should we use them?
13. The State of Mobile ✓ As of May 2019, 49% of visitors are mobile ✓ Solving the distribution problem ✓ Capability vs. Reach
14. Advantages of PWA vs Website ✓ Reliable performance ✓ Worthy of being on homescreen ✓ Increased engagement ✓ Improved conversions developers.google.com/web/progressive-web-apps/
15. Are we ready now? Yes!
16. Web Share API
17. Web Bluetooth API
18. Web Crypto API
19. Web VR
20. Credential Management
21. Payment Request API
22. Gamepad API
23. Web Components
24. And many more. whatwebcando.today
26. Who uses them? Progressive Web Apps in The Wild…
27. Pokedex.org
28. appsco.pe/toplist
29. RIP
30. offline-dino-game.firebaseapp.com Just kidding!
31. What can they do?
32. Progressive Web App Features DISCOVERABLE SAFE RESPONSIVE RE-ENGAGEABLE PROGRESSIVE NETWORK INDEPENDENT LINKABLE INSTALLABLE
33. Progressive Web Apps need to be… INSTALLABLE
34. manifest.webmanifest INSTALLABLE
35. DISCOVERABLE Progressive Web Apps need to be…
36. DISCOVERABLE PWA Directory Appsco.pe
37. Progressive Web Apps need to be… LINKABLE
38. Progressive Web Apps need to be… SAFE
39. Progressive Web Apps need to be… PROGRESSIVE
40. Progressive Web Apps need to be… RE-ENGAGEABLE
41. Web Push API RE-ENGAGEABLE Server Push service Client
42. Progressive Web Apps need to be… RESPONSIVE
43. Progressive Web Apps need to be… NETWORK INDEPENDENT
44. We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past. The Offline First Approach - offlinefirst.org
45. Enter Service Workers
46. Service Workers NETWORK INDEPENDENT
47. Service Worker Registration NETWORK INDEPENDENT
48. Service Worker Lifecycle NETWORK INDEPENDENT INSTALLED / WAITING ACTIVATING / ACTIVE INSTALLING
49. Lie-Fi? SaaM* To The Rescue! NETWORK INDEPENDENT * Superman as a Man in The Middle
50. Handling requests NETWORK INDEPENDENT
51. Caching strategies NETWORK INDEPENDENT Network or Cache Cache Only Cache and Update Cache, Update and Refresh Two sides of the scale: speed vs freshness
52. Network or Cache NETWORK INDEPENDENT You want to show the most up to date content but it’s preferable to load fast. jakearchibald.com
53. Cache Only NETWORK INDEPENDENT For a given version of your site, you have static content that never changes such as the shell around the content. jakearchibald.com
54. Cache and Update NETWORK INDEPENDENT Send cached version, but update caches for next time (staleWhileRevalidate) jakearchibald.com
55. Advanced usages NETWORK INDEPENDENT Streaming data Web Push API Architectural Patterns Queuing Requests Background Sync
56. How do I start?
57. What do I need? manifest.webmanifest (+link) ✓ Name ✓ Icon ✓ Start URL ✓ Display Mode != browser serviceworker.js ✓ Registered in client JS ✓ Installed & Active ✓ HTTPS ✓ Offline fallback
58. Useful Tools Lighthouse Polymer UpUp
60. Workbox ✓ Precaching ✓ Routing ✓ Caching strategies ✓ Cache expiry ✓ Background Sync ✓ Offline Google Analytics ✓ Response-based caching ✓ Broadcast updates ✓ Streams ✓ Client module
61. In my ecosystem?
62. Resources ✓ Offline Cookbook ✓ Serviceworke.rs ✓ developers.google.com ✓ developer.mozilla.org ✓ jakearchibald.github.io/isserviceworkerready
63. Thanks for listening! @vdwijngaert Koen Van den Wijngaert SiteOptimo.com