[Solution] How to create Angular app as Progressive web App (PWA)

[Solution] How to make exe(executable) from Angular App

In this article we are going to discuss about how we can convert existing app into progressive web app (PWA App) or how we can create Angular PWA app which will run without internet connectivity in other words from cache how that application work.

How to create Angular app as Progressive web App (PWA)

Want to download source code ? : angular-pwademo-visionfortech

So Finally let's start with PWA ( Progressive web App) in Angular.

Steps to create Angular PWA App / Add PWA in existing Application.

1) Create an Angular Application ( Ignore if you are adding PWA in your existing Application)

2) Add @angular/pwa Package.

3) Brief Understanding of the file added/modified after addition of @angular/pwa package.

4) Run the application

1) Create an Angular Application ( Ignore if you are adding in existing App)

ng new angular-pwademo

2) Add @angular/pwa package

ng add @angular/pwa

After execution of above command it will add some icons into assets/icon folder and along with that it will modify few of the existing files as well like app.module.ts , package.json , angular.json , index.html.

So in below step let us walk through the changes made after we have added @angular/pwa package.

3) Overview of the changes after addition of @angular/pws Package.

first it will add diff .png files with different resolution as showed in below image

After this it will add ngsw-config.json and manifest.webmanifest for configurations and it will also modifies package.json , app.module.ts , angular.json , index. html

For changes in index.html and package.json are self explanatory so i am not going in that but in case if any doubt we are happy to give you solution in comment section.

ngsw-config.json

A developer does not need to do any kind of coding into this file. this is just for the configuration and we are good to go for PWA.

ngsw.json - visionfortech

angular.json

angular.json-visionfortech

index.html changes will have reference of manifest file.

Package.json will have changes related to installed dependencies for pwa package.

4) Run the Application

In this final step we are going to see how to see whether actually service worker is running of what ?

Please refer to the git repo and download the code and check it's readme.md file for the steps to run PWA app

In case if you are facing any kind of issue/problem please feel free to post it in comment. i will try to resolved as soon as i can.

Hope you enjoyed the article and it got added something new to your knowledge.

To Learn more about Javascript Javascript Treasure and  Angular.

To add something new every-time into your mind stay tuned to visionfortech.