StaleWhileRevalidate.mjs 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. /*
  2. Copyright 2018 Google LLC
  3. Use of this source code is governed by an MIT-style
  4. license that can be found in the LICENSE file or at
  5. https://opensource.org/licenses/MIT.
  6. */
  7. import {assert} from 'workbox-core/_private/assert.mjs';
  8. import {cacheNames} from 'workbox-core/_private/cacheNames.mjs';
  9. import {cacheWrapper} from 'workbox-core/_private/cacheWrapper.mjs';
  10. import {fetchWrapper} from 'workbox-core/_private/fetchWrapper.mjs';
  11. import {getFriendlyURL} from 'workbox-core/_private/getFriendlyURL.mjs';
  12. import {logger} from 'workbox-core/_private/logger.mjs';
  13. import {WorkboxError} from 'workbox-core/_private/WorkboxError.mjs';
  14. import {messages} from './utils/messages.mjs';
  15. import {cacheOkAndOpaquePlugin} from './plugins/cacheOkAndOpaquePlugin.mjs';
  16. import './_version.mjs';
  17. /**
  18. * An implementation of a
  19. * [stale-while-revalidate]{@link https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#stale-while-revalidate}
  20. * request strategy.
  21. *
  22. * Resources are requested from both the cache and the network in parallel.
  23. * The strategy will respond with the cached version if available, otherwise
  24. * wait for the network response. The cache is updated with the network response
  25. * with each successful request.
  26. *
  27. * By default, this strategy will cache responses with a 200 status code as
  28. * well as [opaque responses]{@link https://developers.google.com/web/tools/workbox/guides/handle-third-party-requests}.
  29. * Opaque responses are are cross-origin requests where the response doesn't
  30. * support [CORS]{@link https://enable-cors.org/}.
  31. *
  32. * If the network request fails, and there is no cache match, this will throw
  33. * a `WorkboxError` exception.
  34. *
  35. * @memberof workbox.strategies
  36. */
  37. class StaleWhileRevalidate {
  38. /**
  39. * @param {Object} options
  40. * @param {string} options.cacheName Cache name to store and retrieve
  41. * requests. Defaults to cache names provided by
  42. * [workbox-core]{@link workbox.core.cacheNames}.
  43. * @param {Array<Object>} options.plugins [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
  44. * to use in conjunction with this caching strategy.
  45. * @param {Object} options.fetchOptions Values passed along to the
  46. * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
  47. * of all fetch() requests made by this strategy.
  48. * @param {Object} options.matchOptions [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)
  49. */
  50. constructor(options = {}) {
  51. this._cacheName = cacheNames.getRuntimeName(options.cacheName);
  52. this._plugins = options.plugins || [];
  53. if (options.plugins) {
  54. let isUsingCacheWillUpdate =
  55. options.plugins.some((plugin) => !!plugin.cacheWillUpdate);
  56. this._plugins = isUsingCacheWillUpdate ?
  57. options.plugins : [cacheOkAndOpaquePlugin, ...options.plugins];
  58. } else {
  59. // No plugins passed in, use the default plugin.
  60. this._plugins = [cacheOkAndOpaquePlugin];
  61. }
  62. this._fetchOptions = options.fetchOptions || null;
  63. this._matchOptions = options.matchOptions || null;
  64. }
  65. /**
  66. * This method will perform a request strategy and follows an API that
  67. * will work with the
  68. * [Workbox Router]{@link workbox.routing.Router}.
  69. *
  70. * @param {Object} options
  71. * @param {Request} options.request The request to run this strategy for.
  72. * @param {Event} [options.event] The event that triggered the request.
  73. * @return {Promise<Response>}
  74. */
  75. async handle({event, request}) {
  76. return this.makeRequest({
  77. event,
  78. request: request || event.request,
  79. });
  80. }
  81. /**
  82. * This method can be used to perform a make a standalone request outside the
  83. * context of the [Workbox Router]{@link workbox.routing.Router}.
  84. *
  85. * See "[Advanced Recipes](https://developers.google.com/web/tools/workbox/guides/advanced-recipes#make-requests)"
  86. * for more usage information.
  87. *
  88. * @param {Object} options
  89. * @param {Request|string} options.request Either a
  90. * [`Request`]{@link https://developer.mozilla.org/en-US/docs/Web/API/Request}
  91. * object, or a string URL, corresponding to the request to be made.
  92. * @param {FetchEvent} [options.event] If provided, `event.waitUntil()` will
  93. * be called automatically to extend the service worker's lifetime.
  94. * @return {Promise<Response>}
  95. */
  96. async makeRequest({event, request}) {
  97. const logs = [];
  98. if (typeof request === 'string') {
  99. request = new Request(request);
  100. }
  101. if (process.env.NODE_ENV !== 'production') {
  102. assert.isInstance(request, Request, {
  103. moduleName: 'workbox-strategies',
  104. className: 'StaleWhileRevalidate',
  105. funcName: 'handle',
  106. paramName: 'request',
  107. });
  108. }
  109. const fetchAndCachePromise = this._getFromNetwork({request, event});
  110. let response = await cacheWrapper.match({
  111. cacheName: this._cacheName,
  112. request,
  113. event,
  114. matchOptions: this._matchOptions,
  115. plugins: this._plugins,
  116. });
  117. let error;
  118. if (response) {
  119. if (process.env.NODE_ENV !== 'production') {
  120. logs.push(`Found a cached response in the '${this._cacheName}'` +
  121. ` cache. Will update with the network response in the background.`);
  122. }
  123. if (event) {
  124. try {
  125. event.waitUntil(fetchAndCachePromise);
  126. } catch (error) {
  127. if (process.env.NODE_ENV !== 'production') {
  128. logger.warn(`Unable to ensure service worker stays alive when ` +
  129. `updating cache for '${getFriendlyURL(request.url)}'.`);
  130. }
  131. }
  132. }
  133. } else {
  134. if (process.env.NODE_ENV !== 'production') {
  135. logs.push(`No response found in the '${this._cacheName}' cache. ` +
  136. `Will wait for the network response.`);
  137. }
  138. try {
  139. response = await fetchAndCachePromise;
  140. } catch (err) {
  141. error = err;
  142. }
  143. }
  144. if (process.env.NODE_ENV !== 'production') {
  145. logger.groupCollapsed(
  146. messages.strategyStart('StaleWhileRevalidate', request));
  147. for (let log of logs) {
  148. logger.log(log);
  149. }
  150. messages.printFinalResponse(response);
  151. logger.groupEnd();
  152. }
  153. if (!response) {
  154. throw new WorkboxError('no-response', {url: request.url, error});
  155. }
  156. return response;
  157. }
  158. /**
  159. * @param {Object} options
  160. * @param {Request} options.request
  161. * @param {Event} [options.event]
  162. * @return {Promise<Response>}
  163. *
  164. * @private
  165. */
  166. async _getFromNetwork({request, event}) {
  167. const response = await fetchWrapper.fetch({
  168. request,
  169. event,
  170. fetchOptions: this._fetchOptions,
  171. plugins: this._plugins,
  172. });
  173. const cachePutPromise = cacheWrapper.put({
  174. cacheName: this._cacheName,
  175. request,
  176. response: response.clone(),
  177. event,
  178. plugins: this._plugins,
  179. });
  180. if (event) {
  181. try {
  182. event.waitUntil(cachePutPromise);
  183. } catch (error) {
  184. if (process.env.NODE_ENV !== 'production') {
  185. logger.warn(`Unable to ensure service worker stays alive when ` +
  186. `updating cache for '${getFriendlyURL(request.url)}'.`);
  187. }
  188. }
  189. }
  190. return response;
  191. }
  192. }
  193. export {StaleWhileRevalidate};