workbox-strategies#CacheFirst JavaScript Examples

The following examples show how to use workbox-strategies#CacheFirst. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: service-worker.js    From Queen with MIT License 6 votes vote down vote up 
registerRoute(
  new RegExp(getUrlRegex(self.location.origin)),
  new CacheFirst({
    cacheName: configurationCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);
Example #2
Source File: service-worker.js    From SauceKudasai with MIT License 6 votes vote down vote up 
// An example runtime caching route for requests that aren't handled by the
// precache, in this case same-origin .png requests like those from in public/
registerRoute(
	// Add in any other file extensions or routing criteria as needed.
	({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'), // Customize this strategy as needed, e.g., by changing to CacheFirst.
	new CacheFirst({
		cacheName: 'images',
		plugins: [
			// Ensure that once this runtime cache reaches a maximum size the
			// least-recently used images are removed.
			new ExpirationPlugin({ maxEntries: 10 }),
		],
	})
);
Example #3
Source File: service-worker.js    From ReactCookbook-source with MIT License 6 votes vote down vote up 
registerRoute(
    ({url}) => url.origin === 'https://fonts.gstatic.com',
    new CacheFirst({
        cacheName: 'fonts',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200],
            }),
            new ExpirationPlugin({
                maxAgeSeconds: 60 * 60 * 7,
                maxEntries: 5
            }),
        ],
    })
);
Example #4
Source File: custom-sw.js    From tclone with MIT License 6 votes vote down vote up 
// images cache first
registerRoute(
  ({ request, url }) =>
    request.destination === "image" &&
    (url.origin === process.env.REACT_APP_API_SERVER ||
      url.origin === process.env.PUBLIC_URL),
  new CacheFirst({
    cacheName: "images",
    plugins: [
      new ExpirationPlugin({
        maxEntries: 20,
        maxAgeSeconds: 2 * 24 * 60 * 60, // 2 Days
      }),
    ],
  })
);
Example #5
Source File: custom-sw.js    From tclone with MIT License 6 votes vote down vote up 
// requests to cors-anywhere proxy, cache-first
registerRoute(
  ({ url }) => url.origin === "https://cors-anywhere.herokuapp.com",
  new CacheFirst({
    cacheName: "previews",
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
      }),
    ],
  })
);
Example #6
Source File: service-worker.js    From pack11ty with MIT License 6 votes vote down vote up 
// Google Analytics
registerRoute(
  ({ request }) =>
    request.url === 'https://www.google-analytics.com/analytics.js',
  new CacheFirst({
    cacheName: 'shell',
    plugins: [
      new ExpirationPlugin({
        maxAgeSeconds: 10 * 24 * 60 * 60, // 10 Days
      }),
    ],
  })
);
Example #7
Source File: sw.js    From gk6x_gui with MIT License 6 votes vote down vote up 
registerRoute(
    new RegExp('\\.(woff|woff2|eot|ttf)(\\?.+)?$'),
    new CacheFirst()
);
Example #8
Source File: sw-template.js    From Pf2eTools with MIT License 5 votes vote down vote up 
/*
this tells workbox to cache fonts, and serve them cache first after first load
this works on the assumption that fonts are static assets and won't change
 */
registerRoute(({request}) => request.destination === "font", new CacheFirst({
	cacheName: "font-cache",
}));
Example #9
Source File: service-worker.js    From todo-pwa with MIT License 5 votes vote down vote up 
registerRoute(
  new RegExp(/\.(?:png|gif|jpg|svg|ico|webp)$/),
  new CacheFirst({
    cacheName: 'image-cache-vue',
  }),
  'GET'
);