You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For even lower friction, if you don't intend to doing anything more fancy than just registering with a default scope, you can instead include the Service Worker Toolbox companion script in your HTML:
25
+
For even lower friction, especially if you don't do anything more fancy than registering with a default scope, you can instead include the Service Worker Toolbox companion script in your HTML:
As currently implemented in Chrome 40+, a service worker must exist at the root of the scope that you intend it to control, or higher. So if you want all of the pages under `/myapp/` to be controlled by the worker, the worker script itself must be served from either `/` or `/myapp/`. The default scope is the containing path of the service worker script.
31
+
As implemented in Chrome 40 or later, a service worker must exist at the root of the scope that you intend it to control, or higher. So if you want all of the pages under `/myapp/` to be controlled by the worker, the worker script itself must be served from either `/` or `/myapp/`. The default scope is the containing path of the service worker script.
32
32
33
33
### Add Service Worker Toolbox to your service worker script
34
34
@@ -39,11 +39,18 @@ importScripts('bower_components/sw-toolbox/sw-toolbox.js'); // Update path to ma
39
39
```
40
40
41
41
## Usage
42
-
Within your service worker file
43
-
```javascript
44
-
// Set up routes from URL patterns to request handlers
A _route_ is a URL pattern and request method associated with a handler. It defines the behaviour for a section of the site. _Routing_ is the process of matching an incoming request with the most appropriate route. To define a route you call the appropriate method on `toolbox.router`.
46
+
47
+
For example, to send `GET` requests for the URL `'/myapp/index.html'` to a handler called `mainHandler()` you would write the following in your service worker file:
-`request` - [Request](https://fetch.spec.whatwg.org/#request) object that triggered the `fetch` event
88
+
-`request` - The [Request](https://fetch.spec.whatwg.org/#request) object that triggered the `fetch` event
77
89
-`values` - Object whose keys are the placeholder names in the URL pattern, with the values being the corresponding part of the request URL. For example, with a URL pattern of `'/images/:size/:name.jpg'` and an actual URL of `'/images/large/unicorns.jpg'`, `values` would be `{size: 'large', name: 'unicorns'}`
78
-
-`options` - the options object that was used when [creating the route](#api)
90
+
-`options` - the [options](#options) passed to one of the [router methods](#methods).
79
91
80
92
The return value should be a [Response](https://fetch.spec.whatwg.org/#response), or a [Promise](http://www.html5rocks.com/en/tutorials/es6/promises/) that resolves with a Response. If another value is returned, or if the returned Promise is rejected, the Request will fail which will appear to be a [NetworkError](https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-NetworkError) to the page that made the request.
81
93
@@ -85,63 +97,68 @@ The return value should be a [Response](https://fetch.spec.whatwg.org/#response)
85
97
86
98
All options can be specified globally via properties of `toolbox.options`.
87
99
Any individual options can be configured on a per-handler basis, via the `Object` passed as the
88
-
third parameter to the `toolbox.router.get(urlPattern, handler, options)`, etc. methods.
100
+
third parameter to `toolbox.router` methods.
89
101
90
102
#### debug [Boolean]
91
-
Determines whether extra information is logged to the browser's `console`.
103
+
Determines whether extra information is logged to the browser's console.
104
+
92
105
_Default_: `false`
93
106
94
107
#### networkTimeoutSeconds [Number]
95
108
A timeout that applies to the `toolbox.networkFirst` built-in handler.
96
109
If `networkTimeoutSeconds` is set, then any network requests that take longer than that amount of time
97
-
will automatically fall back to the cached response if one exists. By default, when
110
+
will automatically fall back to the cached response if one exists. When
98
111
`networkTimeoutSeconds` is not set, the browser's native networking timeout logic applies.
112
+
99
113
_Default_: `null`
100
114
101
115
#### cache [Object]
102
116
Various properties of `cache` control the behavior of the default cache when set via
103
117
`toolbox.options.cache`, or the cache used by a specific request handler.
104
118
105
119
#### cache.name [String]
106
-
The name of [`Cache`](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#cache)
107
-
used to store [`Response`](https://fetch.spec.whatwg.org/#response-class)s. Using a unique name
120
+
The name of the [`Cache`](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#cache)
121
+
used to store [`Response`](https://fetch.spec.whatwg.org/#response-class) objects. Using a unique name
108
122
allows you to customize the cache's maximum size and age of entries.
123
+
109
124
_Default_: Generated at runtime based on the service worker's `registration.scope` value.
110
125
111
126
#### cache.maxEntries [Number]
112
-
The `cache.maxEntries` option can be used to impose a least-recently used cache expiration policy
127
+
Imposes a least-recently used cache expiration policy
113
128
on entries cached via the various built-in handlers. You can use this with a cache that's dedicated
114
129
to storing entries for a dynamic set of resources with no natural limit. Setting `cache.maxEntries` to, e.g.,
115
130
`10` would mean that after the 11th entry is cached, the least-recently used entry would be
116
131
automatically deleted. The cache should never end up growing beyond `cache.maxEntries` entries.
117
132
This option will only take effect if `cache.name` is also set.
118
133
It can be used alone or in conjunction with `cache.maxAgeSeconds`.
134
+
119
135
_Default_: `null`
120
136
121
137
#### cache.maxAgeSeconds [Number]
122
-
The `maxAgeSeconds` option can be used to impose a maximum age for cache entries, in seconds.
138
+
Imposes a maximum age for cache entries, in seconds.
123
139
You can use this with a cache that's dedicated to storing entries for a dynamic set of resources
124
140
with no natural limit. Setting `cache.maxAgeSeconds` to, e.g., `60 * 60 * 24` would mean that any
125
141
entries older than a day would automatically be deleted.
126
142
This option will only take effect if `cache.name` is also set.
127
143
It can be used alone or in conjunction with `cache.maxEntries`.
144
+
128
145
_Default_: `null`
129
146
130
147
### Built-in handlers
131
148
132
-
There are 5 built-in handlers to cover the most common network strategies. For more information about offline strategies see the [Offline Cookbook](http://jakearchibald.com/2014/offline-cookbook/).
149
+
There are five built-in handlers to cover the most common network strategies. For more information about offline strategies see the [Offline Cookbook](http://jakearchibald.com/2014/offline-cookbook/).
133
150
134
151
#### `toolbox.networkFirst`
135
-
Try to handle the request by fetching from the network. If it succeeds, store the response in the cache. Otherwise, try to fulfill the request from the cache. This is the strategy to use for basic read-through caching. Also good for API requests where you always want the freshest data when it is available but would rather have stale data than no data.
152
+
Try to handle the request by fetching from the network. If it succeeds, store the response in the cache. Otherwise, try to fulfill the request from the cache. This is the strategy to use for basic read-through caching. It's also good for API requests where you always want the freshest data when it is available but would rather have stale data than no data.
136
153
137
154
#### `toolbox.cacheFirst`
138
-
If the request matches a cache entry, respond with that. Otherwise try to fetch the resource from the network. If the network request succeeds, update the cache. Good for resources that don't change, or for which you have some other update mechanism.
155
+
If the request matches a cache entry, respond with that. Otherwise try to fetch the resource from the network. If the network request succeeds, update the cache. This option is good for resources that don't change, or have some other update mechanism.
139
156
140
157
#### `toolbox.fastest`
141
158
Request the resource from both the cache and the network in parallel. Respond with whichever returns first. Usually this will be the cached version, if there is one. On the one hand this strategy will always make a network request, even if the resource is cached. On the other hand, if/when the network request completes the cache is updated, so that future cache reads will be more up-to-date.
142
159
143
160
#### `toolbox.cacheOnly`
144
-
Resolve the request from the cache, or fail. Good for when you need to guarantee that no network request will be made - to save battery on mobile, for example.
161
+
Resolve the request from the cache, or fail. This option is good for when you need to guarantee that no network request will be made, for example saving battery on mobile.
145
162
146
163
#### `toolbox.networkOnly`
147
164
Handle the request by trying to fetch the URL from the network. If the fetch fails, fail the request. Essentially the same as not creating a route for the URL at all.
@@ -156,27 +173,27 @@ Handle the request by trying to fetch the URL from the network. If the fetch fai
156
173
Create a route that causes requests for URLs matching `urlPattern` to be resolved by calling `handler`. Matches requests using the GET, POST, PUT, DELETE or HEAD HTTP methods respectively.
157
174
158
175
-`urlPattern` - an Express style route. See the docs for the [path-to-regexp](https://github.com/pillarjs/path-to-regexp) module for the full syntax
159
-
-`handler` - a request handler, as [described above](#request-handlers)
160
-
-`options` - an object containing options for the route. This options object will be available to the request handler. The `origin` option is specific to the route methods, and is an exact string or a Regexp against which the origin of the Request must match for the route to be used.
176
+
-`handler` - a request handler, as [described above](#using-request-handlers)
177
+
-`options` - an object containing options for the route. This options object will be passed to the request handler. The `origin` option is specific to the router methods, and can be either an exact string or a Regexp against which the origin of the Request must match for the route to be used.
Like `toolbox.router.get`, etc., but matches any HTTP method.
164
181
165
182
#### `toolbox.router.default`
166
-
If you set this property to a function it will be used as the request handler for any GET request that does not match a route.
183
+
Takes a function to use as the request handler for any GET request that does not match a route.
167
184
168
185
#### `toolbox.precache(arrayOfURLs)`
169
186
Add each URL in arrayOfURLs to the list of resources that should be cached during the service worker install step. Note that this needs to be called before the install event is triggered, so you should do it on the first run of your script.
170
187
171
188
#### `toolbox.cache(url, options)`
172
-
Causes the resource at `url` to be added to the cache. Returns a Promise. Supports the `debug` and `cache`[global options](#global-options).
189
+
Causes the resource at `url` to be added to the cache and returns a Promise that resolves with void. The `options` parameter supports the `debug` and `cache`[global options](#global-options).
173
190
174
191
#### `toolbox.uncache(url, options)`
175
-
Causes the resource at `url` to be removed from the cache. Returns a Promise. Supports the `debug` and `cache`[global options](#global-options).
192
+
Causes the resource at `url` to be removed from the cache and returns a Promise that resolves to true if the cache entry is deleted. The `options` parameter supports the `debug` and `cache`[global options](#global-options).
176
193
177
194
## Support
178
195
179
-
If you’ve found an error in this library, please file an issue: https://github.com/GoogleChrome/sw-toolbox/issues
196
+
If you’ve found an error in this library, please file an issue at: https://github.com/GoogleChrome/sw-toolbox/issues.
180
197
181
198
Patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub.
0 commit comments