In this tutorial we are going to have an introduction to progressive web app or pwa in angular . We will start by knowing what pwa is then we will have some features of progressive web apps.
Progressive web app are future of android and IOS devices as it is truly considered the future of multi-platform development where we have more improvement in speed and easiness of no installation or updates.
PWA provides a modern browser features that can give fast and app-like experience regardless of network connectivity.
It has a great feature to add in modern applications to great user experience using its features like offline mode, install updates in background with web manifest file that get included while installing progressive web app in angular. PWA is reliable that loads application faster, you know a pwa app can never have 404 error after being cached.
Features of progressive web app
- Faster and light weighted
- Responsive that may work with different screen sizes
- Can work offline
- Push notification
- Update application version with service worker
- Higher engagement
- Intelligent caching and background content updating
Steps to create a pwa in angular
- Create an angular application
- Add @angular/pwa package to application
- Go through the files added via @angular/pwa package
- Run PWA locally
Create an angular application
In order to proceed , let start by creating an Angular application, so open the terminal and write this command:
ng new example
Add @angular/pwa package to application
Now we are ready to add @angular/pwa it will add some package files that required for pwa configuration. Run this command ng add @angular/pwa
This command will create some files in the app and update few files to pwa configuration.
Go through the files added via @angular/pwa package
After running the command , we will see some new files and some changes in app.module.ts, angular.json, package.json and index.html files.
lets focus on newly created files in the application.
ngsw-config.json
This file hold configuration of service worker that runs in background on browser and it is responsible for having path of various file like assets , index.html etc.
The major configuration of server worker come in three different parameters
- $schema
- index
- assetGroups
 |
| ngsw-config.json |
$schema:
This leads to service worker API configuration from node package
index:
index file is the root of our application
assetGroups:
This is important one, there are two different assetGroups of our application. The first one contains angular application source files and second is responsible for assets as defined in screenshot.
This file is also responsible for caching strategy that service worker will use while loading our angular application. There are two caching strategies prefech load and lazy load.
manifest.webmanifest
 |
| manifest.webmanifest.json |
This file hold data that will use in progressive web app like:
- Name: name of the application
- Icon parameter that has around 8 items for different splash icon sizes for different resolutions.
- Background color: background color in pwa
- Theme color: theme color of app
- Display: display type of pwa
angular.json
 |
| angular.json |
Under assets angular cli defines src/manifest.webmanifest file to serve site with it, so that imported icons and other configuration will work in service worker.
app.module.ts
 |
| app.module.ts |
Angular cli imports the service worker file to register it in module so that when while running the application it will start working.
Running PWA locally
In order to run PWA locally we need to run it with http-server as service worker does not directly work with ng serve so, we need to put build separately to run PWA.
Steps to start service worker
- Open terminal and run this command ng build --prod 2
- Navigae into the app root inside dist/example
- Run npm i -g http-server and npm i --save http-server if it is not installed
- Open browser enter http://127.0.0.1:8080
 |
| Progressive web app |
Here you can see an icon to install the app and try installing it. you can see cache storage what's being cached.
 |
| PWA cache storage |
It's time to run pwa offline, just move to application tab and click on Service Worker to see if the ngsw-worker.js is running.
 |
| PWA-offline |
I hope you have run the app successfully.
So, In this section, we learned how we can convert our angular app into progressive web app, I hope you have understood the installation process and able to run your PWA. Thanks for reading!
More from Akashminds:
.jpg)
0 Comments