Boost Web Site with Service Worker – Part 3

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 1      << Part 2      >> Part 4      >> Azure      >> O365      Download code

In first two parts we have seen information about Service Worker like why should we use it and how it works. If you have not yet seen first two parts, i suggest you first have a look at them.

Assuming you are well aware of the concepts of Service Worker, lets move ahead with implementation.

Implementation of Service Worker

I have created a small demo site which would help you understand the flow of implementation of service worker.

Structure of Web Site

Following is the site structure in IIS.

/Images
/js
indexA.html
indexB.html
/sw.js

 

Service Worker Script

In this example service worker script is  file sw.js located at the root folder, it controls html pages, Images folder and JS folder from within root folder.

File: sw.js

this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('ice').then(function(cache) {
return cache.addAll([
'/images/Desert.jpg'
]);
})
)
});
this.addEventListener('activate', function(event) {
// You're good to go!
});
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(cachedResponse) {
return cachedResponse || fetch(event.request);
})
);
});

 

Register Service Worker

now you have service worker script, you need to register for a service worker, store file myappws.js is used to register to service worker, saved under js folder.

File: myappsws.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js').then(function(reg) {       
  }).catch(function(err) {
    console.log('Error!', err);
  });
}

 

Create HTML pages

Create two html pages under root folder, will use these pages for navigation and testing scenarios.

File: IndexA.html

<html>
<head>
        <script src="js/myappws.js" type="text/javascript"></script>
<script src="sw.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<img src="images/Chrysanthemum.jpg" />  
<a href="indexB.html">Go to B</a>
</div>
</div>
</body>
</html>

 

File: IndexB.html:

<html>
<head>
        <script src="js/myappws.js" type="text/javascript"></script>
<script src="sw.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
            <img src="images/Jellyfish.jpg" />
       <a href="indexA.html">Go to A</a>
</div>
</div>
</body>
</html>

now we are done with the code and web server settings, next is to test the application working with service worker.

you can either right click on the indexA.html page from within IIS or navigate to page using browser.

in next part, will see how to test application step by step in chrome browser.

 

<< Part 1      << Part 2      >> 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 *