Service workers have greatly improved the experience of web apps by providing offline access to pages, caching data, background sync and other native app-like features. Nowadays, Progressive Web Apps are working together with service workers to provide the users better performance and experience than a typical web app. But service worker’s power doesn’t just stop at giving offline experience and background notifications. They can be used in areas ranging from request deferring to the virtual server.

1. Service Workers and the Role
They Play in Modern-day Web
Apps

2. Service Workers

3. What is Service Worker API
➢ A Programmable Network-Proxy
➢ Man-in-the-middle-process
➢ Simply, Independent context Web-script

4. Service Worker Use
Cases
Push Notifications
Virtual Server
Geo Fencing
Background Sync

5. AND YES!
OFFLINE
BROWSING!!

6. How Offline Experience Works in
Modern Day Web-apps using Service
Workers

8. How Push Notifications Works in
Modern Day Web-apps using Service
Workers

9. Web Server GCM OR Some Other
Push Service
Service Worker
Browser
Sends
Message
Awakes Service
Worker via Push
event
Push
Notification

10. Performance
Boost in Web
Apps by using
Service Worker
Always Usable Site
Native App Like Features
Quick Request Handling
Content finds User
Instead of other way Around

11. Browser Compatibility

12. Security
________________
HTTPS Only

13. Rise of Service
Workers over
App Cache API
No Assumption of what app will cache.
Granular control over the script, i.e,
service worker.
Cached assets first approach in for
apps.
No assumption what App will Cache
Granular control over the script via Service Worker
Cached-asset-first approach for Web Apps

14. Service Worker
Implementation

16. Service Worker Demo for
Offline Cache Experience

17. Registration
Starts installation process of script in background of browser
if ('serviceWorker' in navigator) {
// registering the service worker file
navigator.serviceWorker.register('./service-worker.js', {
scope: './'
}).then(function (reg) {
console.log('Service Worker registered successfully!');
}).catch(function (err) {
console.log('Service Worker failed to register', err);
});
}

18. Registration
Starts installation process of script in background of browser
if ('serviceWorker' in navigator) {
// registering the service worker file
navigator.serviceWorker.register('./service-worker.js', {
scope: './'
}).then(function (reg) {
console.log('Service Worker registered successfully!');
}).catch(function (err) {
console.log('Service Worker failed to register', err);
});
}
Register
Service Worker

19. Installation
● Caching of files
● Recursive process
self.addEventListener('install', function (event) {
event.waitUntil(
// opens cache
// caches is an object which is available inside service-worker
caches.open(cacheVersion = 1).then(function (cache) {
return cache.addAll([
‘your_files_to_cache’
]);
})
);
});

20. Installation
● Caching of files
● Recursive process
self.addEventListener('install', function (event) {
event.waitUntil(
// opens cache
// caches is an object which is available inside service-worker
caches.open(cacheVersion = 1).then(function (cache) {
return cache.addAll([
‘your_files_to_cache’
]);
})
);
});
All the files you want to
add in cache, like css
and font files

21. Activation
Delete old cache when installing new service worker, i.e, different version
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys().then(function(cachedFiles) {
return Promise.all(cachedFiles.map(function(cacheFile) {
// everytime a cache version changes, old files are removed from cache
if (cacheFile !== name) {
return caches.delete(cacheFile);
}
}));
})
);
});

22. Fetch
Returns cached response after looking at request, if not matched, then make a
fetch request to network.
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request);
})
);
});

23. Fetch
Returns cached response after looking at request, if not matched, then make a
fetch request to network.
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request);
})
);
});
Every API hit will come here
before going to Server

24. Service Worker Demo for
Push Notification

25. Uses An active
Service Worker

26. Register
Registers a Service Worker
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('software-worker.js')
.then(function(reg) {
registration = reg;
})
.catch(function(error) {
return;
});
} else {
// Well Service Worker or Push Notifications
// aren't supported
// yet in your browser
}

27. Register
Registers a Service Worker
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('software-worker.js')
.then(function(reg) {
registration = reg;
})
.catch(function(error) {
return;
});
} else {
// Well Service Worker or Push Notifications
// aren't supported
// yet in your browser
}
Browser must support Service
Worker and Push API

28. Register
Registers a Service Worker
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('software-worker.js')
.then(function(reg) {
registration = reg;
})
.catch(function(error) {
return;
});
} else {
// Well Service Worker or Push Notifications
// aren't supported
// yet in your browser
}
This object will subscribe to
Push API

29. Get
Subscription

30. Get
Subscription
registration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
}
});

31. Get
Subscription
registration.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
}
});
User is already
subscribed

32. Subscribe

33. Subscribe
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: UInt8array Key
})
.then(function(subscription) {
})
.catch(function(err) {
});

34. Subscribe
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: UInt8array Key
})
.then(function(subscription) {
})
.catch(function(err) {
});
UserVisibleOnly can
only be true, otherwise
browser will throw
error.

35. Push Event

36. Push Event
self.addEventListener('push', function(event) {
event.waitUntil(
self.registration.showNotification(Title, {
body: Body,
icon: Icon
})
);
});

38. What future
holds for Service
Workers
Chrome Extensions Support
Background Periodic sync
Browser Support and API
Stability