This repository shows how to use Progressive Web Apps features in an Angular project.
Do you wanto to learn more about the amazing technologies behind Progressive Web Apps?
Then have a look at the complete course about PWAs publisehd on Educative learning portal.
With PWAs not only we can cache static assets (.html, .js, .css) and make them available offline, but we can also cache GET responses according to different caching strategies (performance or freshness). This allows to cover many different scenarios in our applications, whether we want to provide blazing fast responses without the need of a network roundtrip or rather return the latest data from the server, falling back to the local cache in absence of a reliable connection.
You can test the Angular PWA demo here.
The external APIs used are:
- https://icanhazdadjoke.com/api (using the performance caching strategy)
- https://api.thecatapi.com/v1/images/search (using the freshness caching strategy)
First install or update your local project's npm dependencies:
npm install
Exceute a production build:
ng build --prod
This command will generate a dist/angular-pwa folder
As we cannot use ne serve with service workers, you need to run a web server iof your choice. As example: http server or the web server Chrome extension and target the previously built dist/angular-pwa folder.
Open the browser at the proposed address.
✅ Make the application responsive
🔲 Show notification when a new SW version is available (use swUpdate)
🔲 Introduce Share API