Angular PWA. Install, configure and run it.
Do you have an Angular Web Application which is also designed for mobile users? Then converting it to be a Pogressive Web App will boost the usability of your app and satisfy the customers. In this article I will show all the steps you need for it to work.
What is PWA?
Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features in combination with progressive enhancement to give users an experience on par with native apps.
Getting started
#1. Create an Angular application.
ng new angular-pwa#2. Add @angular/pwa package.
ng add @angular/pwaThis command will install required packages, update schematics and modify several files.
Checking the files and extra configuration.
- angular.json
Added src/manifest.webmanifest file under assets folder, which will be served with the app. This will link ngswConfigPath and serviceWorker enabling the production configuration in build schematics.
2. app.module.ts
Added the following import of ServiceWorkerModule being enabled only in production build.
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: !isDevMode(),
// Register the ServiceWorker as soon as the application is stable
// or after 30 seconds (whichever comes first).
registrationStrategy: 'registerWhenStable:30000'
})3. index.html
Inlcuded the following for importing the manifest.webmanifest which decided how the PWA app will look like when it gets initialized and opened up.
<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">4. ngsw-config.json
JSON configuation file for making use of Service Worker API which will help caching assets and other resources.
PWA in action
To see what we added without needing to deploy you can follow this steps:
- Generate a production build → ng build — configuration=production (If you use previous version of Angular you can use it with — prod flag). This will create a new folder under your root application called dist. Your app files will be under dist/angular-pwa.
- In order to serve the production build locally you’ll need a package like http-server. → Run npm i -g http-server.
- Run http-serve dist/angular-pwa and open the port where the app is being served.
- All of a sudden you will see a button in the chrome browser which can install your application.
5. Also if you open dev tools you can see that under Application tab your app has also access to Service Workers
Yayy🚀.
Source code
If you are interested into the source code I used for this app, you can check it out here.
A little extra 👽
If you are interested into trying things out and deploy any angular app to Firebase hosting for free, you can follow the steps on my article here.
That’s it
As usual, thank you for reading. I appreciate the time you take to read my content and stories. I hope you can find this article useful. If you like it give it 👏👏 and don’t hesitate to follow.
Stay tuned and happy coding!
