Developing PWAs with Angular JS


Developing PWAs with Angular JS

For quite a while we have been noticing a huge interest in Progressive Web Applications (PWAs) and has gained a lot of momentum in the front-end world. More and more companies are developing applications using this concept.

Progressive Web Apps are basically the user experiences that have reach of the web by combining new technologies with the established best practices for creating expeiences which are:

  • Reliable- A PWA when launched from a users home screen , loads meaningful content regardless of the network conditions.
  • Accessible- A good, responsive and accessible design ensures the application to work on new devices with faster interfaces to respond.
  • Engaging- Offering immersive full screen experience making it easy for users to get into the app and even re-engage the users with web push notifications.

Adding PWA capabilities to an Angular app:

In this blog, we will go ahead with discussing about how an Angular app can be supported with PWA capabilities or converting an Angular app into PWA Angular App.

To make existing angular app as a PWA, we need to focus on the following points:

  1. Register a service worker( used as a ‘proxy’ between client-side and server-side application)
  2. Service worker response to be 200 when offline.
  3. Availability of content even when Javascript is not available
  4. Use HTTPS
  5. Add manifest for the splash screen of your application

All this may sound weird for the newbies in Angular development but no need to worry, we will assist you by providing a step by step guide further.

Step-by-Step Guide To an Angular PWA Application

– Start by setting up a new Angular project.

Step 1: Install CLI of angular

npm install -g @angular/cli

Step 2: Creating new angular app with the angular CLI

ng new angularPwa

angularPwa” is the project name( Choose your preferred name)

It may ask you the following Options:

op1: Would you like to add Angular routing?

Type “Yes” if you want default Routing of Angular then hit enter

op2: Which stylesheet format would you like to use?

Select any of the css format you want to use eg. CSS, SCSS etc.

Step 3: To test your angular app you need to run the following command

ng serve –open

It will run your app on http://localhost:4200/

– Now, check whether your app is a Progressive web app or not for which you can use “lighthouse” tool of Google chrome (https://developers.google.com/web/tools/lighthouse/)

(Image)

Step 3:To test your angular app you need to run the following command

ng serve –open

It will run your app on http://localhost:4200/

– Now, check whether your app is a Progressive web app or not for which you can use “lighthouse” tool of Google chrome (https://developers.google.com/web/tools/lighthouse/)

 

– It gives you approx 36 points out of 100 and shows the list of the failure conditions, which are required for a PWA application.

 

– Now to make our application as PWA we need to make sure our application fulfill all the criteria listed on the lighthouse testing tool.

I am using Angular CLI version 6 to make out angular application as a progressive web application.

-Go on your project root directory and run this command:

ng add @angular/pwa

It will create the following files in our application:

1: It created “ngsw-config.json” in our root directory

2: It creates some different size of icons under “src/assets/icons/”

3: Creates a ”mainfest.json” in “src” directory

4: Updates the following files: Angular.json, package.json, src/app/app.module.ts and src/index.html

1: Ngsw-config.json- This file is responsible for the service worker configuration. Service worker are used for the caching of our application. We can cache different js,css,images and icons files as per our need.

https://developers.google.com/web/fundamentals/primers/service-workers/

2: Angular cli creates different sizes of icons which are used for app icon and splash screen. These icons are served format of the manifest file. For different size of screen, angular servers have different icons.

3: Manifest.json: It is responsible for “Add To Home Screen” popup once your application is served over the web. It contains the meta data of your angular app such as “name”,”short)name”, “theme_color”,”icons” etc.

4: These files are updated by just using the created files to make our application work as a progressive web application. Example- in src/app/app.module.ts

We will see the following changes:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
@NgModule({
    declarations: [
        AppComponent
    ],
imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

– Now we have added all the things which are required to make our application as PWA

– Here it looks like a manifest.json file


{
 "name": "angularPwa",
 "short_name": "angularPwa",
 "theme_color": "#1976d2",
 "background_color": "#fafafa",
 "display": "standalone",
 "scope": "/",
 "start_url": "/",
 "icons": [
    {
     "src": "assets/icons/icon-72x72.png",
     "sizes": "72x72",
     "type": "image/png"
    },
    {
     "src": "assets/icons/icon-96x96.png",
     "sizes": "96x96",
     "type": "image/png"
    },
    ......
  }
 ]
}

Conclusion:

In the above blog, we have illustrated how to add PWA features to an Angular application by adding a manifest, service workers and sample app icons. We should remember that the ideas and concepts used by PWA are not that new and can be incorporated easily into your existing applications.