OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 <link rel="import" href="../polymer/polymer.html"> |
| 10 |
| 11 <script> |
| 12 /** |
| 13 * The `<platinum-sw-fetch>` element creates custom [`fetch` event](https://sl
ightlyoff.github.io/ServiceWorker/spec/service_worker/#fetch-event-section) |
| 14 * handlers for given URL patterns. Possible use cases include: |
| 15 * |
| 16 * - Using a special caching strategy for specific URLs. |
| 17 * - Returning static "fallback" responses instead of network errors when a re
mote API |
| 18 * is unavailable. |
| 19 * |
| 20 * In short, any scenario in which you'd like a service worker to intercept ne
twork |
| 21 * requests and provide custom response handling. |
| 22 * |
| 23 * If you'd like a single caching policy applied to all same-origin requests,
then an alternative |
| 24 * to using `<platinum-sw-fetch>` is to use `<platinum-sw-cache>` with the `de
faultCacheStategy` |
| 25 * property set. |
| 26 * |
| 27 * Under the hood, the [sw-toolbox](https://github.com/googlechrome/sw-toolbox
) library is used |
| 28 * for all the request handling logic. |
| 29 * |
| 30 * `<platinum-sw-fetch>` needs to be a child element of `<platinum-sw-register
>`. |
| 31 * |
| 32 * An example configuration is: |
| 33 * |
| 34 * <platinum-sw-register> |
| 35 * <platinum-sw-import-script href="custom-fetch-handler.js"></platinum-
sw-import-script> |
| 36 * <platinum-sw-fetch handler="customFetchHandler" |
| 37 * path="/(.*)/customFetch"></platinum-sw-fetch> |
| 38 * </platinum-sw-register> |
| 39 * |
| 40 * This implies that there's a `custom-fetch-handler.js` file in the same dire
ctory as the current |
| 41 * page, which defines a `sw-toolbox` compliant |
| 42 * [request handler](https://github.com/googlechrome/sw-toolbox#request-handle
rs) named |
| 43 * `customFetchHandler`. This definition is imported using `<platinum-sw-impor
t-script>`. The |
| 44 * `<platinum-sw-fetch>` element takes care of mapping which request paths are
handled by |
| 45 * `customFetchHandler`. |
| 46 * |
| 47 * Anything not matching the `path` pattern is ignored by `<platinum-sw-fetch>
`, |
| 48 * and it's possible to have multiple `<platinum-sw-fetch>` elements that each
define different |
| 49 * paths and different handlers. The path matching is performed top-down, star
ting with the first |
| 50 * `<platinum-sw-fetch>` element. |
| 51 */ |
| 52 Polymer({ |
| 53 is: 'platinum-sw-fetch', |
| 54 |
| 55 properties: { |
| 56 /** |
| 57 * The name of the request handler to use. This should be a `sw-toolbox`-s
tyle |
| 58 * [request handler](https://github.com/googlechrome/sw-toolbox#request-ha
ndlers). |
| 59 * |
| 60 * `handler` is a `String`, not a `function`, so you're providing the name
of a function, not |
| 61 * the function itself. It can be a function defined in the |
| 62 * [`toolbox` scope](https://github.com/googlechrome/sw-toolbox#built-in-h
andlers) |
| 63 * (e.g. 'networkFirst', 'fastest', 'networkOnly', etc.) or a function def
ined in the |
| 64 * [`ServiceWorkerGlobalScope`](https://slightlyoff.github.io/ServiceWorke
r/spec/service_worker/#service-worker-global-scope), |
| 65 * like a function that is defined in a file that's imported via `platinum
-sw-import-script`. |
| 66 ** |
| 67 * @see {@link https://github.com/GoogleChrome/sw-toolbox#built-in-handler
s} |
| 68 */ |
| 69 handler: String, |
| 70 |
| 71 /** |
| 72 * By default, `path` will only match URLs under the current host (i.e. sa
me-origin requests). |
| 73 * If you'd like to apply `handler` to cross-origin requests, then use `or
igin` to specify |
| 74 * which hosts will match. Setting `origin` is optional. |
| 75 * |
| 76 * `origin` is a `String`, but it is used internally to construct a |
| 77 * [`RegExp` object](https://developer.mozilla.org/en-US/docs/Web/JavaScri
pt/Guide/Regular_Expressions), |
| 78 * which is used for the matching. To properly escape RegExp sequences lik
e `\.`, it's |
| 79 * necessary to add in an extra level of string-escaping first ('\\.'). |
| 80 * |
| 81 * Note that the `origin` value will be matched against the full domain na
me and the protocol. |
| 82 * If you want to match 'http' and 'https', then use 'https?://' at the s
tart of your string. |
| 83 * |
| 84 * Some examples: |
| 85 * - `origin="https?://.+\\.google\\.com"` → a RegExp that matches `http`
or `https` requests |
| 86 * made to any domain, as long as it ends in `.google.com`. |
| 87 * - `origin="https://www\\.example\\.com" → a RegExp that will only match
`https` requests to |
| 88 * one domain, `www.example.com`. |
| 89 * |
| 90 * @see {@link https://github.com/googlechrome/sw-toolbox#toolboxrouterhea
durlpattern-handler-options} |
| 91 */ |
| 92 origin: String, |
| 93 |
| 94 /** |
| 95 * URLs with paths matching `path` will have `handler` applied to them. |
| 96 * |
| 97 * By default, `path` will only match same-origin URLs. If you'd like it t
o match |
| 98 * cross-origin URLs, use `path` in conjunction with `origin`. |
| 99 * |
| 100 * As explained in the |
| 101 * [`sw-toolbox` docs](https://github.com/googlechrome/sw-toolbox#toolboxr
outerheadurlpattern-handler-options), |
| 102 * the URL path matching is done using the [`path-to-regexp`](https://gith
ub.com/pillarjs/path-to-regexp) |
| 103 * module, which is the same logic used in [Express-style routing](http://
expressjs.com/guide/routing.html). |
| 104 * |
| 105 * In practice, you need to always use '/' as the first character of your
`path`, and then |
| 106 * can use '(.*)' as a wildcard. |
| 107 * |
| 108 * Some examples: |
| 109 * - `path="/(.*)/customFetch"` → matches any path that ends with '/custom
Fetch'. |
| 110 * - `path="/customFetch(.*)"` → matches any path that starts with '/custo
mFetch', optionally |
| 111 * followed by other characters. |
| 112 * |
| 113 * @see {@link https://github.com/pillarjs/path-to-regexp} |
| 114 */ |
| 115 path: String |
| 116 }, |
| 117 |
| 118 _getParameters: function(baseURI) { |
| 119 return new Promise(function(resolve) { |
| 120 var params = { |
| 121 importscriptLate: new URL('bootstrap/sw-toolbox-setup.js', baseURI).hr
ef |
| 122 }; |
| 123 if (this.path && this.handler) { |
| 124 params.route = [this.path, this.handler, this.origin]; |
| 125 } |
| 126 resolve(params); |
| 127 }.bind(this)); |
| 128 } |
| 129 }); |
| 130 </script> |
OLD | NEW |