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.

Build progressive web apps with Angular

1,678 views

Published on

Progressive web apps (PWA) are becoming an industry standard for building web applications. With reliability, speed and immersive user experience in mind, PWAs help you reach a broader audience. In this session we will take an existing web app and convert it into a PWA. First, we'll make our application installable to homescreen by adding a Web App Manifest json file. Next, we'll focus on making our app reliable by enabling service workers inside our application and caching resources. Throughout this session we'll also learn how to use Lighthouse to test the performance of our PWA.

Published in: Software
  • Be the first to comment

Build progressive web apps with Angular

  1. 1. @simona_cotin Simona Cotin Cloud Dev Advocate @ Microsoft @simona_cotin
  2. 2. @simona_cotin
  3. 3. @simona_cotin
  4. 4. @simona_cotin
  5. 5. @simona_cotin
  6. 6. @simona_cotin Intro to PWA Dive into main concepts Angular <3 Pwa Tools Success stories
  7. 7. @simona_cotin What?
  8. 8. @simona_cotin –Wikipedia “Progressive web apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.”
  9. 9. @simona_cotin –Alex Russell “..they’re just websites that took all the right vitamins”
  10. 10. @simona_cotin Progressive
  11. 11. @simona_cotin Responsive
  12. 12. @simona_cotin Connectivity Independent
  13. 13. @simona_cotin App-like
  14. 14. @simona_cotin Fresh
  15. 15. @simona_cotin Safe
  16. 16. @simona_cotin Discoverabl e
  17. 17. @simona_cotin Re-engageable
  18. 18. @simona_cotin Installable
  19. 19. @simona_cotin Linkable
  20. 20. @simona_cotin
  21. 21. @simona_cotin How?
  22. 22. @simona_cotin Baseline “Appyness”
  23. 23. @simona_cotin Baseline “Appyness” •Service workers •Web manifest •Delivered over HTTPS
  24. 24. @simona_cotin –Netlify “Service workers are proxies that sit between the web page and the network, providing cached versions of the site when no network connectivity is available.” Service Workers 🏋🏋♀️
  25. 25. @simona_cotin Web Page Service worker Cache Backend
  26. 26. @simona_cotin Web Page Service worker Cache Backend 🏋🏋🏋♀️ 🏋
  27. 27. @simona_cotin Web Page Service worker Cache Backend 🏋🏋🏋♀️ 🏋
  28. 28. @simona_cotin Register 🏋🏋♀️ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.j }
  29. 29. @simona_cotin Scope Lifecycle
  30. 30. @simona_cotin Scope Default ./ xyz.sw/work/sw.js xyz.sw/work
  31. 31. @simona_cotin Lifecycle
  32. 32. @simona_cotin // cache a cat SVG event.waitUntil( caches.open('static-v1').then(cache => cache.add('/cat.svg')) ); }); self.addEventListener('activate', event => { console.log('V1 now ready to handle fetches!'); }); self.addEventListener('fetch', event => { const url = new URL(event.request.url); // serve the cat SVG from the cache if the request is // same-origin and the path is '/dog.svg'
  33. 33. @simona_cotin
  34. 34. @simona_cotin ✓Connectivity independent ✓Fresh ✓Discoverable
  35. 35. @simona_cotin –Mozilla “The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience. ”
  36. 36. @simona_cotin
  37. 37. @simona_cotin ✓Connectivity independent ✓Fresh ✓Discoverable ✓Installable
  38. 38. @simona_cotin Service workers need to be served over HTTPS
  39. 39. @simona_cotin ✓Connectivity independent ✓Fresh ✓Discoverable ✓Installable ✓Safe
  40. 40. @simona_cotin
  41. 41. @simona_cotin Create service workers using the angular cli
  42. 42. @simona_cotin
  43. 43. @simona_cotin
  44. 44. @simona_cotin
  45. 45. @simona_cotin
  46. 46. @simona_cotin
  47. 47. @simona_cotin
  48. 48. @simona_cotin
  49. 49. @simona_cotin 😕
  50. 50. @simona_cotin
  51. 51. @simona_cotin
  52. 52. @simona_cotin
  53. 53. @simona_cotin
  54. 54. @simona_cotin 🎉🎊
  55. 55. @simona_cotin <meta name="theme- color" content="#1976d2">
  56. 56. @simona_cotin 🏋
  57. 57. @simona_cotin
  58. 58. @simona_cotin What if you had an existing app? ✓ Add service worker package ✓ Enable service worker build support in the cli ✓ Import and register service worker ✓ Create service worker conf file
  59. 59. @simona_cotin Tools
  60. 60. @simona_cotin
  61. 61. @simona_cotin
  62. 62. @simona_cotin
  63. 63. @simona_cotin
  64. 64. @simona_cotin
  65. 65. @simona_cotin
  66. 66. @simona_cotin Success stories
  67. 67. @simona_cotin https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6
  68. 68. @simona_cotin https://developers.google.com/web/showcase/2016/flipkart
  69. 69. @simona_cotin –https://developers.google.com/web/progressive-web-apps/ “A new way to deliver amazing user experiences on the web”
  70. 70. @simona_cotin Thank you
  71. 71. @simona_cotin Github Azure App Service https://github.com/simonaco/ul timate-pwa https://aka.ms/azure-paas

×