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
ng new example
Add @angular/pwa package to application
Go through the files added via @angular/pwa package
- 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
Running PWA locally
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|
2 thoughts on “PWA installation and configuration in angular | Akashminds”
Great article. It’s very unfortunate that over the last ten years, the travel industry has already been able to to deal with terrorism, SARS, tsunamis, bird flu, swine flu, and the first ever true global economic collapse. Through all of it the industry has really proven to be sturdy, resilient and dynamic, locating new approaches to deal with adversity. There are constantly fresh complications and the possiblility to which the field must just as before adapt and answer.
How can I find out more about it?