This article will explain, how to enable progressive web application for angular applicaiton. You can understand on how Progressive Web Apps works and how to enable it for Angular applications with easy steps.
Progressive Web Apps
What are Progressive Web Apps
How to implement PWA
Make site responsive
To make a progressive web application we have to make sure the web application is supporting cross platform, specially it should work in mobile and desktop. Simply it should be a responsive web application which works on mobile and desktop.
Add a web app manifest
The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched.
Enable Service worker
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.
How to enable PWA in angular applicaiton
Adding Service worker
ng add @angular/pwa --project *project-name*
- Adds the @angular/service-worker package to your project.
- Enables service worker build support in the CLI.
- Imports and registers the service worker in the app module.
- Updates the index.html file:
- Includes a link to add the manifest.webmanifest file.
- Adds meta tags for theme-color.
- Installs icon files to support the installed Progressive Web App (PWA).
- Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.
Build the project
ng build --prod
Serving the project
http-server -p 8080 -c-1 dist/project-name
Thanks to the Angular team, We are done with the initial pwa with very simple steps. That's all for today and see you soon in another very exiting tutorial