Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Service Workers and the Role They Play in Modern-day Web Apps
  2. 2. Service Workers
  3. 3. What is Service Worker API ➢ A Programmable Network-Proxy ➢ Man-in-the-middle-process ➢ Simply, Independent context Web-script
  4. 4. Service Worker Use Cases Push Notifications Virtual Server Geo Fencing Background Sync
  5. 5. AND YES! OFFLINE BROWSING!!
  6. 6. How Offline Experience Works in Modern Day Web-apps using Service Workers
  7. 7. How Push Notifications Works in Modern Day Web-apps using Service Workers
  8. 8. Web Server GCM OR Some Other Push Service Service Worker Browser Sends Message Awakes Service Worker via Push event Push Notification
  9. 9. 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
  10. 10. Browser Compatibility
  11. 11. Security ________________ HTTPS Only
  12. 12. 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
  13. 13. Service Worker Implementation
  14. 14. Service Worker Demo for Offline Cache Experience
  15. 15. 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); }); }
  16. 16. 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
  17. 17. 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’ ]); }) ); });
  18. 18. 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
  19. 19. 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); } })); }) ); });
  20. 20. 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); }) ); });
  21. 21. 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
  22. 22. Service Worker Demo for Push Notification
  23. 23. Uses An active Service Worker
  24. 24. 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 }
  25. 25. 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
  26. 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 } This object will subscribe to Push API
  27. 27. Get Subscription
  28. 28. Get Subscription registration.pushManager.getSubscription() .then(function(subscription) { if (subscription) { } });
  29. 29. Get Subscription registration.pushManager.getSubscription() .then(function(subscription) { if (subscription) { } }); User is already subscribed
  30. 30. Subscribe
  31. 31. Subscribe registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: UInt8array Key }) .then(function(subscription) { }) .catch(function(err) { });
  32. 32. 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.
  33. 33. Push Event
  34. 34. Push Event self.addEventListener('push', function(event) { event.waitUntil( self.registration.showNotification(Title, { body: Body, icon: Icon }) ); });
  35. 35. What future holds for Service Workers Chrome Extensions Support Background Periodic sync Browser Support and API Stability

×