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.

Centric - PWA WebCast

22 views

Published on

Slide used in the Centric WebCast - Progressive Web Apps.

In this I explain what a Progressive Web App is. I demonstrate how to analyze a website with Lighthouse and how to build one using PWA Builder for creating the manifest and service worker.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Centric - PWA WebCast

  1. 1. STEVE JOBS “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” 2007
  2. 2. STEVE JOBS “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” 2007
  3. 3. STEVE JOBS “You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today” 2007
  4. 4. ALEX RUSSELL Progressive Web Apps: Escaping Tabs Without Losing Our Soul 2015
  5. 5. WHAT ARE PROGRESSIVE WEB APPS?
  6. 6. WHAT IT’S NOT A Tool A Framework
  7. 7. WHAT THEY ARE Progressive Works on any device and enhance functionality progressively. Discoverable Better discovery and integration with search. Linkable Ability to retain or reload its state and be shareable from a link. Responsive Fit any device’s form factor and screen size. Current Application and content is up to date when connected to the Internet. Re-engageable Promotes re-engagement through features such as push notifications. Performant Works as fast or faster than a native app. Connected to users Direct feedback to you through ratings and reviews App-like Looks like a native app and uses the application shell model with minimal page refreshes. Connectivity-agnostic Works with low connectivity or offline. Installable Install on the device’s desktop, start menu, or task bar making it readily available.
  8. 8. MINIMUM HTTPS Web App Manifest Service Worker
  9. 9. RECOMMENDED Cross Platform Responsive Deep linking Best Practices
  10. 10. SUPPORT
  11. 11. WHY?
  12. 12. CONNECTIVITY Service worker takes care of bad connection • By caching • Showing custom offline page
  13. 13. PLATFORM INDEPENDENT 100% code share Not in the store (per se)
  14. 14. WHY?  No lengthy installation process  Don’t occupy device storage  Discoverable  Secure  Fast  Cheap
  15. 15. WHAT ABOUT…?
  16. 16. I NEED A NATIVE APP FOR Geolocation
  17. 17. I NEED A NATIVE APP FOR GeolocationW3C API
  18. 18. I NEED A NATIVE APP FOR Authentication
  19. 19. I NEED A NATIVE APP FOR AuthenticationWeb API
  20. 20. I NEED A NATIVE APP FOR Payment
  21. 21. I NEED A NATIVE APP FOR Payment Request API
  22. 22. I NEED A NATIVE APP FOR USB Bluetooth VR Gamepad
  23. 23. I NEED A NATIVE APP FOR Web USB API Web Bluetooth API WebVR Web Gamepad API
  24. 24. IF IT’S REALLY NOT THERE (YET)
  25. 25. WHO?
  26. 26. EXAMPLES Starbucks
  27. 27. EXAMPLES Twitter
  28. 28. EXAMPLES Pinterest
  29. 29. EXAMPLES Instagram
  30. 30. MAKING PWA
  31. 31. DEMO
  32. 32. ANALYZING
  33. 33. LIGHTHOUSE
  34. 34. LIGHTHOUSE  Chrome Extension  Dev Tools Audit  CLI Lighthouse analyzes web apps and web pages, collecting modern performance metrics and insights on developer best practices.
  35. 35. WEBHINT webhint is a linting tool that will help you with your site's accessibility, speed, security and more, by checking your code for best practices and common error  Online scanner  CLI  Visual Studio Code integration
  36. 36. GETTING STARTED
  37. 37. PWA BUILDER 1. Provide a URL 2. Generate a Manifest 3. Build a Service Worker 4. Publish the App Generate your Progressive Web App
  38. 38. WEB APP MANIFEST  W3C standard  Contains all info about app  Working Draft - 18 October 2018 <link rel="manifest" href="/manifest.webmanifest">
  39. 39. SERVICE WORKER  Runs in background  Handles cache, push, sync  programmable network proxy
  40. 40. SERVICE WORKER Lifecycle
  41. 41. FETCH  Modern replacement of XMLHttpRequest  Relies on promises
  42. 42. WHAT’S NEXT?
  43. 43. NOT SHOWN
  44. 44. NOT SHOWN  Push notifications  Notifications API + Push API  Build on top of the Service Worker API  Background Sync  Defer actions until stable connection
  45. 45. FRAMEWORKS
  46. 46. Performance Resilience Progressive web app JavaScript Libraries for adding offline support to web apps • Precaching • Runtimecaching Strategies • Request routing • Backgroundsync • Helpful debugging
  47. 47. PREACT-CLI  App creation  Index.html app shell generation  Browser list autoprefixing  Firebase configuration for server push  Powered by sw-precache
  48. 48. VUE Vue-cli & @vue/cli-plugin-pwa  Uses WorkBox  Can automatically generate service worker or start with existing one
  49. 49. ANGULAR @angular-cli  ng add @angular/pwa - Turn your application into a PWA by adding an app manifest and service worker
  50. 50. TIPS
  51. 51. TESTING  F12 tools  Connect phone with USB  Chrome://inspect  Android debugger needs to be running “adb.exe start-server”  Custom domain with SSL  DNS directs to local IP, ie 192.168.1.13
  52. 52. TESTING • Test on real devices • Throttling is not enough • Offline checkbox doesn’t affect websockets
  53. 53. PWA SLACK https://join.slack.com/t/progressive-web-apps/shared_invite/enQtMjY0NDI2MjAxNTc1LWM4ZWYyNDZhNDRlZDUyNTk5YThhZGQwOWRhZTkwZjAwNTlhNzA3MzY0ZWM0NWQxZmVkZjJhNWEzNTZkYmQ3ZTY • Events • Tooling • Help • Examples
  54. 54. SERVICEWORKE.RS
  55. 55. ANGULAR CONNECTNovember 6-7
  56. 56. CHROME DEV SUMMITNovember 12-13
  57. 57. THANK YOU! Timmy Kokke https://timmykokke.com https://youtube.com/c/sorskoot https://webxr.nl @sorskoot Timmy.kokke@centric.eu

×