Converting Angular App to PWA:
In this section, we will turn an online-only angular application into an offline available one by adding a service worker and as you will see this is super easy to do with Angular and I will show you how to turn into such an application and how you can then also configure it to fully meet your needs.
We will start with a very simple default angular application which is generated using ng new project-name command. obviously, it is a very simple not too exciting angular app. it is rendering a default Angular Application home page. Now if we inspect this app in Chrome, go to the application tab, and turn on the offline mode this means we are online but this app is in offline mode but it will simulate that we got no internet connection. if we reload the page we will get the error page but if you go online we will get the content from the browser.
Create Simple Angular Application:
To create an initial angular application run the following command.
$ ng new project-name
run the app using the following command.
$ ng serve
this will run the app at http://localhost:4200
Service Worker:
JavaScript runs in a single thread that means our web application which can consist of multiple pages or in the case of angular with one page only app (SPA: Single Page Application) often uses JavaScript. And JavaScript has features to still handle asynchronous code and not block the execution of other code. JavaScript and the browser also offer us to run an additional threat, we can run a web worker and special form of service worker on average.
This service worker is decoupled from the HTML pages this means that it will continue to run in the background therefore it provides advanced things like push notifications. It can listen to all outgoing network requests for example if you are fetching the assets of the CSS code for javascript anything and catch the response in the cache storage and return the cached responses back to the webpage. This is how service-workers work.
And this service worker does not work with ng serve and it will only work with localhost or HTTPS server. If you're working with the angular app then we need to take a build to take advantage of PWA.
To set up the angular service worker in your project use the CLI command In the project folder.
$ ng add @angular/pwa
The preceding command completes the following actions.
It adds the add @angular/service-worker package in the Project
Enables the service worker support in the CLI.
Imports and registers the service worker in the application module.
Includes a link to add the manifest.webmanifest file and add some meta tag for theme color in index.html.
Install icons files to support the PWA.
Creates the ngsw-config.json service worker configuration file which specifies the caching behavior and other settings.
Now it's time to build the project.
To build the app run the following CLI command:
$ ng build
Serving with http-server:
Because ng serve does not work with the service-worker so we must use http-server or angular-http-server to serve the project locally so here we are using the http-server.
To start with http-server run following command:
$ http-server -p 8080 -c-1 dist/<project-name>
After running this command this will point your browser at http://localhost:8080.
initially, it will load normally. If you are not using HTTPS the service worker will only be registered when accessing the application on localhost.
 ?){kind=link}
0 Comments