Hi Friends,
In this section, I am going to discuss changes made in angular 6 towards PWA (Progressive Web APP). Basically, how to make your app PWA compatible. Hence, without wasting time, let’s get started.
Let’s first of all create any angular app say ng new pwa-demo. Here, it dropped following components, the usual ones.
Now, let’s say you need to create this as PWA. Therefore, for that you need to execute ng add @angular/pwa. We can do this by specifying project name also like ng add @angular/pwa –project *project-name*. Later approach is useful, if you are having multiple SPAs in your solution and you want to distribute it application wise in dist folder else former approach is ok. After executing above command, it has changed following things. First of all you can see that 15 files have changed/added.
Now, let’s see what are those. First of all it added ngsw-config.json file.
The ngsw-config.json configuration file specifies which files and data URLs, the Angular service worker should cache and how it should update the cached files and data. It also includes manifest.json file, which basically decides the complete layout, look and feel and behavior of the app. A typical manifest file looks like.
It also modified app.module.ts file. Here, service worker is getting registered.
Also, there has been certain changes in index.html file as well, where manifest link gets linked.
Lastly, it has also dropped few assets of different dimensions like shown below.
Now, let’s see angular.json changes.
Here, Output path has been modified plus manifest.json got also registered as part of assets.
Also, service-worker as part of solution gets enabled after running pwa command.
With these many changes, when I go ahead and build the app using ng build –prod, This should create dist folder something like this.
Here, we can see angular service worker file ngsw-worker.js, which basically picked by app.module.ts file while registration process. Here, another important file to see ngsw.json which gets processed internally by angular. After processing it looks like
Now, one more thing to understand, you can’t test your PWA app using ng-serve. It doesn’t work with that. Hence, in order to test the app, you need to either deploy the same against actual web-server or locally you can test it with http-server or lite-server. Let’s test the same using http-server. Let’s go inside dist/pwa-demo folder and run http-server. This will start on the port 8080.
Therefore, now when I go to http://localhost:8080, it will look like this.
Now, If I see in developer tool under application tab, I can see that my service worker is registered under service workers tab.
The other service worker is from another domain, which I am already running on the machine. Now, If I click on manifest tab, it will come something like
Now, we can add this application as app from right side menu “Add to homescreen” or we can do like
Either way, we will get window like
As soon as you click on install button, this will get installed as app on your machine and automatically launched as well like shown below.
With this, I would like to wrap this discussion. Hopefully, you would have liked this discussion. In coming section, we will discuss same in deep. However, as I said, PWA is just a work-around to have native kind of app. But, this is not mobile app. In my previous blog-post, I compared all the mobile app frameworks. And as per github stars, react is leading by miles. You can refer the discussion here http://bit.ly/react-native-flutter.
Source Code:- https://github.com/rahulsahay19/PWA-Demo
Thanks,
Rahul Sahay
Happy Coding
Also published on Medium.
