Vue应用实现MP3音频离线缓存及过期管理是否可行？

Hey there! Absolutely—you can build this offline audio feature for your Vue SPA, and even add expiration logic just like Spotify does. Let’s break this down into practical, actionable steps, starting with the right tools for the job:

1. Skip LocalStorage—Use the Right Storage Tools #

First off: localStorage is not suitable for MP3 files. It’s limited to ~5MB, stores only strings (so you’d have to encode MP3s as base64, which adds 30% extra size), and isn’t optimized for binary data. Instead, use this combo:

• Service Worker: The backbone of PWA offline functionality—intercepts network requests, serves cached content, and runs in the background.
• Cache API: Perfect for storing binary assets like MP3s, with built-in methods to add/retrieve/delete cached files.
• IndexedDB: For storing metadata (like audio IDs, URLs, and expiration timestamps)—since Cache API doesn’t natively support custom metadata like expiration dates.

2. Set Up Service Worker in Vue #

If you’re using Vue CLI or Vite, integrating a Service Worker is straightforward:

• Vue CLI: Run vue add pwa to install the official PWA plugin. It’ll generate a basic Service Worker configuration for you.
• Vite: Install vite-plugin-pwa via npm install vite-plugin-pwa --save-dev, then configure it in vite.config.js to enable offline support.

3. Add "Download for Offline" Functionality #

When a user clicks to save an audio file for offline listening, we’ll cache the MP3 and store its expiration metadata in IndexedDB. Here’s a simplified Vue component function:

// In your Vue component (using Composition API or Options API)
async function downloadAudioForOffline(audioUrl, audioId, expiryDays = 7) {
  // Calculate expiration timestamp (7 days from now by default)
  const expiryTime = Date.now() + expiryDays * 24 * 60 * 60 * 1000;

  // Cache the MP3 file using Cache API
  const audioCache = await caches.open('offline-audios');
  await audioCache.add(audioUrl);

  // Store metadata in IndexedDB
  await saveAudioMetadata(audioId, audioUrl, expiryTime);
}

// Helper to save metadata to IndexedDB
function saveAudioMetadata(audioId, audioUrl, expiryTime) {
  return new Promise((resolve, reject) => {
    const dbOpenRequest = indexedDB.open('AudioCacheDB', 1);

    // Create object store if DB is new
    dbOpenRequest.onupgradeneeded = (e) => {
      const db = e.target.result;
      db.createObjectStore('audios', { keyPath: 'audioId' });
    };

    dbOpenRequest.onsuccess = (e) => {
      const db = e.target.result;
      const tx = db.transaction('audios', 'readwrite');
      const store = tx.objectStore('audios');
      store.put({ audioId, audioUrl, expiryTime });
      tx.oncomplete = resolve;
      tx.onerror = reject;
    };

    dbOpenRequest.onerror = reject;
  });
}

4. Implement Expiration & Cleanup Logic #

To mimic Spotify’s auto-expiration, we need to periodically check and delete expired cached files. Do this in two places:

a. Service Worker Activation #

Whenever the Service Worker activates, clean up expired content:

// In your service-worker.js file
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(async () => {
      const dbOpenRequest = indexedDB.open('AudioCacheDB', 1);
      dbOpenRequest.onsuccess = async (e) => {
        const db = e.target.result;
        const tx = db.transaction('audios', 'readonly');
        const store = tx.objectStore('audios');
        const allAudios = await store.getAll();

        // Loop through all saved audios and delete expired ones
        for (const audio of allAudios) {
          if (Date.now() > audio.expiryTime) {
            await caches.delete(audio.audioUrl);
            await store.delete(audio.audioId);
          }
        }
      };
    })
  );
});

b. Pre-Play Check in Vue Component #

Before playing an offline audio, verify it’s not expired:

async function playOfflineAudio(audioId) {
  const audioMeta = await getAudioMetadata(audioId);
  
  if (!audioMeta) {
    // No cached audio—fall back to network
    document.getElementById('audio-player').src = originalAudioUrl;
    return;
  }

  // Check if expired
  if (Date.now() > audioMeta.expiryTime) {
    alert('This offline audio has expired. Please re-download it.');
    return;
  }

  // Fetch from cache
  const audioCache = await caches.open('offline-audios');
  const cachedResponse = await audioCache.match(audioMeta.audioUrl);

  if (cachedResponse) {
    // Convert cached blob to a playable URL
    const blobUrl = URL.createObjectURL(await cachedResponse.blob());
    document.getElementById('audio-player').src = blobUrl;
  } else {
    // Cache missing—fall back to network
    document.getElementById('audio-player').src = audioMeta.audioUrl;
  }
}

// Helper to fetch metadata from IndexedDB
function getAudioMetadata(audioId) {
  return new Promise((resolve, reject) => {
    const dbOpenRequest = indexedDB.open('AudioCacheDB', 1);
    
    dbOpenRequest.onsuccess = (e) => {
      const db = e.target.result;
      const tx = db.transaction('audios', 'readonly');
      const store = tx.objectStore('audios');
      const getRequest = store.get(audioId);
      getRequest.onsuccess = () => resolve(getRequest.result);
      getRequest.onerror = reject;
    };
    
    dbOpenRequest.onerror = reject;
  });
}

5. Key Considerations #

• Storage Limits: Browsers typically allocate 10-20% of available disk space to Cache/IndexedDB. Add a user-friendly warning if they’re approaching the limit.
• HTTPS Requirement: Service Workers only work over HTTPS (localhost is exempt for development).
• User Feedback: Show download progress, indicate when content is available offline, and clearly notify users when cached content expires.

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