Create React App中Service Worker相关问题：自定义离线页与默认配置

Great questions! Let's break this down step by step since you're new to Service Workers and PWAs with Create React App (CRA):

1. CRA's Default Service Worker: Does it Cache the App Shell? #

By default, CRA enables a production-ready Service Worker (powered by Workbox) when you run npm run build—it’s disabled in development mode to avoid caching headaches while you’re actively coding.

This default Service Worker does cache your app shell: that includes your main index.html, bundled JS/CSS files, and static assets like images, fonts, and icons from your build. Workbox handles precaching these resources automatically, so they’ll be available offline after the user’s first visit to your app.

2. How to Create a Custom Offline Page in CRA #

You can set up a custom offline page without ejecting, using CRA’s built-in support for overriding the default Service Worker. Here’s how:

Step 1: Create an Offline Page #

First, make a static offline.html file in your public directory (you can also generate it from a React component if you want dynamic content). For a simple static version:

<!-- public/offline.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Offline</title>
  <style>
    body { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: Arial, sans-serif; margin: 0; }
    .offline-container { text-align: center; padding: 2rem; }
    h1 { color: #333; }
    p { color: #666; }
  </style>
</head>
<body>
  <div class="offline-container">
    <h1>Oops, You're Offline!</h1>
    <p>Please check your internet connection and try again later.</p>
  </div>
</body>
</html>

Step 2: Customize the Service Worker #

Create a src/service-worker.js file (CRA will detect this and use it instead of the default). Use Workbox utilities to precache assets and handle offline navigation:

// src/service-worker.js
import { precacheAndRoute } from 'workbox-precaching';

// Precache all build-generated assets (including your offline.html)
precacheAndRoute(self.__WB_MANIFEST);

// Handle navigation requests: return offline page if fetch fails
self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => {
          // Return the cached offline page
          return caches.match('/offline.html');
        })
    );
  }
});

Step 3: Test It #

Run npm run build to generate your production build, then serve it with a static server (like npx serve -s build). Once the app loads, disconnect your internet and refresh—you’ll see your custom offline page.

3. Can You Add a Splash Screen and Custom Offline Page Without Ejecting? #

Absolutely! CRA is designed to support these features without needing to eject:

Splash Screen (PWA Launch Screen) #

CRA uses the public/manifest.json file to configure PWA settings, including the splash screen. Update this file with the required fields:

// public/manifest.json
{
  "name": "My Awesome PWA",
  "short_name": "MyPWA",
  "start_url": "/",
  "display": "standalone", // Makes the app look like a native app
  "background_color": "#f5f5f5", // Splash screen background color
  "theme_color": "#2196F3", // Browser toolbar color
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Add your icon files to public/icons/, and browsers will automatically generate a splash screen using the background_color and your app icons when the PWA is launched from the home screen.

Custom Offline Page #

As covered in section 2, you can implement this by adding a custom src/service-worker.js file—no eject required. CRA integrates with Workbox under the hood to handle your custom logic seamlessly.

内容的提问来源于stack exchange，提问作者Balaji S