More Related Content
What's hot (20)
Similar to Progressive Web Apps 101 (20)
Recently uploaded (20)
![AVG Antivirus Crack With Free version Download 2025 [Latest]](https://cdn.slidesharecdn.com/ss_thumbnails/tighteningeverybolt-fosdem2025-250224092147-cc175839-250305170448-f3a5e54e-250307161054-70f02df2-thumbnail.jpg?width=560&fit=bounds)
Progressive Web Apps 101
- 1. Progressive Web Apps Daniel Black Android Developer, Carsforsale.com
- 2. Introduction What are Progressive Web Apps Service Workers Add to Homescreen Push Notifications Browser Support The Future
- 3. Stats
- 4. What are Progressive Web Apps Progressive web apps are ...user experiences that have the reach of the web, and are: Reliable - Load instantly and never show the downasaur*, even in uncertain network conditions. Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging - Feel like a natural app on the device, with an immersive user experience. https://developers.google.com/web/progressive-web-apps/
- 5. PWAs are... Progressive - browser independent Responsive - works on any form factor Connectivity Independent - enhanced with service workers to work offline App-like - feels like an app Fresh - service workers help cache and update data
- 6. PWAs are also... ...like good old web sites but better. In a modern browser they exhibit superpowers and become Network Independent Progressive Re-engageable Responsive Discoverable Installable Linkable Safe https://developer.mozilla.org/en-US/Apps/Progressive
- 7. High Level Implementation Mobile-first web app design Strategic caching Caching of web app frame and data Offline accessible Manifest file for Add to homescreen
- 8. Criteria (Baseline) Https Responsive on tablets & mobile Start URL loads offline (at least) Metadata for Add to Homescreen First load fast on 3G Cross-browser support Page transitions dont feel like they block the network Each page has a URL https://developers.google.com/web/p rogressive-web-apps/checklist
- 9. Lighthouse Website performance and quality tool by Google Includes a subset of PWA checklist
- 11. Twitter Lite - Case Study 65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate
- 12. Twitter Lite - Case Study The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android. -Nicolas Gallagher, the Engineering Lead for Twitter Lite
- 13. Twitter Lite - Case Study Progressive web app = 600KB Android app = 23.5MB installed 50% reduction in 99th percentile time-to- interactive latency Logged in users have a 30% reduction in average load time
- 14. Service Workers Background service that listens for events Runs in the browser Supported by Chrome, Opera, and Firefox MS Edge is in development
- 21. App Manifest Appear on mobile homescreens Launch in fullscreen mode without a URL bar Define a splash screen experience and app theme color Track home screen vs URL launch Only supported for Chrome and Opera Mobile browsers
- 25. manifest.json https://w3c.github.io/manifest/ https://developer.mozilla.org/en-US/docs/Web/Manifest
- 26. App Install Banner Criteria is that the site has A manifest.json with A short_name (homescreen) A name (banner) A 144x144 png icon A start_url that loads A service worker registered with the site https://addyosmani.com/blog/gett ing-started-with-progressive- web-apps/
- 29. Native App Install Banner Criteria is that the site has A manifest.json with A short_name (homescreen) A name (banner) A 144x144 png icon A related_applications object with app info Is served over HTTPs
- 30. Push Notifications Check if supported (PushManager) Register service worker and call getSubscription on its pushManager Use pushManager to subscribe Listen for push events on the service worker
- 34. Browser Support Chrome, Firefox, Opera, Samsung Internet Microsoft Edge is in development Safari hinted toward a 5 year plan Android iOS Windows Phone
- 35. Native Hardware User location Recording audio Camera Orientation and motion
- 38. Drawbacks Browser support is not comprehensive yet No bluetooth or NFC access right now
- 39. Future Web Bluetooth Web USB Web Share Share Target Image Capture Media Session getInstalledRelatedApps Background Fetch Generic Sensors API Budget API Wake Lock Improved Quota Foreign Fetch Shape Detection Face Detection etc...
- 40. What Now? Pick a feature or side project and go code! Fire all your native developers, they are no longer needed :)