workbox-recipes

What is workbox-recipes?

The workbox-recipes npm package provides pre-configured, common service worker strategies and behaviors for web applications using Workbox. It simplifies the implementation of caching, offline functionality, and other progressive web app (PWA) features.

What are workbox-recipes's main functionalities?

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();

Other packages similar to workbox-recipes

sw-toolbox

sw-toolbox offers various service worker tools for caching and managing requests similar to workbox-recipes. However, it is less modular and not actively maintained as Workbox, which includes workbox-recipes.

sw-precache

sw-precache is a tool for generating service worker code that precaches resources. It is similar to workbox-recipes in providing offline capabilities but does not offer as extensive configuration options or runtime caching strategies.

README

This module's documentation can be found at https://developers.google.com/web/tools/workbox/modules/workbox-recipes