Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Hello Service Workers
3.
Registering a Service Worker
4.
Frequently Asked Questions
4.1.
What is a Progressive Web App?
4.2.
List out some benefits of PWA.
4.3.
Define Service Worker.
4.4.
What is Fetch Event?
4.5.
How to register a service worker?
5.
Conclusion
Last Updated: Mar 27, 2024

Service Workers

Author Prachi Singh
0 upvote

Introduction

Users have expectations from apps to operate on slow network connections or even when offline. Users expect the content they've most recently interacted with, such as media tracks, to be available and reusable at the moment. Users hope the app tells them instead of silently crashing when a request isn't possible. And users wish to do it all steadily without wasting much of their time. As one can see in this approach, Milliseconds make millions; even a 0.2-second improvement in loading capability can improve conversion by up to 20%. In conclusion: users expect PWAs(Progressive Web Apps) to be reliable, and that's why one has service workers.

Hello Service Workers

When an app targets a resource occupied by the service worker's accommodation, including when a user is offline, the service worker intercepts the request, acting as a network proxy. It can then interpret if it should serve the resource from the cache via the Cache Storage API, from the network as usually would happen without a service worker, or create it from a local strategy. This lets users provide a similar experience to a platform app. It can even work entirely offline.

Registering a Service Worker

Before a service worker takes control of the user's page, it must be registered for their PWA. The first time a user comes to our PWA, network requests will be received directly by the server since the service worker is not yet in control of our pages.

After reviewing if the browser supports the Service Worker API, one's PWA can register a service worker. When loaded, the service worker constructs a shop between your PWA and the network, intercepting requests and serving the corresponding responses.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register("/serviceworker.js");
}
You can also try this code with Online Javascript Compiler
Run Code

Frequently Asked Questions

What is a Progressive Web App?

Google initiated the approach of PWA in late 2015. They are web applications    (Websites) but have a similar look and feel to other native mobile apps.

List out some benefits of PWA.

Some of the benefits of PWA are as follows.

  1. Responsive Interface
  2. Cost-Effective
  3. Smaller and Faster
  4. Zero Installation
  5. SEO Advantage

Define Service Worker.

When an app targets a resource occupied by the service worker's accommodation, including when a user is offline, the service worker intercepts the request, acting as a network proxy.

What is Fetch Event?

After a service worker is installed and the user navigates to a different page or refreshes, the service worker will begin to receive fetch events. 

How to register a service worker?

Before a service worker takes control of the user's page, it must be registered for their PWA.

Conclusion

 Congratulations on finishing the blog!! After reading this blog, you will grasp the concept of the Service Workers.

If you are preparing yourself for the top tech companies, don't worry. Coding Ninjas has your back. Visit this link for a well-defined and structured material that will help you provide access to knowledge in every domain.

Happy Learning!!

Live masterclass