JSON in Browser APIs — IndexedDB, Service Workers & More

1// sw.js — Service Worker
2
3const API_CACHE = 'api-cache-v1';
4const API_ROUTES = ['/api/users', '/api/products', '/api/config'];
5
6self.addEventListener('fetch', (event) => {
7  const url = new URL(event.request.url);
8
9  if (!API_ROUTES.some(route => url.pathname.startsWith(route))) {
10    return; // only cache API routes
11  }
12
13  // Stale-while-revalidate
14  event.respondWith(
15    caches.open(API_CACHE).then(async (cache) => {
16      const cached = await cache.match(event.request);
17
18      const fetchPromise = fetch(event.request)
19        .then((response) => {
20          if (response.ok) {
21            cache.put(event.request, response.clone());
22          }
23          return response;
24        })
25        .catch(() => cached); // offline fallback
26
27      return cached || fetchPromise;
28    })
29  );
30});
31
32// Clean up old caches on activation
33self.addEventListener('activate', (event) => {
34  event.waitUntil(
35    caches.keys().then(keys =>
36      Promise.all(
37        keys
38          .filter(key => key !== API_CACHE)
39          .map(key => caches.delete(key))
40      )
41    )
42  );
43});

1async function copyJsonToClipboard(data) {
2  const json = JSON.stringify(data, null, 2);
3
4  try {
5    await navigator.clipboard.writeText(json);
6    console.log('JSON copied to clipboard');
7  } catch (err) {
8    // Fallback for older browsers or permission denied
9    const textarea = document.createElement('textarea');
10    textarea.value = json;
11    document.body.appendChild(textarea);
12    textarea.select();
13    document.execCommand('copy');
14    document.body.removeChild(textarea);
15  }
16}
17
18async function readJsonFromClipboard() {
19  const text = await navigator.clipboard.readText();
20  try {
21    return JSON.parse(text);
22  } catch {
23    throw new Error('Clipboard does not contain valid JSON');
24  }
25}

1function sendAnalytics(eventData) {
2  const payload = JSON.stringify({
3    ...eventData,
4    timestamp: new Date().toISOString(),
5    session_id: getSessionId(),
6    page: window.location.pathname,
7  });
8
9  const blob = new Blob([payload], { type: 'application/json' });
10  navigator.sendBeacon('/api/analytics', blob);
11}
12
13// Guaranteed to send even on page navigation/close
14window.addEventListener('visibilitychange', () => {
15  if (document.visibilityState === 'hidden') {
16    sendAnalytics({
17      event: 'page_leave',
18      duration_ms: performance.now(),
19    });
20  }
21});

1// Store settings locally (5 MB limit)
2await chrome.storage.local.set({
3  preferences: {
4    theme: 'dark',
5    fontSize: 14,
6    enabledTools: ['validator', 'formatter', 'diff'],
7  },
8});
9
10// Retrieve settings
11const { preferences } = await chrome.storage.local.get('preferences');
12
13// Sync settings across devices (100 KB limit, 8 KB per item)
14await chrome.storage.sync.set({
15  shortcuts: { format: 'Ctrl+Shift+F', validate: 'Ctrl+Shift+V' },
16});
17
18// Listen for changes (works across extension pages)
19chrome.storage.onChanged.addListener((changes, areaName) => {
20  if (areaName === 'local' && changes.preferences) {
21    applyPreferences(changes.preferences.newValue);
22  }
23});

1async function checkStorageQuota() {
2  if ('storage' in navigator && 'estimate' in navigator.storage) {
3    const { usage, quota } = await navigator.storage.estimate();
4    const usedMB = (usage / (1024 * 1024)).toFixed(2);
5    const totalMB = (quota / (1024 * 1024)).toFixed(2);
6    const percentUsed = ((usage / quota) * 100).toFixed(1);
7
8    console.log(`Storage: ${usedMB} MB / ${totalMB} MB (${percentUsed}%)`);
9    return { usage, quota, percentUsed: parseFloat(percentUsed) };
10  }
11  return null;
12}
13
14// Request persistent storage (prevents eviction under pressure)
15async function requestPersistentStorage() {
16  if (navigator.storage?.persist) {
17    const granted = await navigator.storage.persist();
18    console.log(`Persistent storage: ${granted ? 'granted' : 'denied'}`);
19    return granted;
20  }
21  return false;
22}