Offline Storage

Wrapper Library

Use a lightweight wrapper like idb (by Jake Archibald) for a Promise-based API:

import { openDB } from 'idb';

const db = await openDB(DB_NAME, DB_VERSION, {
  upgrade(db) {
    const fileStore = db.createObjectStore('files', {
      keyPath: 'id',
      autoIncrement: true,
    });
    fileStore.createIndex('hash', 'hash', { unique: true });
    fileStore.createIndex('game', 'game');
    db.createObjectStore('settings');
  },
});

// Store a file
await db.put('files', {
  hash,
  name,
  data: arrayBuffer,
  game,
  artist,
  addedAt: Date.now(),
});

// Get by ID
const file = await db.get('files', id);

// Query by game
const files = await db.getAllFromIndex('files', 'game', 'Chrono Trigger');

Storage Quotas

• Check available storage: const { usage, quota } = await navigator.storage.estimate();
• Request persistent storage: await navigator.storage.persist();
• Typical SPC file: 64 KB. Users could store thousands.
• Warn users when storage usage exceeds 80% of quota.
• Provide a storage management UI showing total usage and per-file sizes.

Data Integrity

• Validate data on read — don't assume stored data is well-formed.
• Handle QuotaExceededError when writing.
• Handle version upgrades gracefully in the upgrade callback.
• Never delete user data without explicit confirmation.

Import / Export

• Allow users to export their library as a zip file (SPC files + metadata JSON).
• Allow importing from a zip to restore a library.
• Use the File System Access API where available for better UX.

Cleanup

• Provide a "clear all data" option in settings.
• When removing a file, also remove it from all playlists.
• Use transactions for multi-step operations to maintain consistency.