Service worker enabled Angular Application
Service worker? What’s that..? Why I should add it to my application?
wait wait!! I know you have a lot of questions, we will discuss everything about it in this article.
Let’s think about the scenario you’re in a place with limited access to the internet and if you’ll open any website, the only thing you’ll see is chrome’s dino game (if you’re using google chrome).
What if I’ll say you can still check your website even when you’re offline or have no internet. Yes, It’s possible using a service worker. 😍
What is a Service Worker?
Service Worker is a type of web worker. it is as a client site programmable proxy between your web application & the outside world.
Precisely, It’s essentially a JavaScript file that runs separately from the main browser thread, intercepting network requests, caching or retrieving resources from the cache, and delivering push messages.
As the worker runs separately from the main thread of the application. so, they are independent of the application they are associated with — that says, service worked will run in the background even if you’ve closed the application tab.
What service worker can do?
- Cache network request to improve performance & provide offline content
- Push notification
- Browser push notifications are handled by the service worker - Background Sync
- Store the input when the application is offline and sync it whenever it will be online
The service worker uses the browser’s cache and IndexedDB to store the data. That’s why —
Service Worker only works in secured origin, i.e. HTTPS
How to enable Service worker in an Angular application?
In order to add service worker in your application, first, create an angular application using angular CLI
ng new ServiceWorkerApp
This command will create a basic angular application for you, then use the following command to add service worker package in it —
ng add @angular/pwa
Following are the changes you would be able to see in your project after installation of the service worker package.
Let’s go through the changes one by one and try to understand the changes:
- package.json — Added package for
@angular/pwaand@angular/service-worker - angular.json — added a flag
“serviceWorker”: true
“ngswConfigPath”: “ngsw-config.json”
3. ngsw-config.json — Here we can set all the configurations like which files we want to cache or which API request we need to handle etc.
4. AppModule — inside imports array ServiceWorkerModule is added and which is registering
(‘ngsw-worker.js’, { enabled: environment.production })In our project, there’s no ngsw-worker.js file as of now, but it will be created when we will build the application in the production mode, according to the configuration in ngsw-config.json file.
5. manifest.webmanifest — It contains the configuration of how the browser should handle the application like name, theme, icons, etc.
6. index.html — Added link to manifest.webmanifest file
also, a tag for no javascript.
After these changes, your application will be able to handle static things of your application offline. You can try using offline mode in the developer tool or disconnect the internet of your device.
You can configure it for get and post API's too. We will discuss ngsw-config.json in the next article.
Note:
When you open your website on the browser for the first time, it will install the service worker.
In the second refresh, it will start caching the things as configured.
Only after that, you would be able to see be website in offline mode.
