workbox-recipes

Offline Page

This feature allows you to specify fallback pages or images when the network is unavailable. The code sample shows how to set up offline fallbacks for both pages and images.

import { offlineFallback } from 'workbox-recipes';

offlineFallback({
  pageFallback: '/offline.html',
  imageFallback: '/static/images/offline.jpg'
});

Static Resource Caching

Enables caching for static resources such as CSS and JavaScript files. The code sample demonstrates pre-caching specific URLs on service worker installation.

import { staticResourceCache } from 'workbox-recipes';

staticResourceCache({
  warmupUrls: ['/styles/main.css', '/scripts/main.js']
});

Google Fonts Caching

Provides a simple method to cache Google Fonts used on your web pages, enhancing performance and reducing data usage.

import { googleFontsCache } from 'workbox-recipes';

googleFontsCache();