Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Progressive Web Apps 101

374 views

Published on

Progressive web apps (PWAs) close the gap and blur the lines between native apps and web apps. Daniel will introduce PWAs, including service workers, push notifications, app icons, offline capabilities, the app manifest, and browser support. He will also discuss practical applications and case studies to give business insight into this newer technology.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Progressive Web Apps 101

  1. 1. Progressive Web Apps Daniel Black Android Developer, Carsforsale.com
  2. 2. Introduction What are Progressive Web Apps Service Workers Add to Homescreen Push Notifications Browser Support The Future
  3. 3. Stats
  4. 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. 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. 6. PWAs are also... ...like good old web sites but better. In a modern browser they exhibit super–powers and become… Network Independent Progressive Re-engageable Responsive Discoverable Installable Linkable Safe https://developer.mozilla.org/en-US/Apps/Progressive
  7. 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. 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 don’t feel like they block the network Each page has a URL https://developers.google.com/web/p rogressive-web-apps/checklist
  9. 9. Lighthouse Website performance and quality tool by Google Includes a subset of PWA checklist
  10. 10. Twitter Lite - Case Study 65% increase in pages per session 75% increase in Tweets sent 20% decrease in bounce rate
  11. 11. 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
  12. 12. 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
  13. 13. Service Workers Background service that listens for events Runs in the browser Supported by Chrome, Opera, and Firefox MS Edge is in development
  14. 14. Service Workers (events) Install Activate Fetch Push NotificationClick Sync
  15. 15. app.js service-worker.js
  16. 16. 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
  17. 17. manifest.json short_name background_color theme_color icons start_url description dir display lang orientation prefer_related_application related_applications scope
  18. 18. manifest.json https://w3c.github.io/manifest/ https://developer.mozilla.org/en-US/docs/Web/Manifest
  19. 19. 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/
  20. 20. 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
  21. 21. 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
  22. 22. Browser Support Chrome, Firefox, Opera, Samsung Internet Microsoft Edge is in development Safari hinted toward a 5 year plan Android iOS Windows Phone
  23. 23. Native Hardware User location Recording audio Camera Orientation and motion
  24. 24. Drawbacks Browser support is not comprehensive yet No bluetooth or NFC access right now
  25. 25. 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...
  26. 26. What Now? Pick a feature or side project and go code! Fire all your native developers, they are no longer needed :)
  27. 27. Resources https://developers.google.com/web/fundamentals/getting- started/codelabs/your-first-pwapp/ https://developers.google.com/web/progressive-web-apps/ https://developer.mozilla.org/en-US/docs/Web/Manifest https://dblackker.github.com/pwa-google-example https://www.youtube.com/watch?v=m-sCdS0sQO8 (Google I/O 2017 PWAs)

×