StaleWhileRevalidate.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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.js';
  8. import { cacheNames } from 'workbox-core/_private/cacheNames.js';
  9. import { cacheWrapper } from 'workbox-core/_private/cacheWrapper.js';
  10. import { fetchWrapper } from 'workbox-core/_private/fetchWrapper.js';
  11. import { getFriendlyURL } from 'workbox-core/_private/getFriendlyURL.js';
  12. import { logger } from 'workbox-core/_private/logger.js';
  13. import { WorkboxError } from 'workbox-core/_private/WorkboxError.js';
  14. import { messages } from './utils/messages.js';
  15. import { cacheOkAndOpaquePlugin } from './plugins/cacheOkAndOpaquePlugin.js';
  16. import './_version.js';
  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 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 module: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 module: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. const isUsingCacheWillUpdate = options.plugins.some((plugin) => !!plugin.cacheWillUpdate);
  55. this._plugins = isUsingCacheWillUpdate ?
  56. options.plugins : [cacheOkAndOpaquePlugin, ...options.plugins];
  57. }
  58. else {
  59. // No plugins passed in, use the default plugin.
  60. this._plugins = [cacheOkAndOpaquePlugin];
  61. }
  62. this._fetchOptions = options.fetchOptions;
  63. this._matchOptions = options.matchOptions;
  64. }
  65. /**
  66. * This method will perform a request strategy and follows an API that
  67. * will work with the
  68. * [Workbox Router]{@link module:workbox-routing.Router}.
  69. *
  70. * @param {Object} options
  71. * @param {Request|string} options.request A 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. const logs = [];
  77. if (typeof request === 'string') {
  78. request = new Request(request);
  79. }
  80. if (process.env.NODE_ENV !== 'production') {
  81. assert.isInstance(request, Request, {
  82. moduleName: 'workbox-strategies',
  83. className: 'StaleWhileRevalidate',
  84. funcName: 'handle',
  85. paramName: 'request',
  86. });
  87. }
  88. const fetchAndCachePromise = this._getFromNetwork({ request, event });
  89. let response = await cacheWrapper.match({
  90. cacheName: this._cacheName,
  91. request,
  92. event,
  93. matchOptions: this._matchOptions,
  94. plugins: this._plugins,
  95. });
  96. let error;
  97. if (response) {
  98. if (process.env.NODE_ENV !== 'production') {
  99. logs.push(`Found a cached response in the '${this._cacheName}'` +
  100. ` cache. Will update with the network response in the background.`);
  101. }
  102. if (event) {
  103. try {
  104. event.waitUntil(fetchAndCachePromise);
  105. }
  106. catch (error) {
  107. if (process.env.NODE_ENV !== 'production') {
  108. logger.warn(`Unable to ensure service worker stays alive when ` +
  109. `updating cache for '${getFriendlyURL(request.url)}'.`);
  110. }
  111. }
  112. }
  113. }
  114. else {
  115. if (process.env.NODE_ENV !== 'production') {
  116. logs.push(`No response found in the '${this._cacheName}' cache. ` +
  117. `Will wait for the network response.`);
  118. }
  119. try {
  120. response = await fetchAndCachePromise;
  121. }
  122. catch (err) {
  123. error = err;
  124. }
  125. }
  126. if (process.env.NODE_ENV !== 'production') {
  127. logger.groupCollapsed(messages.strategyStart('StaleWhileRevalidate', request));
  128. for (const log of logs) {
  129. logger.log(log);
  130. }
  131. messages.printFinalResponse(response);
  132. logger.groupEnd();
  133. }
  134. if (!response) {
  135. throw new WorkboxError('no-response', { url: request.url, error });
  136. }
  137. return response;
  138. }
  139. /**
  140. * @param {Object} options
  141. * @param {Request} options.request
  142. * @param {Event} [options.event]
  143. * @return {Promise<Response>}
  144. *
  145. * @private
  146. */
  147. async _getFromNetwork({ request, event }) {
  148. const response = await fetchWrapper.fetch({
  149. request,
  150. event,
  151. fetchOptions: this._fetchOptions,
  152. plugins: this._plugins,
  153. });
  154. const cachePutPromise = cacheWrapper.put({
  155. cacheName: this._cacheName,
  156. request,
  157. response: response.clone(),
  158. event,
  159. plugins: this._plugins,
  160. });
  161. if (event) {
  162. try {
  163. event.waitUntil(cachePutPromise);
  164. }
  165. catch (error) {
  166. if (process.env.NODE_ENV !== 'production') {
  167. logger.warn(`Unable to ensure service worker stays alive when ` +
  168. `updating cache for '${getFriendlyURL(request.url)}'.`);
  169. }
  170. }
  171. }
  172. return response;
  173. }
  174. }
  175. export { StaleWhileRevalidate };