Skip to content

Commit c4091c2

Browse files
committed
Merge pull request GoogleChromeLabs#55 from jpmedley/master
Copy edit the README.md file.
2 parents bb5658f + 4f858ff commit c4091c2

File tree

1 file changed

+45
-28
lines changed

1 file changed

+45
-28
lines changed

README.md

+45-28
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@ From your registering page, register your service worker in the normal way. For
2222
navigator.serviceWorker.register('my-service-worker.js');
2323
```
2424

25-
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:
2626

2727
```html
2828
<script src="/path/to/sw-toolbox/companion.js" data-service-worker="my-service-worker.js"></script>
2929
```
3030

31-
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.
3232

3333
### Add Service Worker Toolbox to your service worker script
3434

@@ -39,11 +39,18 @@ importScripts('bower_components/sw-toolbox/sw-toolbox.js'); // Update path to ma
3939
```
4040

4141
## Usage
42-
Within your service worker file
43-
```javascript
44-
// Set up routes from URL patterns to request handlers
45-
toolbox.router.get('/myapp/index.html', someHandler);
4642

43+
### Defining Routes
44+
45+
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:
48+
49+
`toolbox.router.get('/myapp/index.html', mainHandler);`
50+
51+
Some other examples follow.
52+
53+
```javascript
4754
// For some common cases Service Worker Toolbox provides a built-in handler
4855
toolbox.router.get('/', toolbox.networkFirst);
4956

@@ -59,23 +66,28 @@ toolbox.router.post('/(.*)', apiHandler, {origin: 'https://api.example.com'});
5966

6067
// Provide a default handler for GET requests
6168
toolbox.router.default = myDefaultRequestHandler;
69+
```
6270

63-
// You can provide a list of resources which will be cached at service worker install time
71+
### Precaching
72+
73+
You can provide a list of resources which will be cached at service worker install time
74+
75+
```javascript
6476
toolbox.precache(['/index.html', '/site.css', '/images/logo.png']);
6577
```
6678

67-
### Using request handlers
68-
A request handler receives three arguments
79+
### Defining Request Handlers
80+
A request handler takes three arguments.
6981

7082
```javascript
7183
var myHandler = function(request, values, options) {
7284
// ...
7385
}
7486
```
7587

76-
- `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
7789
- `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).
7991

8092
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.
8193

@@ -85,63 +97,68 @@ The return value should be a [Response](https://fetch.spec.whatwg.org/#response)
8597

8698
All options can be specified globally via properties of `toolbox.options`.
8799
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.
89101

90102
#### 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+
92105
_Default_: `false`
93106

94107
#### networkTimeoutSeconds [Number]
95108
A timeout that applies to the `toolbox.networkFirst` built-in handler.
96109
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
98111
`networkTimeoutSeconds` is not set, the browser's native networking timeout logic applies.
112+
99113
_Default_: `null`
100114

101115
#### cache [Object]
102116
Various properties of `cache` control the behavior of the default cache when set via
103117
`toolbox.options.cache`, or the cache used by a specific request handler.
104118

105119
#### 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
108122
allows you to customize the cache's maximum size and age of entries.
123+
109124
_Default_: Generated at runtime based on the service worker's `registration.scope` value.
110125

111126
#### 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
113128
on entries cached via the various built-in handlers. You can use this with a cache that's dedicated
114129
to storing entries for a dynamic set of resources with no natural limit. Setting `cache.maxEntries` to, e.g.,
115130
`10` would mean that after the 11th entry is cached, the least-recently used entry would be
116131
automatically deleted. The cache should never end up growing beyond `cache.maxEntries` entries.
117132
This option will only take effect if `cache.name` is also set.
118133
It can be used alone or in conjunction with `cache.maxAgeSeconds`.
134+
119135
_Default_: `null`
120136

121137
#### 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.
123139
You can use this with a cache that's dedicated to storing entries for a dynamic set of resources
124140
with no natural limit. Setting `cache.maxAgeSeconds` to, e.g., `60 * 60 * 24` would mean that any
125141
entries older than a day would automatically be deleted.
126142
This option will only take effect if `cache.name` is also set.
127143
It can be used alone or in conjunction with `cache.maxEntries`.
144+
128145
_Default_: `null`
129146

130147
### Built-in handlers
131148

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/).
133150

134151
#### `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.
136153

137154
#### `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.
139156

140157
#### `toolbox.fastest`
141158
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.
142159

143160
#### `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.
145162

146163
#### `toolbox.networkOnly`
147164
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
156173
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.
157174

158175
- `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.
161178

162179
#### `toolbox.router.any(urlPattern, handler, options)`
163180
Like `toolbox.router.get`, etc., but matches any HTTP method.
164181

165182
#### `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.
167184

168185
#### `toolbox.precache(arrayOfURLs)`
169186
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.
170187

171188
#### `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).
173190

174191
#### `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).
176193

177194
## Support
178195

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.
180197

181198
Patches are encouraged, and may be submitted by forking this project and submitting a pull request through GitHub.
182199

0 commit comments

Comments
 (0)