Boost Web Site with Service Worker – Part 1

Pankaj Salunkhe

Pankaj Salunkhe

Technical Specialist at CG
Microsoft Certified Solution expert in SharePoint and O365 with 9+ years of experience.

write to admin@sharecareinspire.com for contribution
Pankaj Salunkhe

Latest posts by Pankaj Salunkhe (see all)

>> Part 2      >> Part 3      >> Part 4       >> Azure      >> O365      Download code

 

This article i am writing with the help my other two friends and full stack experts Pankaj and Kapil.

Introduction

Enhanced performance, Rich offline experiences, periodic background syncs, push notifications functionality that would normally require a native application same features are coming to the web.

Service workers provide the technical foundation that all these features rely on.

What is a Service Worker?

A service worker is a script that your browser runs in the background, separate from a web page.

In the future, service workers will support other things like periodic sync or the use of GPS or RFID technology, to enable software to trigger a response when a mobile device enters or leaves a particular area.

The core feature discussed in this tutorial is the ability to intercept and handle network requests, including programmatically managing a cache of responses.

Credits: Service Worker an introduction

Why Service Worker?

This is such an exciting API is that improve performance and  allows you to support offline experiences, giving developers complete control over the experience.

One problem that web users suffer with is loss of connectivity. There have been various attempts to create technologies to solve this problem, as our offline page shows, and some of the issues have been solved. But the problem is that there still isn’t a good overall control mechanism for asset caching and custom network requests.

 

Following few benefits service worker gives.

Performance Benefit

One of the most significant benefits of service workers from a performance perspective is, ability to proactively control the caching of assets. You can cache your assets local to user, web application that can cache all of its necessary resources loads substantially faster resulting happy visitors.

Enable Offline Site

using service worker, chrome creates a local cache of all the web pages you visit. If you visit any of these web pages again without an Internet connection, chrome will let you load a previous copy of the web page from the cache.

Note: This feature works on Chrome for Windows, Mac, Linux, Chrome OS and Android.

Related terms

JavaScript is a single-threaded environment, which means that multiple scripts cannot run at the same time. Workers provide a simple way to run scripts in background threads.

Dedicated Worker:

Dedicated workers use message-port objects behind the scenes, and thus support all the same features, such as sending structured data, transferring binary data, and transferring other ports.

A dedicated worker is tied to its main connection and cannot post messages to other scripts or workers,  dedicated workers are not easily capable of handling many concurrent secure long running queries.

Shared Worker

Shared workers are identified by the URL of the script used to create it, optionally with an explicit name. The name allows multiple instances of a particular shared worker to be started.

Service Worker

A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web page/site it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations, the most obvious one being when the network is not available.

 

>> Part 2      >> Part 3      >> Part 4       >> Azure      >> O365      Download code


Check Articles From Categories      Health and Parenting      Inspiring Stories      Technology      Microsoft Azure      SharePoint O365

Leave a Reply

Your email address will not be published. Required fields are marked *