Introduction
Service worker is a script that runs in the web browser and manages caching for an application. It works as a network proxy. It intercept all outgoing HTTP requests made by the application and can choose how to respond to them.For example, they can query a local cache and deliver a cached response if one is available. Here the proxy includes HTML references and initial request to index.html along with the API calls. Unlike the other scripts that make up an application, It is preserved after the user closes the tab. The next time that browser loads the application, it loads first, and can intercept every request for resources to load the application.
Its implementation is there since the angular V5 has been introduced. It is designed to optimize the end user experience of using an application over a slow or unreliable network connection, while also minimizing the risks of serving outdated content.
Angular service worker follows these guidelines
- Installing a native programme is similar to caching an application. All files are updated simultaneously, and the application is cached as a single entity.
- The files in an application that is now running remain unchanged. It does not appear to be receiving files that are cached from a more recent version—files that are probably incompatible.
- Users view the most recent completely cached version of the application when they reload it. The most recent cached code loads in new tabs.
- Soon after changes are published, updates take place in the background. The application’s previous version is used until an update is installed and prepared.
- It conserves bandwidth when possible. Resources are only downloaded if they’ve changed.
It loads a manifest file from the server in order to support these behaviours.The file, called as ngsw.json.The manifest’s contents change when an application update is deployed, alerting the service worker to the need to download and cache a new version of the application. This manifest is produced from the ngsw-config.json configuration file, which is created via the CLI.
It is simple to install the Angular service worker by just providing a NgModule. This registers it with the browser and opens up a few services for injection that may be used to control and interact with it. For instance, an application can request that it monitor the server for updates or request to be alerted when a new update becomes available.
Prerequisites
Use the most recent versions of Angular and the Angular CLI to take advantage of all the features available to Angular service workers.
The application needs to be visited over HTTPS, not HTTP, in order for it to register. When a page is served via an unsecure connection, browsers ignore service workers. The reason for this is that because service workers are highly influential, extra caution must be taken to make sure the script has not been altered.
There is one exception to this rule: browsers do not need a secure connection to view an application hosted on localhost, which simplifies local development.
Browser support
Your application has to run on a web browser that supports service workers generally in order to take advantage of the Angular service worker. The most recent versions of Chrome, Firefox, Edge, Safari, Opera, UC Browser (Android version), and Samsung Internet are currently supported for service workers. Opera Mini and Internet Explorer do not support service workers.
In the event that a user uses a browser that does not support service workers to access your application, associated functionality like offline cache management and push notifications will not occur and the service worker will not be registered. More particular still:
- The ngsw.json manifest file and the service workers script are not downloaded by the browser.
- Active communication attempts, like calling SwUpdate.checkForUpdate(), result in promises that are refused.
- Related services’ observable events, like SwUpdate.available, are not triggered.
It is strongly advised that you make sure your application functions even in the absence of browser support for service workers. An unsupported browser will nevertheless report errors if it detects an attempt by the application to communicate with the service worker, even if it will ignore service workers caching. For instance, executing SwUpdate.Rejected promises are returned by checkForUpdate(). Use SwUpdate.isEnabled to see if the Angular service workers is activated in order to prevent such an error.
Visit More
Understand the RxJS in Angular
