Write once, run anywhere with an angular PWA | Michael Dowden & Maritine Dowden | ng-conf 2022

Learn how to create a Progressive Web App (PWA) with Angular that runs anywhere with minimal changes, and explore the tools and services used to develop, deploy, and test it.

Key takeaways
  • Write once, run anywhere with an Angular PWA: the goal is to create a Progressive Web App (PWA) that works on multiple platforms and devices, with minimal changes.
  • Service worker: responsible for handling requests and updating the application offline. It’s added by running ng add angular.pwa with Angular.
  • Installing the PWA: the user has to manually install the PWA on their device, which can be done by clicking the “Add to home screen” button.
  • Android: icons can be customized and notifications can be received.
  • iOS: no automatic way to install the PWA, and notifications have to be handled manually.
  • Google provider: used for Firebase Cloud Messaging (FCM) and push notifications.
  • Firebase Instant Apps: allows for instant updates and fast preview of apps without having to install them.
  • Firebase: used for storing and managing data, as well as for sending notifications.
  • Cloud functions: used for handling server-side logic and for sending notifications.
  • icon sets: customizable for different devices and platforms.
  • manifest.json: used for configuring the PWA’s metadata.
  • lighthouse: a tool used for testing and debugging PWAs.
  • Firebase CLI: used for creating and managing Firebase projects.
  • ng add angular.pwa: used for adding the PWA feature to an Angular project.
  • ng serve: used for serving the application locally.
  • Firebase hosting: used for hosting the application live.
  • Firebase serve: used for serving the application locally and testing it.
  • Firebase testing: used for testing the application on different devices and platforms.
  • Firebase DevTools: used for debugging and testing the application.
  • Google Analytics: used for tracking user behavior and analytics.