PWA Integration in Angular

PWA Integration in Angular

 PWA (Progressive Web App) provides us native mobile app Experience, without installing the particular application from AppStore we can directly install it on our Desktop or mobile with just one click.

Here we are going to Introduce some areas of Integration with Examples. first, we start from Initial to End to Develop PWA Application. before that just get some Advantages of PWA.

The main Advantage we can Achieve with PWA Integration:

1. App-Like Look and Feel: Nowadays mobile user prefers App compare to browser, as they are more user friendly and can work operate offline and have some attractive interface. PWA provides an advanced user interface by combining the look and feel of the mobile application.
2. Fast Installation: Unlike regular mobile Application PWA do not require long and traditional style installation. they do not need to go to the App Store or Google Play store to install the application, after visiting the website and just click the add to home icon app will install itself on a respective device.
3. Seamless Offline Issue: The capability to operate offline or in compromised networks makes PWAs much more convenient than websites, which require a proper internet connection. Built-in service workers cache important progressive web apps’ features and information automatically, which eliminates the necessity to download it and allows users to access it without an internet connection.

Now let’s go to the Development Part Here we will create an angular application and Integrate PWA.

Hit the below command in CLI to create an Angular Application.

ng new angular-pwa

Now we have Angular Application is Create and go another step Here we will add PWA Dependencies with help of below command.

ng add @angular/pwa

Now this Comand will Below files in your Application Just take a look before go ahead.

ngsw-config.json

manifest.webmanifest

These two files are created in the root folder of the application. and two Existing files are modified to complete the process.

The below line add to index.html

imports: [
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production})
  ],

here in this file, we can add our website icon App Name and everything we can handle from this file.

manifest. webmanifest with the help of this file we can configure PWA behavior like which files and property we need to cache.

Here We need to remember two things.

PWA app will not run Directly with ng serve Command. PWA will support only localhost and HTTP Environment so we will flow below procedure to start PWA Application.

If we want to start with the Individual command we can hit the below command one by one.

ng build --prod

it will create a production build for our application. after that wee need to hit the below command to start the HTTP server.

http-server -p 8080 -c-1 dist/angular-pwa

it will create the HTTP environment and return the localhost URL for our application through this we can run our App.

we can also create a start command in package.json file to configure the command.

"start-pwa": "ng build --prod && http-server -p 8080 -c-1 dist/angular-pwa"

add the above line in your scripts and that’s it we are all done.

Now just need to hit npm run start-pwa And it will start Your Application.

Open this URL (URL May Difference given for Example Purpose)

http://132.148.0.116:8080
http://127.0.0.1:8080

If we willing to check the configuration of PWA in Web Browser we can Check-in development Mode. like Below

That’s it You can see App install Icon in your URL like the below Image.

Now Just Click on Install Icon You Will see below Pop Up.

There is two Different Kind of Icon Available for Mobile and Desktop here we are just take Example of Desktop. and after the installation, you will get the below screen.

this Application also Creates an icon itself so just click the Icon and the user can directly open the Application.

Here was the full tutorial of the application hope you Enjoyed it.