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. This is the same deck I used in my talk of JSChannel 2017.

1. Service Workers and the Role They Play in Modern-day
Web Apps
By Mukul Jain @mukul1904

2. About Me
Full stack developer at NodeXperts
I have worked on node.js, AWS, meteor, MEAN, angular, d3.js, java and maven so far.
Blogger at Medium
myke11j @mukul1904

3. Modern Day Web-apps
Progressive Web Apps

4. Modern Day Web-apps
PWAs

7. Why PWA when we already have Native Apps?
PWAs can be used without internet
Data Usage
PWAs can be developed using JavaScript
PWAs can be monetized

8. Service Workers

9. What is Service Worker API
● A Programmable Network-Proxy
● Man-in-the-middle-process
○ Can handle every network request made by app
● Promise and Events based
○ Great for Async Operations like registering and caching Assets
● Simply, Independent context Web-script

10. Service Worker Use Cases
Push
Notification
API Logging Virtual
Server
Background
Sync

11. OFFLINE BROWSING!!

12. Browser Compatibility

13. HTTPS Only

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

16. Online

17. Offline

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

19. Sends
Message
Awakes Service
Worker via Push
eventPush
Notification
Google Cloud
Messaging
Service

20. Service Worker code examples

21. Registration
if ('serviceWorker' in navigator) {
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);
});
}
main.js

22. Registration
if ('serviceWorker' in navigator) {
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);
});
}
main.js
serviceWorker.register

23. Registration
if ('serviceWorker' in navigator) {
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);
});
}
main.js
scope: ‘./’

24. Installation
self.addEventListener('install', function (event) {
event.waitUntil(
// caches is an object which is available inside service-worker
caches.open(cacheVersion = 1).then(function (cache) {
return cache.addAll([
‘your_assets_to_cache’
]);
})
);
});
service-worker.js

25. Installation
self.addEventListener('install', function (event) {
event.waitUntil(
// caches is an object which is available inside service-worker
caches.open(cacheVersion = 1).then(function (cache) {
return cache.addAll([([
‘your_assets_to_cache’
]);
})
);
});
service-worker.js
cache.addAll

26. Activation
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys().then(function(cachedFiles) {
return Promise.all(cachedFiles.map(function(cacheFile) {
if (cacheFile !== name) {
return caches.delete(cacheFile);
}
}));
})
);
});
service-worker.js

27. Fetch Event
self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request);
})
);
});
service-worker.js

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

29. Performance boost in Web Apps using
Service Workers

30. An always usable app Quick request handling

31. Better user experience, i.e, content finds user instead of
other way around

32. What future holds for Service Workers

33. Periodic Background syncChrome extension support Browser Support and API
Stability

34. Thank You!
Questions?
@mukul1904