Service workers and the role they play in modern day web apps

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

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

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

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

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

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

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

Security
________________
HTTPS Only

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

Service Worker Demo for
Offline Cache Experience

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);
});
}

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

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’
]);
})
);
});

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

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);
}
}));
})
);
});

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);
})
);
});

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

Service Worker Demo for
Push Notification

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
}

Register
registration = reg;
})
return;
});
} else {
// aren't supported
}
Browser must support Service
Worker and Push API

Register
registration = reg;
})
return;
});
} else {
// aren't supported
}
This object will subscribe to
Push API

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

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

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

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

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

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

Service workers and the role they play in modern day web apps

More Related Content

What's hot

Similar to Service workers and the role they play in modern day web apps

Recently uploaded

Service workers and the role they play in modern day web apps