如何在骰子小游戏中实现无HTTP请求的随机Lottie动画切换且适配PWA？

Hey there! That loading lag from fetching Lottie JSON on every dice roll is definitely a buzzkill for user experience—especially since you're planning a PWA. Let's walk through three solid, PWA-compatible approaches to fix this, so your animations play instantly when the user clicks "Roll Dice".

1. Preload All Lottie Animations On Initial Load #

Since you only have 6 animations (total ~1.9MB, which is totally reasonable for modern web), you can quietly load all of them into memory when the app first loads. This way, when the user clicks to roll, you just grab the cached JSON from memory instead of making a new HTTP request.

Implementation Example: #

// Initialize a cache object to store loaded animations
const lottieCache = {};
const diceFaces = [1, 2, 3, 4, 5, 6];

// Preload all animations when the app starts
async function preloadLotties() {
  try {
    for (const face of diceFaces) {
      const response = await fetch(`/animations/dice-${face}.json`);
      lottieCache[face] = await response.json();
    }
    console.log("All dice animations preloaded and ready!");
  } catch (err) {
    console.error("Failed to preload animations:", err);
  }
}

// Trigger preload once the page is fully loaded
window.addEventListener('load', preloadLotties);

// Use cached animations when rolling the dice
function rollDice() {
  const randomFace = Math.floor(Math.random() * 6) + 1;
  // No HTTP request here—we're using the in-memory cache
  lottie.loadAnimation({
    container: document.getElementById('dice-container'),
    animationData: lottieCache[randomFace],
    renderer: 'svg',
    loop: false,
    autoplay: true
  });
}

PWA Compatibility: #

Pair this with your Service Worker's caching strategy to store the animation files locally after the first visit. This ensures offline users get instant playback too—no network required after the initial load.

2. Embed Lottie JSON Directly in Your App Bundle #

If you want to eliminate HTTP requests entirely (even the initial ones), convert each Lottie JSON file into a JavaScript module and import them directly into your code. This bundles the animation data with your app's code, so it loads with the initial page load.

Implementation Example: #

First, convert each JSON file to a JS module (e.g., dice-1.js):

// animations/dice-1.js
export default { /* Paste the full content of dice-1.json here */ };

Then import and cache them in your main app code:

import dice1 from './animations/dice-1.js';
import dice2 from './animations/dice-2.js';
import dice3 from './animations/dice-3.js';
import dice4 from './animations/dice-4.js';
import dice5 from './animations/dice-5.js';
import dice6 from './animations/dice-6.js';

const lottieCache = {
  1: dice1,
  2: dice2,
  3: dice3,
  4: dice4,
  5: dice5,
  6: dice6
};

// Roll dice function remains the same as above—use lottieCache[randomFace]

PWA Compatibility: #

Since PWAs cache your app's bundle locally, the embedded animation data will be available offline immediately after the first install. No network requests ever needed for animations again.

3. Cache Lottie Files with a PWA Service Worker #

If you prefer a gradual approach without modifying how you load animations, use your PWA's Service Worker to cache the Lottie JSON files after the first request. Subsequent rolls will pull the files from the local cache instead of the network.

Implementation Example (Using Workbox): #

// sw.js (your Service Worker file)
import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';

// Cache all dice Lottie JSON files
registerRoute(
  ({ url }) => url.pathname.startsWith('/animations/dice-') && url.pathname.endsWith('.json'),
  new CacheFirst({
    cacheName: 'dice-lottie-animations',
    plugins: [
      // Optional: Set a max cache age (e.g., 30 days)
      new ExpirationPlugin({
        maxAgeSeconds: 30 * 24 * 60 * 60,
      }),
    ],
  })
);

PWA Compatibility: #

This is a core PWA pattern—your Service Worker acts as a proxy, serving cached files when available. Users will only download each animation once, even across sessions or offline.

Quick Comparison of Approaches #

• Preloading: Balances initial load speed and instant first rolls. Great if you don't want to bloat your initial bundle too much.
• Embedding: Maximum speed (zero network requests ever). Ideal if you prioritize instant playback for all users, even on first visit.
• Service Worker Caching: Easiest to implement if you already have a PWA setup—minimal code changes required.

Any of these methods will eliminate that 300-400ms request delay and keep your PWA roadmap on track. Pick the one that fits your build process and performance priorities best!

内容的提问来源于stack exchange，提问作者Adham Ali