PWA Updates in Chrome 68

Let's dive into new behavior for A2HS(Add to Home Screen). You can also get understand of making PWA as an app for Desktop installable and powerful

Transcript

1. PWA Updates in Chrome 68 PWA DESKTOP
2. Today ... - Add to Home Screen(A2HS) Changes - PWA Desktop Hand-on - Service Worker Caching Changes
3. Add to Home Screen Changes
4. Chrome < 68 - Banner notification - Meets the add to home screen criteria 
 => SHOW - Not call preventDefault() on the beforeinstallprompt event
 => SHOW - Calling prompt() on the beforeinstallprompt event
 => SHOW
5. Chrome >= 68 - Mini-inforbar - It will always be displayed as meets the `add to home screen criteria` 
 => SHOW - If dismissed by a user, will not be shown for a period of time (~3 month)
 => HIDE
6. Chrome >= 68 - A2HS Dialog - Calling prompt() within a user gesture 
 => SHOW - User tabs the mini-inforbar
 => SHOW - Clicks 'Add to Home screen' from the Chrome menu
 => SHOW
8. Chrome > ?
9. - The web app is not installed - User engagement heuristic (for at least 30 seconds) - Web app manifest - short_name or name - icons (192px and a 512px) - start_url - display (fullscreen, standalone, or minimal-ui) - HTTPS with service workers Criteria
10. Handle 'beforeinstallprompt' Event
11. Calling prompt() event
14. Why we have all of changes about notification
15. PWA DESKTOP
16. https://developers.google.com/web/updates/2018/05/dpwa
18. Make a PWA with @PWA
19. Make a PWA with @PWA
20. App Window Elements
21. App Menu
22. Design Consideration
23. Design Consideration
24. Design Consideration
25. Design Consideration
26. Service Worker Caching Changes https://github.com/vuejs-templates/pwa/issues/70
27. updateViaCache('none' | 'all' | 'imports')
28. updateViaCache('none' | 'all' | 'imports') none all imports sw.js HTTP cache ignored Looking at Cache HTTP cache ignored imports scripts HTTP cache ignored Looking at Cache Looking at Cache
29. - New in Chrome 68 | Web | Google Developers - Changes to Add to Home Screen Behavior | Web | Google Developers - Add to Home Screen | Web Fundamentals | Google Developers - https://pwa.cafe/ - Fresher service workers, by default | Web | Google Developers References