PWA: expect the unexpected

Transcript

1. PWA EXPECT THE UNEXPECTED
2. HELLO! I am Artur Kania Tech Lead (web) at Azimo 2
3. PWA - WEB, BUT BETTER... 3 ▪ Fast Respond quickly to user interactions even on flaky networks ▪ Reliable Load instantly even in uncertain network conditions ▪ Engaging Feel like a natural app on the device (?) “With great power comes great responsibility.” (Ben Parker, uncle of Spider-Man)
4. ALL YOU NEED IS... HTTPS MANIFEST SERVICE WORKER 4
5. HTTPS C’mon! We're in the 21st century! 5
6. REQUIREMENTS: ▪ Your website is served via HTTPS ▪ Service worker is served via HTTPS ▪ Manifest is served via HTTPS Avoid mixed content (HTTP and HTTPS used in parallel) 6
7. LOCALHOST is also considered a secure origin 7
8. LET’S DEPLOY 8
9. ALMOST... 9
10. ARCHITECTURE Assets CloudFront/S3 Entry point /{lang}/app/index.html API 10 API API 3rd party Vendors Domain related files /vendors/...
11. REQUIREMENTS: ▪ Manifest must be served from your website domain ▪ The same for Service worker ▪ You cannot have it on CDN 11
12. ARCHITECTURE Assets CloudFront/S3 Entry point /{lang}/app/index.html API 12 API API 3rd party Vendors Domain related files /vendors/...
13. SUMMARY 13 ▪ It works on my machine! (as always) ▪ It controls your domain, serve it from your domain ▪ Tools and libraries won’t do everything for you (OK, it depends, sometimes they can)
14. ALL YOU NEED IS... HTTPS MANIFEST SERVICE WORKER 14
15. SERVICE WORKER Script that your browser runs in the background, separate from a web page. Responsible for controlling network requests 15
16. 16 SERVICE WORKER 16
17. ARCHITECTURE Assets CloudFront/S3 Entry point /{lang}/app/index.html API 17 API API 3rd party Vendors Domain related files /vendors/...
18. ALMOST... 18
19. SERVICE WORKER SCOPE When your service worker is served from different location and you want to control root directory: ▪ Add { scope: '/' } as registration parameter ▪ Add Service-Worker-Allowed: / header to service worker file 19
20. 20 DEBUGGING
21. 21 AUDITING - LIGHTHOUSE
22. SERVICE WORKER Caching strategies - why and how to handle your network requests 22
23. CACHING STRATEGIES: ▪ Cache First (Cache Falling Back to Network) ▪ Network First (Network Falling Back to Cache) ▪ Network Only ▪ Cache Only (Needs custom precaching) ▪ Stale-While-Revalidate 23
24. 24 SERVICE WORKER - FETCH HANDLER 24
25. ALMOST... 25
26. SERVICE WORKER - FETCH 26 ▪ Do not cache everything! ▪ Limit caching to GET requests only ▪ Use network only strategy for other HTTP methods ▪ Limit caching to your domains* (if applicable)
27. 27 SERVICE WORKER - FETCH HANDLER 27
28. PRECACHING 28 ▪ Ability to save a set of files to the cache when the service worker is installing ▪ Useful for caching all build files (js, css)
29. 29 SERVICE WORKER - PRECACHING 29
30. Non-CORS FAIL BY DEFAULT Fetching a resource from a third party URL will fail if it doesn't support CORS. You can add a no-CORS option to the Request to overcome this, although this will cause an 'opaque' response, which means you won't be able to tell if the response was successful or not. ▪ no-cors - risky as request may fail ▪ configuring CORS properly - can be problematic with some CDNs 30
31. ROUGH EDGES AND GOTCHS ▪ Debugging service worker ▪ Credentials such as cookies are not included ▪ Responsive images srcset attribute or the <picture> 31
32. SUMMARY 32 ▪ You may not encounter the majority of these problems! ▪ Try to build service worker by yourself ▪ There’s always more than one solution
33. ALL YOU NEED IS... HTTPS MANIFEST SERVICE WORKER 33
34. MANIFEST JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. 34
35. 35 MANIFEST 35
36. ADD TO HOMESCREEN 36
37. 37 PWA BASIC TRACKING 37
38. TRACKING RESULTS 38
39. ADD TO HOMESCREEN 39
41. RESULTS Was it all worth it? 41
42. CRUX - Chrome User Experience Report 42
46. 46 SUMMARY 46 ▪ Build it! ▪ You don’t need the whole team for that ▪ You don’t need months for that ▪ Results can be really unexpected!
47. Do we really need this? We’ve got awesome native applications and no mobile web traffic! 47
48. THANKS! Any questions? You can find me at: @art_kania artur@azimo.com 48