Turning Angular Application into a PWA

With the Angular7 Service Worker and therefore the Angular user interface intrinsic PWA support, it's currently easier than ever to form our net application downloadable and installable, a bit like a native mobile application.

In this blog, we'll going to set however we will assemble the Angular user interface build pipeline to get applications that in production mode are downloadable and installable, a bit like native apps.

We will follow the below mentioned points for turning our Angular application into a PWA
 

- Staging associate degree Angular PWA Application mistreatment the Angular user interface
With a handful of commands, the user interface can us an operating application that has transfer & Installation enabled. the primary step to make associate degree Angular PWA is to upgrade the Angular user interface to the most recent version:

npm install -g @angular/cli@latest

If you wish to undertake the most recent options, it is also doable to urge ensuing forthcoming version:

 

npm install -g @angular/cli@next

And with this in situ, we will currently scaffold associate degree Angular application and add it Angular Service employee support:

 

ng new angular-pwa-app --service-worker

We can additionally add the Angular Service employee to associate degree existing application mistreatment the subsequent command:

ng add @angular/pwa --project

- Understanding a way to Add Angular PWA Support Manually
The application scaffolded is sort of clone of associate degree application while not PWA support. let's examine what this flag includes, just in case you wish to upgrade associate degree application manually.

We can see that the @angular/service-worker package was side to package.json. Also, there's a replacement flag serviceWorker set to true within the user interface configuration file angular.json:

"apps": [
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
">,
"serviceWorker": true
}
]

-  PWA Production Build
Let's initial add one thing visual to the applying that clearly identifies a given version running within the user browser. as an example, we will replace the contents of the app.component.html file.

Let's currently build this hullo world PWA app. The Angular Service employee can solely be offered in production mode, thus let's initial do a production build of our application:

ng build --prod

This will take an instant, however once a jiffy, we'll have our application build offered within the dist folder.


Lets understand some basic concepts for progressive web apps service workers.
 

What is the ngsw-worker.js file?

This file is that the Angular Service employee itself. Like all Service staff, it get's delivered via its own separate communications protocol request so the browser will track if it's modified, and apply it the ServiceWorker Lifecycle.

It's the ServiceWorkerModule which will trigger the loading of this file indirectly, by career navigation.serviceWorker.register().

Note that the Angular Service employee file ngsw-worker.js can forever be a similar with every build, because it gets derived by the user interface straight from node_modules.

This file can then stay a similar till you upgrade to a replacement Angular version that contains a replacement version of the Angular Service employee.

 

- Launching associate degree Angular PWA in Production Mode
 

Let's then begin the applying in production mode, and so as to try and do that, we tend to area unit reaching to want alittle net server. a good alternative is http-server, thus let's install it:
 

npm install -g http-server

Let's then get in the dist folder, and begin the applying in production mode:

cd dist

http-server -c-1 .

The -c-1 possibility can disable server caching, and a server can commonly be running on port 8080, serving the assembly version of the applying.

Note that if you had port 8080 blocked, the applying may be running on 8081, 8082, etc., the port used is logged within the console at startup time.

If you've got a REST API running domestically on another server as an example in port 9000, you'll additionally proxy any REST API calls thereto with the subsequent command:

http-server -c-1 --proxy http://localhost:9000

and whatever four digits port number you want.

With the server running, let's then head over to http://localhost:8080, and see what we've got running mistreatment the Chrome Dev Tools:

- Deploying a replacement Application Version, Understanding Version Management
This is a good feature, however is not it a touch dangerous to cache everything, what if there's a bug and that we wish to ship a replacement version of the code?

Let's say that we tend to created alittle modification to the applying, like as an example written material a worldwide vogue within the designs.css file. Before running the assembly build once more, let's keep the previous version of ngsw.json, so we will see what modified.

Let's currently run the assembly build once more, and compare the generated ngsw.json file:

As we will see, the sole issue that modified within the build output was the CSS bundle, all the remaining files area unit unchanged aside from index.html (where the new bundle is being loaded).

By using above described points we can simply turn our angular application into PWA.


---------------------------------------------------------------------------------------------------------------------