├── chrome.png ├── CONTRIBUTING.md └── README.md /chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ireade/awesome-service-worker/HEAD/chrome.png -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Contributions are welcome! 4 | 5 | Please follow the format of the rest of the document. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Service Worker 📡 2 | 3 | > A curated list of useful resources for Service Worker 4 | 5 | > Service Workers are the backbone for creating [offline-first](http://offlinefirst.org/) applications. They sit, conceptually, between the network and the document, giving them the ability to intercept the network requests and provide content for documents, even while offline. 6 | 7 | Inspired by the [awesome](https://github.com/sindresorhus/awesome) list thing. 8 | 9 | ## Table of Contents 10 | 11 | - [Specification](#specification) 12 | - [Support](#support) 13 | - [The API](#the-api) 14 | - [Registering a Service Worker](#registering-a-service-worker) 15 | - [The Service Worker Lifecycle](#the-service-worker-lifecycle) 16 | - [Service Worker Events](#service-worker-events) 17 | - [Articles](articles) 18 | - [Videos](#videos) 19 | - [Talks](#talks) 20 | - [Tools](#tools) 21 | - [Chrome Dev Tools](#chrome-dev-tools) 22 | - [Showcase](#showcase) 23 | - [Contributing](CONTRIBUTING.md) 24 | - [Licence](#licence) 25 | 26 | 27 | 28 | ## Specification 29 | 30 | [W3C Specification](http://www.w3.org/TR/service-workers/) - 31 | 32 | 33 | 34 | > Web Applications traditionally assume that the network is reachable ... HTML documents are loaded over HTTP and traditionally fetch all of their sub-resources via subsequent HTTP requests. **This places web content at a disadvantage versus other technology stacks**. 35 | 36 | > The service worker is designed first to redress this balance by providing a Web Worker context, which can be started by a runtime when navigations are about to occur. This event-driven worker is registered against an origin and a path (or pattern), meaning it can be consulted when navigations occur to that location. **Events that correspond to network requests are dispatched to the worker and the responses generated by the worker may over-ride default network stack behavior**. This puts the service worker, conceptually, between the network and a document renderer, **allowing the service worker to provide content for documents, even while offline**. 37 | 38 | 39 | 40 | 41 | ## Support 42 | 43 | 44 |   | Chrome | Firefox | Safari | IE | Edge | Opera | Opera Mini | Android Browser 45 | ---------------|--------|---------|--------|-----|------|-------|------------|---- 46 | Service Worker | ✅* | ✅* | ❌ | ❌ | ❌ | ✅* | ❌ | ✅* 47 | Promises | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | ❌ | ✅ 48 | 49 | 50 | Not full support yet | *Last updated 7th July 2016* 51 | 52 | For up-to-date details on support see - 53 | 54 | - [Is Service Worker Ready?](https://jakearchibald.github.io/isserviceworkerready/) 55 | - [Can I Use](http://caniuse.com/#feat=serviceworkers) 56 | 57 | 58 | 59 | ## The API 60 | 61 | ### Registering a Service Worker 62 | 63 | Assuming the Service Worker file (called `service-worker.js`) is located in the root directory. 64 | 65 | ```javascript 66 | if ('serviceWorker' in navigator) { 67 | navigator.serviceWorker.register("/service-worker.js") 68 | .then(function(registration) { 69 | console.log('Registration succeeded!', registration); 70 | }) 71 | .catch(function(err) { 72 | console.log('Registration failed!', err); 73 | }); 74 | } 75 | ``` 76 | 77 | *[See W3C Spec](https://www.w3.org/TR/service-workers/#document-context)* 78 | 79 | ### The Service Worker Lifecycle 80 | 81 | The Service Worker can be in one of the following states. 82 | 83 | State | Description 84 | ------|------------- 85 | Parsed | The Service Worker is downloaded and aprsed when the user first visits the page 86 | Installing | If the parsed file is new (or a different version of a previous file), installation is attempted 87 | Installed / Waiting | The Service Worker is installed and waiting to be activated 88 | Activating | The Service Worker is in the process of being activated 89 | Activated | The Service Worker is considered the active worker and has control of the document 90 | Redundant | When a new Service Worker has taken control of the page, the previous one is held as redundant 91 | 92 | *[See W3C Spec](https://www.w3.org/TR/service-workers/#service-worker-state)* 93 | 94 | 95 | 96 | 97 | ### Service Worker Events 98 | 99 | The Service Worker is event driven. There are four events it can listen for. 100 | 101 | Event | Description 102 | ------|-------------- 103 | `install` | Dispatched when the service worker's installing worker changes 104 | `activate` | Dispatched when the service worker's active worker changes 105 | `fetch` | Dispatched when the document attempts a network (fetch) request 106 | `message` | Dispatched when the service worker receives a message, e.g. from the main document via the postMessage API 107 | 108 | *[See W3C Spec](https://www.w3.org/TR/service-workers/#execution-context-events)* 109 | 110 | 111 | 112 | 113 | ## Articles 114 | 115 | - [Introduction to Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) by Matt Guant (1st December 2014) 116 | - [Using Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) by MDN 117 | - [Service Workers Explained](https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md) by slightlyoff 118 | - [Getting Started with Service Workers](https://www.sitepoint.com/getting-started-with-service-workers/) by Ritesh Kumar (19th November 2015) 119 | - [Making a Service Worker](https://www.smashingmagazine.com/2016/02/making-a-service-worker/) by Lyza Danger Gardner on SitePoint (1st February 2016) 120 | - [The Offline Cookbook](https://jakearchibald.com/2014/offline-cookbook/) by Jake Archibald (9th December 2014) 121 | 122 | 123 | ## Videos 124 | 125 | - [How to Setup a Basic Service Worker (with Caching)](https://www.youtube.com/watch?v=BfL3pprhnms) by Ire Aderinokun (9th May 2016) 126 | 127 | 128 | ## Talks 129 | 130 | 131 | - [Progressive Web Apps Summit 2016 (Full Playlist)](https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb) 132 | 133 | 134 | ## Tools 135 | 136 | - [Service Worker Toolbox](https://github.com/GoogleChrome/sw-toolbox) 137 | - [Lighthouse](https://github.com/GoogleChrome/lighthouse) 138 | 139 | 140 | ### Chrome Dev Tools 141 | 142 | 143 | The Service Worker for the current page can be viewed at **Resources > Service Workers** 144 | 145 | ![](chrome.png) 146 | 147 | You can also go to `chrome://serviceworker-internals/` to see all registered Service Workers 148 | 149 | 150 | 151 | 152 | 153 | ## Showcase 154 | 155 | - **Service Worker Example Scripts** ( [Source](https://github.com/lyzadanger/serviceworker-example) ) - Various examples of things you can do with Service Workers (for example, precache, fetch handling, and versioning). 156 | 157 | 158 | 159 | ## Licence 160 | 161 | Licensed under the [Creative Commons CC0 License](https://creativecommons.org/publicdomain/zero/1.0/). 162 | 163 | 164 | 165 | 166 | --------------------------------------------------------------------------------