How not to mess up your first PWA

Transcript

1. Dmitri Pisarev, Neos Conference 2020 How not to Mess up Your First PWA Wish I knew this stuff earlier…
2. - Christian believer ❤ - Into web dev since 2005 - Volunteer @ SFI.ru - Part-time @ DEED - team member Dmitri Pisarev Me, COVID-19 edition @dimaip dimaip.github.io
3. https://c.psmb.ru
5. http://dimaip.github.io/2015/11/15/react-neos/ https://github.com/bwaidelich/Wwwision.Neos.GraphQL
6. Some research
10. Why Native Apps are so engaging? + offline, performance, reliability + push notifications + home screen icon, OS integration + hardware access
11. Native Apps + Web React Native Flutter, Xamarin Cordova/Capacitor - 3x effort - Web is an afterthought - Yoga !== CSS - No JS no Love - WebView << Safari/Chrome - App Store review?! Options?
12. How about PWAs?
13. What are PWAs? + Offline (ServiceWorker) + push notifications (WebPush) + home screen icon (manifest.json) + other cool web APIs
14. Useful Web APIs + WebShare + WebAuthn + RequestPayment + WebRTC + WebPush
15. iOS + SW support since iOS 11.3 - No App Store - No push notifications - No install prompt - No SW in WKWebView Support Android + PWA paradise! + Submit to Play Market as Trusted Web Activity
16. Mobile Integration
17. Desktop Integration
18. https://love2dev.com/pwa/
19. Let’s write some code!
20. Challenge 1. ServiceWorkers are rocket science
21. manifest.json index.html
22. Let’s go offline some.js sw.js
23. We are stuck! - Reload? - Restart device? - Delete service worker? - Replace with empty service worker? ⏳ - HTTP header Clear-Site-Data: "*"
24. Caching Strategies - Stale-While-Revalidate - Cache First (Cache Falling Back to Network) - Network First (Network Falling Back to Cache) - Network Only Hand-rolling is hard and dangerous!
25. Workbox to mask some complexity Warning! Workbox is a leaky abstraction! sw.js
26. Challenge 2. Getting PWA to self-update
27. Service Worker Lifecycle
28. sw.js
29. https://redfin.engineering/service-workers-break-the-browsers-refresh-button-by-default-here-s-why-56f9417694 Must read:
30. Don’t wait for reload …on iOS 12 it may not happen soon
31. Challenge 3. Deploying an app with code-splitting
32. Deploying an app with code-splitting
33. Solution 1. Keep previous versions of assets PROS: the most reliable solution CONS: not many platforms support it out of the box
34. Solution 2. Catch exceptions and force-reload SW PROS: works with all deployment platforms CONS: horrible UX for stateful apps
35. Solution 3. Pre-cache all JS bundles with a service worker PROS: prefetching makes sense in many cases anyways CONS: does not conserve bandwidth
36. Make it look native
37. Viewport, Icons, loading screen
38. CSS to disable some browser effects Use with caution and keep a11y in mind!
39. Meet platform expectations!
40. Ionic Components
41. Dark Mode
42. Useful tools
44. pwabuilder.com
46. 1. Choose the right platform 2. Make sure you understand Service Workers well 3. Pretend to be native Too long; Didn’t listen
47. It’s open source! ❤ github.com/dimaip/calendar
48. @dimaip dimaip.github.io dev.to/dimaip Say Hi!