Download as PDF, PPTX
Story after PWA A2HS
- 1. Diego González, Ph.D ProductManager Web Advocacy @diekus …and they lived happily ever after: the continuation to the PWA story
- 2. Diego González, Ph.D ProductManager Web Advocacy @diekus …and they lived happily ever after: the continuation to the PWA story
- 3. Samsung Internet… @diekus Most usedbrowser on Samsung Galaxy Devices 6.27% of all mobile browsing, World Wide (up to 20% in some regions) 2nd Most Popular Android Browser
- 4. Why another browser? ‘Best’UX @diekus
- 5. contribute Browser built usingthe Open Source Chromium engine Samsung is a major contributor to Chromium https://samsung.github.io/Chromium/ @diekus
- 6. Wide range ofdevices @diekus S9S10Fold …
- 7. And I meana *very* wide range of devices @diekus Foldables Wearables TVs AppliancesTabletsSmartphones
- 8. @diekus To date… https://bubble.pictures Galaxy Fold(Front) Gear Sport PC
- 9. And the dreamis… @diekus Foldables Wearables TVs AppliancesTabletsSmartphones
- 10. @diekus Let’s do somerecap… Secure connection (HTTPS) Has a Service Worker Has a Manifest file
- 11. @diekus Let’s do somerecap… Secure connection (HTTPS) Has a Service Worker Has a Manifest file • Protects integrity of the website • Protects the privacy of the user • Enables most newer web APIs
- 12. @diekus Let’s do somerecap… Secure connection (HTTPS) Has a Service Worker Has a Manifest file • Access Cache Storage API • Make network requests with Fetch API • Persist Data using IndexDB API
- 13. @diekus Let’s do somerecap… Secure connection (HTTPS) Has a Service Worker Has a Manifest file • Provides information about a web app • JSON file • Name, author, icons, screenshots, colors, orientation, …
- 14. @diekus Why would wewant a … • The usual PWA benefits… • Icon on home screen • Offline functionality • Push Notifications • The added value on the web site… • Responsive design • Faster loading times because of cached assets • Enhanced customization through manifest • Protecting integrity of your website • Compatibility with newer Web APIs
- 15. @diekus But what aboutapps? • The usual PWA benefits… • Icon on home screen • Offline functionality • Push Notifications • The added value on the web site… • Responsive design • Faster loading times because of cached assets • Enhanced customization through manifest • Icon on home screen and app drawer of OS • Offline functionality • Push Notifications • Fast loading (installed) • Access to many hardware specific capabilities • Easily discoverable on an app store
- 16. @diekus But what aboutapps? • Icon on home screen and app drawer of OS • Offline functionality • Push Notifications • Fast loading (installed) • Access to many hardware specific capabilities • Easily discoverable on an app store
- 17.
- 18. @diekus It’s not acompetition
- 19. @diekus Advantages Discoverability Cost / Availabilityof user’s data Size of user’s storage Interaction / engagement with brand / product $
- 20. @diekus Advantages Discoverability Cost / Availabilityof user’s data Size of user’s storage Interaction / engagement with brand / product $
- 21. @diekus Advantages Discoverability • Easy toshare, easy to find* • Proposals to make it easy to share (even offline) • No gatekeeping, no walled gardens
- 22. @diekus Advantages Cost / Availability of user’sdata $ Size of user’s storage source: pwastats.com by Cloud4
- 23. Browser Support* *support forService Workers and Web App Manifest @diekus
- 24. The continuation of thePWA story @diekus
- 25.
- 26. @diekus webnative But on aplatform level they’re not quite there as first class citizens…
- 27. @diekus webnative But on aplatform level they’re not quite there as first class citizens… • Not in app drawer • Not in system app list • Can’t manage notifications • Not in Share menu • Browser branded notifications • Browser badge over icon
- 28. @diekus web native WebAPK • Browser generatesand installs an APK. • Updates when manifest changes • Supports “Android Intent Filters” • Adds permission/storage management
- 29. @diekus WebAPK • Web AppManifest • short_name or name • icons (192px) • start_url • display (fullscreen, standalone, minimal-ui) • Served over HTTPS • Has registered a Service Worker with a fetch event handler • <- All PWA criteria • Android OS Version >= N • Web App is not already installed • Not in Secret mode Add to Home Screen Install
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. @diekus PWAs in theGalaxy Store
- 37. @diekus How to submityour PWA to the Galaxy Store? • License agreement is basic requirement. • There will be variety of ways for it, soon! • For access today, send an email to pwasupport@samsung.com
- 38. @diekus So how doyou get started?
- 39. @diekus Getting started withPWAs Build the PWATip: Consistent look and feel
- 40.
- 41. @diekus Consistent Galaxy Lookand Feel • Themes (Custom properties) • New Layout options (Flex, Grid, Subgrid) • Automatic Dark mode detection (prefers-color-scheme) • Accessible (AA level WCAG compliant)
- 42. @diekus Consistent Look andFeel on Galaxy
- 43. @diekus Consistent Galaxy Lookand Feel https://samsunginter.net/oui-themes
- 44.
- 45.
- 46.
- 47.
- 48.
- 49. @diekus Getting started withPWAs Creates the service worker, manifest file and an APK that can be submitted to the Galaxy Store.
- 50. @diekus Getting started withPWAs And that’s it.
- 51.
- 52. @diekus Getting started withPWAs Now • Focusing on enhancing discoverability • Providing a best in class UX for PWAs • Educating developers and users about PWAs Next • Expanding to different platforms • PWAs on XR browsers? • 3D favicons • Compatibility with more stores? • PWAs on wearables (Tizen/WearOS/Oculus)? • Narrowing the gap with native tech (Fugu)
- 53. @diekus Public Beta forDevelopers galaxy.store/internetbeta Samsung Internet Stable galaxy.store/internet
- 54. @diekus …thank you! the continuationto the PWA story @samsunginternet www.samsunginter.net