{"id":1412,"date":"2016-09-09T15:48:01","date_gmt":"2016-09-09T15:48:01","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1412"},"modified":"2017-01-10T16:50:13","modified_gmt":"2017-01-10T16:50:13","slug":"service-workers-revolution-against-the-network","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network","title":{"rendered":"Service Workers: Revolution Against the Network!"},"content":{"rendered":"<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\">Service Workers<\/a> are one of the most useful yet misunderstood APIs to come to the JavaScript world in years. They open up a whole world of functionality to the web and are an integral part of Progressive Web Apps. Service workers give the web independence from the network and allow you to decide exactly how your app uses the network. They also give the web new powers, such as push notifications, that can be the key to providing an \u201capp-like\u201d experience to users of your PWA. Also, in the near future, service workers will be built into Ionic 2 projects and will be extremely easy to enable in your Ionic 2 apps.<br \/>\n<!--more--><\/p>\n<h3>What exactly is a service worker?<\/h3>\n<p>At the basic level, a service worker is a script that runs independently of your app, meaning it can continue to run after the user closes the app, while providing new, network-based, functionality to your app. This new functionality includes programmatically controllable caching, background sync, and push notifications. Service workers are currently supported in Chrome, Firefox, and Opera and are actively being implemented in Edge.<\/p>\n<h3>Caching<\/h3>\n<p>Most likely, when you first hear about service workers, you&#8217;ll hear about them in the context of caching. They allow you to give your PWA an offline experience by programmatically control caching resources. The older App-Cache API was similar, but was not controllable and only allowed you to list assets you would like cached.<\/p>\n<p>Service workers allow you to implement different types of caching, such as <a href=\"https:\/\/github.com\/GoogleChrome\/samples\/blob\/gh-pages\/service-worker\/basic\/service-worker.js\">pre-caching<\/a> and <a href=\"https:\/\/github.com\/GoogleChrome\/samples\/blob\/gh-pages\/service-worker\/read-through-caching\/service-worker.js\">read-through caching<\/a>. This allows you to build an offline experience for users that is tailored to the functionality your app provides, instead of just a one-size-fits-all experience. For a good example of the offline ability that service workers provide, you can check out our Ionic 2 PWA demo <a href=\"https:\/\/jgw96.github.io\/hodi\/www\/\">Hodi<\/a>, a video chat PWA that will load even when offline or on bad connectivity!<\/p>\n<h3>Other cool things service workers enable<\/h3>\n<p>Service workers also enable other new features that you can add to your PWA, the two most popular of which are the <a href=\"https:\/\/developers.google.com\/web\/updates\/2015\/12\/background-sync?hl=en\">background sync API<\/a> and the <a href=\"https:\/\/developers.google.com\/web\/updates\/2015\/03\/push-notifications-on-the-open-web?hl=en\">web push notifications API<\/a>.<\/p>\n<p>Background sync allows you to \u201csave\u201d an action until a user has connectivity and then fire off that event. An example of this can be found on the <a href=\"https:\/\/jakearchibald-gcm.appspot.com\/\">emojoy<\/a> PWA by <a href=\"https:\/\/twitter.com\/jaffathecake?lang=en\">Jake Archibald<\/a>. If you&#8217;re offline and send a message, the service worker will defer the actual sending of that message until you have regained connectivity.<\/p>\n<p>Web push notifications are a standards-based way to send push notifications from a web app. This is a feature that has been painfully missing from the web for a while, and with service workers, we now have this power! For an example, you can either check out <a href=\"https:\/\/jakearchibald-gcm.appspot.com\/\">emojoy<\/a> or another Ionic 2 PWA demo, <a href=\"https:\/\/anon-chat.herokuapp.com\/index.html\">AnonChat<\/a>. These apps both send push notifications when a new message is received, even when the app is fully closed!<\/p>\n<p>As you can see, service workers enable a whole new level of experiences on the web that allow you to bring your users awesome new functionality. The future of service workers in Ionic is very bright, with our eventual goal being to make it completely painless to enable a service worker for your Ionic 2 PWA. Join the revolution today and make your next Ionic 2 PWA network-independent!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Service Workers are one of the most useful yet misunderstood APIs to come to the JavaScript world in years. They open up a whole world of functionality to the web and are an integral part of Progressive Web Apps. Service workers give the web independence from the network and allow you to decide exactly how [&hellip;]<\/p>\n","protected":false},"author":36,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,33,35],"class_list":["post-1412","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-pwa","tag-service-workers"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Service Workers: Revolution Against the Network! - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Service Workers: Revolution Against the Network!\" \/>\n<meta property=\"og:description\" content=\"Service Workers are one of the most useful yet misunderstood APIs to come to the JavaScript world in years. They open up a whole world of functionality to the web and are an integral part of Progressive Web Apps. Service workers give the web independence from the network and allow you to decide exactly how [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-09T15:48:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-10T16:50:13+00:00\" \/>\n<meta name=\"author\" content=\"Justin Willis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Justinwillis96\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Justin Willis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\"},\"author\":{\"name\":\"Justin Willis\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74\"},\"headline\":\"Service Workers: Revolution Against the Network!\",\"datePublished\":\"2016-09-09T15:48:01+00:00\",\"dateModified\":\"2017-01-10T16:50:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\"},\"wordCount\":552,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Ionic\",\"PWA\",\"service workers\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\",\"url\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\",\"name\":\"Service Workers: Revolution Against the Network! - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2016-09-09T15:48:01+00:00\",\"dateModified\":\"2017-01-10T16:50:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Service Workers: Revolution Against the Network!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74\",\"name\":\"Justin Willis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg\",\"caption\":\"Justin Willis\"},\"sameAs\":[\"https:\/\/x.com\/@Justinwillis96\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/justinwillis\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Service Workers: Revolution Against the Network! - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network","og_locale":"en_US","og_type":"article","og_title":"Service Workers: Revolution Against the Network!","og_description":"Service Workers are one of the most useful yet misunderstood APIs to come to the JavaScript world in years. They open up a whole world of functionality to the web and are an integral part of Progressive Web Apps. Service workers give the web independence from the network and allow you to decide exactly how [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network","og_site_name":"Ionic Blog","article_published_time":"2016-09-09T15:48:01+00:00","article_modified_time":"2017-01-10T16:50:13+00:00","author":"Justin Willis","twitter_card":"summary_large_image","twitter_creator":"@Justinwillis96","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Justin Willis","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network"},"author":{"name":"Justin Willis","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74"},"headline":"Service Workers: Revolution Against the Network!","datePublished":"2016-09-09T15:48:01+00:00","dateModified":"2017-01-10T16:50:13+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network"},"wordCount":552,"commentCount":8,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Ionic","PWA","service workers"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network","url":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network","name":"Service Workers: Revolution Against the Network! - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2016-09-09T15:48:01+00:00","dateModified":"2017-01-10T16:50:13+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/service-workers-revolution-against-the-network#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Service Workers: Revolution Against the Network!"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/55d9972c8b3e5ba54f29b041b8766d74","name":"Justin Willis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/08\/65499728661_017a7b09d0bed667b769_512-150x150.jpg","caption":"Justin Willis"},"sameAs":["https:\/\/x.com\/@Justinwillis96"],"url":"https:\/\/ionic.io\/blog\/author\/justinwillis"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1412"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1412\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}