是否存在支持HTTP环境的网页JS/CSS资源离线保存JavaScript API？

Great question! Since Service Workers (the standard tool for offline web apps) require HTTPS (with the only exception being localhost), we need to look at alternative JavaScript APIs that work in unencrypted HTTP environments to save JS, CSS, and other resources for offline access. Here are your best options:

1. IndexedDB #

IndexedDB is a built-in browser database that supports storing large binary data (like blobs of JS/CSS files) and works perfectly over HTTP. It’s widely supported across all modern browsers, making it the most reliable choice for this use case.

How it works: #

• Fetch the asset over HTTP, convert it to a Blob or ArrayBuffer.
• Store the blob in IndexedDB along with a unique key (like the asset’s URL or a versioned identifier).
• When the app is offline, check IndexedDB for the asset first, and inject it into the page if it exists.

Quick example snippet: #

// Helper to save an asset to IndexedDB
async function saveAssetToIndexedDB(url, assetBlob) {
  const db = await openDatabase('OfflineAssets', 1, (db) => {
    db.createObjectStore('assets', { keyPath: 'url' });
  });
  
  const tx = db.transaction('assets', 'readwrite');
  await tx.objectStore('assets').put({ url, blob: assetBlob });
  await tx.done;
}

// Helper to fetch an asset from IndexedDB
async function getAssetFromIndexedDB(url) {
  const db = await openDatabase('OfflineAssets', 1);
  const tx = db.transaction('assets', 'readonly');
  const asset = await tx.objectStore('assets').get(url);
  return asset?.blob;
}

// Wrapper to open IndexedDB connection
function openDatabase(name, version, upgradeCallback) {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open(name, version);
    request.onupgradeneeded = (e) => upgradeCallback(request.result);
    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

// Usage: Save a CSS file
fetch('/styles/main.css')
  .then(res => res.blob())
  .then(blob => saveAssetToIndexedDB('/styles/main.css', blob));

2. FileSystem Access API #

If you want to persist assets to the user’s local file system (rather than just browser storage), the FileSystem Access API is an option. However, it has a few caveats:

• It requires explicit user interaction (e.g., a button click) to grant permission—you can’t save files automatically without user consent.
• Support is good in modern Chrome/Edge, but more limited in other browsers.

This is useful if you want users to have direct access to the saved files outside the browser, but it’s less convenient for seamless offline app usage compared to IndexedDB.

3. LocalStorage (Not Recommended) #

LocalStorage is a simple key-value store, but it’s not ideal for this use case:

• It only supports string data, so you’d have to encode binary assets as Base64, which increases file size by ~33%.
• It has a small storage limit (typically 5MB), which is insufficient for most JS/CSS bundles or media assets.
• It’s synchronous, which can block the main thread when dealing with large data.

Key Considerations #

• CORS: If you’re fetching assets from a different origin, make sure the server is configured to allow cross-origin requests (via CORS headers), otherwise your fetch calls will fail even over HTTP.
• Versioning: Implement a system to track asset versions (e.g., append a hash to asset URLs) so you can update cached assets when they change, avoiding stale content.
• Cleanup: Periodically remove old or unused assets from storage to avoid filling up the user’s browser storage.

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