Forem: Pavel Kříž

Production-Ready Smart Caching for PWA with Service Workers and IndexedDB

Pavel Kříž — Thu, 19 Feb 2026 14:02:16 +0000

This is my 15th write up on dev.to site. A complete code of Service Worker that downloads only changed files on update — not the entire cache. With retry logic, multi-app isolation, update notifications, and an in-memory IndexedDB fallback.

Note: The code in this article (+ blogpost) was written by Claude Sonnet 4.6 (Anthropic) as part of an iterative review and refinement process. The architecture and requirements were designed by the author; the implementation and code review were AI-assisted.

Inspiration

This article builds directly on the idea presented by Ilja Nevolin in Smarter caching with service workers. His core insight was simple and elegant: instead of wiping the entire cache on every update, compare a checksum per file and only re-download what actually changed.

That concept is the foundation of everything here. What follows is a production-hardened expansion of it — with version strings instead of checksums, retry logic, timeout guards, multi-app isolation, an IndexedDB fallback, and an in-app update notification.

The problem with naive caching

Most Service Worker tutorials show you this pattern:

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache-v1').then(cache => cache.addAll(filesToCache))
  );
});

It works. But when you deploy an update, the usual advice is to bump the cache name to my-cache-v2, which causes the new SW to wipe the old cache and re-download everything — even the 97 files you didn't touch.

For a small app this is fine. For a PWA with dozens of assets, icons, fonts, and a full JS bundle, this wastes bandwidth and makes updates noticeably slow, especially on mobile connections.

The smart approach: version per file

Define your assets as an array of objects, each with a file path and a version string:

const filesToCache = [
  { "file": "/app.js",    "version": "008" },
  { "file": "/style.css", "version": "003" },
  { "file": "/logo.png",  "version": "001" }
];

On every SW startup, compare these versions against what is stored in IndexedDB. Download only the files where the version has changed (or where the file is new). Everything else is served from the existing cache untouched.

This means a typical update — where you changed one JS file and one CSS file — downloads exactly two files instead of the whole app.

Key design decisions

1. `event.waitUntil` must wrap everything

This is a common mistake. If you call async functions outside event.waitUntil, the browser may terminate the SW before they complete:

// ❌ Wrong – browser can kill the SW before checkForUpdates() finishes
event.waitUntil(cleanOldCaches().then(() => {
  checkForUpdates(); // NOT inside the promise chain
}));

// ✅ Correct – browser waits for the full chain
event.waitUntil(
  cleanOldCaches().then(() => checkForUpdates())
);

2. No double-caching on install + activate

A natural instinct is to run performSmartCaching() in both the install and activate events. Don't. The install event already caches everything — calling it again in activate processes every file twice on each SW update. activate should only handle clients.claim() and cleaning old caches.

3. Bypass the browser's HTTP cache with `cache: 'no-cache'`

The browser has its own HTTP cache, separate from the Cache Storage API. Without this option, fetch() may silently return a stale response even when you've bumped the version:

const response = await fetch(fileInfo.file, { cache: 'no-cache' });

no-cache does not mean "never use cache" — it means "always revalidate with the server via ETag or Last-Modified." If the file hasn't changed, the server returns 304 and the browser uses its cached copy efficiently. If it has changed, you get the fresh version.

4. Fetch timeout via `AbortSignal.timeout()`

On a slow or unstable mobile connection, fetch() can hang for 60–120 seconds before the browser gives up. This stalls the entire install event. Guard every fetch with a timeout:

const response = await fetch(fileInfo.file, {
  cache:  'no-cache',
  signal: AbortSignal.timeout(10000) // 10 seconds max
});

Supported since Chrome 103 and Firefox 100.

5. Retry logic with exponential backoff — but not for permanent errors

Network hiccups and temporary server overload (5xx, 429) are worth retrying. A 404 or 403 is not — those won't be fixed by waiting a second:

const RETRYABLE_STATUS_CODES = new Set([429, 500, 502, 503, 504]);

for (let attempt = 1; attempt <= RETRY_ATTEMPTS; attempt++) {
  try {
    const response = await fetch(fileInfo.file, { cache: 'no-cache', signal: AbortSignal.timeout(10000) });

    if (!response.ok) {
      if (RETRYABLE_STATUS_CODES.has(response.status)) {
        throw new Error(`HTTP ${response.status} (retryable)`);
      } else {
        throw new Error(`HTTP ${response.status} (permanent)`); // breaks the loop
      }
    }
    // success – break out of retry loop
    return;
  } catch (error) {
    if (error.message.includes('permanent')) break;
    const delay = 1000 * Math.pow(2, attempt - 1); // 1s → 2s → 4s
    await sleep(delay);
  }
}

6. Handle `QuotaExceededError` on `cache.put()`

On devices with little storage, or in private browsing mode, cache.put() can throw a QuotaExceededError. Without handling this, the entire install event would fail. Wrap the call separately so one failed file doesn't block the rest:

try {
  await cache.put(fileInfo.file, response.clone());
} catch (quotaError) {
  console.error(`Cache storage full, skipping ${fileInfo.file}`);
  throw new Error('QuotaExceeded (permanent)');
}

7. IndexedDB fallback to an in-memory Map

IndexedDB can fail in rare situations: corrupted browser profile, strict privacy settings, storage quota exceeded at the DB level. Rather than crashing the SW, fall back gracefully:

let dbInstance  = null;
let memoryStore = null; // activated on DB failure

async function getDB() {
  if (dbInstance)  return dbInstance;
  if (memoryStore) return null; // already in fallback mode
  try {
    dbInstance = await openDB();
    return dbInstance;
  } catch (error) {
    console.warn('[SW] IndexedDB unavailable, using in-memory fallback');
    memoryStore = new Map();
    return null;
  }
}

All three DB functions (getStoredVersion, storeVersion, removeVersion) check if (!db) and use the Map instead. When in fallback mode, versions are lost on SW restart — all files re-download next time — but the app keeps working.

8. Multi-app isolation with APP_NAME

If you deploy multiple PWAs under the same origin (e.g. during development on localhost, or in a multi-tenant setup), they share the same Cache Storage and IndexedDB namespace. Two SWs using the same CACHE_NAME and DB_NAME will overwrite each other's data.

Fix: prefix everything with a per-app identifier:

const APP_NAME   = 'my-app';           // change for each PWA
const CACHE_NAME = `${APP_NAME}-cache-v1`;
const DB_NAME    = `${APP_NAME}-CacheDB`;

9. Clean path rules — no query strings in `filesToCache`

The removeObsoleteFiles() function and the fetch handler both match cached entries using url.pathname only (stripping query strings and fragments). This is intentional and correct — but it means paths in filesToCache must also be clean:

// ✅ correct
{ "file": "/app.js", "version": "008" }

// ❌ will break pathname matching
{ "file": "/app.js?v=123", "version": "008" }

Similarly, if your server responds to "/" with a 301 redirect to "/index.html", the redirect response itself gets cached instead of the HTML. If you observe broken offline behavior, replace "/" with "/index.html" in the list.

Periodic update check for long-running PWAs

The browser checks for SW updates on navigation and after 24 hours. But a PWA used as a standalone app may stay open for days without a page reload. Add a periodic check inside the SW itself:

const UPDATE_INTERVAL_MS = 60 * 60 * 1000; // every hour

function startPeriodicUpdateCheck() {
  if (!UPDATE_INTERVAL_MS) return;
  setInterval(async () => {
    await checkForUpdates();
  }, UPDATE_INTERVAL_MS);
}

// called at the end of the activate event
self.addEventListener('activate', event => {
  event.waitUntil(
    Promise.all([clients.claim(), cleanOldCaches()])
      .then(() => startPeriodicUpdateCheck())
  );
});

When new files are found, the SW notifies all open clients:

const allClients = await self.clients.matchAll();
allClients.forEach(client => {
  client.postMessage({ type: 'CACHE_UPDATED', data: result });
});

User-facing update notification

The SW does its work silently on the background. The app needs to listen for the CACHE_UPDATED message and offer the user a gentle, non-intrusive way to apply the update.

Key UX principles:

No technical jargon — say "A new version is ready", not "Service Worker cache invalidated"
Never force a reload mid-session — the user might be filling a form
A simple banner with two choices: Update now or Later
If they choose Later, the new version loads naturally on next app start

Vanilla JS

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(registration => {
    navigator.serviceWorker.addEventListener('message', event => {
      if (event.data?.type === 'CACHE_UPDATED') showUpdateBanner();
    });
  });
}

function showUpdateBanner() {
  if (document.getElementById('sw-update-banner')) return;

  const banner = document.createElement('div');
  banner.id = 'sw-update-banner';
  banner.innerHTML = `
    A new version is ready.
    Update now
    Later
  `;
  // … apply styles, append to body

  document.getElementById('sw-update-now').addEventListener('click', () => {
    banner.remove();
    window.location.reload();
  });
  document.getElementById('sw-update-later').addEventListener('click', () => {
    banner.remove();
  });
}

Quasar + Vue 3 (Option API)

<template>
  <q-banner v-if="updateAvailable" rounded class="update-banner bg-grey-9 text-white">
    <template #avatar>
      <q-icon name="system_update" color="white" />
    </template>
    A new version is ready.
    <template #action>
      <q-btn flat color="white"  label="Update now" @click="reloadApp" />
      <q-btn flat color="grey-4" label="Later"      @click="dismiss"   />
    </template>
  </q-banner>
</template>

<script>
export default {
  name: 'UpdateBanner',
  data() {
    return { updateAvailable: false };
  },
  mounted() {
    if (!('serviceWorker' in navigator)) return;
    navigator.serviceWorker.register('/sw.js').then(() => {
      this._swMessageHandler = (event) => {
        if (event.data?.type === 'CACHE_UPDATED') this.updateAvailable = true;
      };
      navigator.serviceWorker.addEventListener('message', this._swMessageHandler);
    });
  },
  beforeUnmount() {
    if (this._swMessageHandler) {
      navigator.serviceWorker.removeEventListener('message', this._swMessageHandler);
    }
  },
  methods: {
    reloadApp() { this.updateAvailable = false; window.location.reload(); },
    dismiss()   { this.updateAvailable = false; },
  },
};
</script>

How it all fits together

First load
──────────
  install → performSmartCaching()
              ├─ all files new → fetch all → store in Cache + IndexedDB
              └─ skipWaiting()

  activate → clients.claim()
           → cleanOldCaches()
           → startPeriodicUpdateCheck()

Subsequent loads (no change)
─────────────────────────────
  install → performSmartCaching()
              └─ all versions match → skip all → 0 downloads

  fetch event → serve from cache (Cache First)

After deployment (2 files changed)
────────────────────────────────────
  install → performSmartCaching()
              ├─ 2 files outdated → fetch 2 → update Cache + IndexedDB
              └─ N-2 files current → skip

  SW notifies app → banner shown → user clicks "Update now" → reload

Complete source

The full, annotated sw.js

// sw.js - Service Worker with intelligent caching and automatic updates
// Production version for PWA applications
// SW Version: 1.3.0

// ====================================================================
// APP IDENTITY
// Change APP_NAME for each PWA to avoid cache / IndexedDB collisions
// when multiple PWAs are installed on the same device.
// ====================================================================
const APP_NAME    = 'my-app';                   // <-- change for each PWA
const CACHE_NAME  = `${APP_NAME}-cache-v1`;
const DB_NAME     = `${APP_NAME}-CacheDB`;
const DB_VERSION  = 1;
const FILES_STORE = 'cached-files';

// ====================================================================
// IMPORTANT: Update this array whenever your application files change.
// Increment the version string for every file you have modified.
//
// PATH RULES – follow these to avoid subtle caching bugs:
//   ✅  "/app.js"          – always use clean paths, no query strings
//   ❌  "/app.js?v=123"    – query strings break pathname matching in
//                            removeObsoleteFiles() and the fetch handler
//
// ROOT PATH NOTE:
//   "/" is included for convenience, but some servers respond to it with
//   a 301/302 redirect to "/index.html". If that happens, the redirect
//   response is cached instead of the actual HTML, which breaks offline
//   mode. If you observe this, remove "/" from the list and keep only
//   "/index.html".
// ====================================================================
const filesToCache = [
    {"file": "/",                   "version": "001"},
    {"file": "/index.html",         "version": "001"},
    {"file": "/app.js",             "version": "007"},
    {"file": "/style.css",          "version": "003"},
    {"file": "/manifest.json",      "version": "001"},
    {"file": "/icons/icon-192.png", "version": "001"},
    {"file": "/icons/icon-512.png", "version": "001"}
    // Add all your application files here
];

// Retry configuration
const RETRY_ATTEMPTS   = 3;      // Number of download attempts per file
const RETRY_DELAY_MS   = 1000;   // Initial delay between retries (ms), doubles each attempt
const FETCH_TIMEOUT_MS = 10000;  // Max time to wait for a single fetch (ms)

// Periodic update check interval – applies when the app stays open for
// a long time (e.g. PWA / kiosk). Set to 0 to disable.
const UPDATE_INTERVAL_MS = 60 * 60 * 1000; // Every 1 hour

// HTTP status codes worth retrying (temporary server-side issues)
const RETRYABLE_STATUS_CODES = new Set([429, 500, 502, 503, 504]);

// ====================================================================
// IndexedDB – shared instance + in-memory fallback
//
// IndexedDB can fail in rare situations (storage quota exceeded,
// browser privacy settings, corrupted profile). In that case we fall
// back to a plain Map so the SW keeps working for the current session.
// Versions stored in the Map are lost on SW restart, meaning all files
// will be re-downloaded next time – a minor performance cost, not a
// data-loss issue.
// ====================================================================
let dbInstance  = null;         // Persistent IndexedDB connection
let memoryStore = null;         // In-memory fallback (Map), null when DB is healthy

async function getDB() {
    if (dbInstance)  return dbInstance;
    if (memoryStore) return null;   // Already in fallback mode

    try {
        dbInstance = await openDB();
        return dbInstance;
    } catch (error) {
        console.warn('[SW] ⚠️ IndexedDB unavailable, switching to in-memory fallback:', error.message);
        memoryStore = new Map();
        return null;
    }
}

// ====================================================================
// Install event
// ====================================================================
self.addEventListener('install', event => {
    console.log('[SW] 📦 Installing Service Worker...');

    // skipWaiting activates the new SW immediately without waiting
    // for all tabs using the old SW to be closed.
    self.skipWaiting();

    // All async work must be wrapped in event.waitUntil so the browser
    // keeps the SW alive until caching is complete.
    event.waitUntil(
        performSmartCaching()
            .then(() => {
                console.log('[SW] ✅ Installation complete');
            })
            .catch(error => {
                console.error('[SW] ❌ Installation failed:', error);
            })
    );
});

// ====================================================================
// Activate event
// ====================================================================
self.addEventListener('activate', event => {
    console.log('[SW] 🚀 Activating Service Worker...');

    event.waitUntil(
        Promise.all([
            // Take control of all open tabs immediately
            clients.claim(),
            // Remove cache stores left by previous SW versions
            cleanOldCaches()
        ])
        .then(() => {
            console.log('[SW] ✅ Activation complete');
            // NOTE: performSmartCaching() is intentionally NOT called here.
            // It already ran during the install event; calling it again
            // would process every file twice on each SW update.

            // Start periodic update check after activation
            startPeriodicUpdateCheck();
        })
    );
});

// ====================================================================
// Periodic update check
// Runs inside the SW so it works even when the app JS has no interval.
// The interval is cleared automatically when the SW is terminated.
// ====================================================================
function startPeriodicUpdateCheck() {
    if (!UPDATE_INTERVAL_MS) return;

    console.log(`[SW] ⏰ Periodic update check enabled (every ${UPDATE_INTERVAL_MS / 60000} min)`);

    setInterval(async () => {
        console.log('[SW] ⏰ Periodic update check triggered');
        await checkForUpdates();
    }, UPDATE_INTERVAL_MS);
}

// ====================================================================
// Core smart caching logic
// ====================================================================
async function performSmartCaching() {
    console.log('[SW] 🔄 Starting smart caching...');

    const cache = await caches.open(CACHE_NAME);
    const db    = await getDB();   // May be null when using memory fallback

    let newFiles     = 0;
    let updatedFiles = 0;
    let skippedFiles = 0;
    let failedFiles  = 0;

    for (const fileInfo of filesToCache) {
        try {
            const storedVersion = await getStoredVersion(db, fileInfo.file);

            if (!storedVersion) {
                // File has never been cached before
                console.log(`[SW] 🆕 New file: ${fileInfo.file} (v${fileInfo.version})`);
                await fetchAndCache(cache, db, fileInfo);
                newFiles++;

            } else if (storedVersion !== fileInfo.version) {
                // File version has changed – download the new version
                console.log(`[SW] 🔄 Update: ${fileInfo.file} (v${storedVersion} → v${fileInfo.version})`);
                await fetchAndCache(cache, db, fileInfo);
                updatedFiles++;

            } else {
                // File is up to date – skip
                skippedFiles++;
            }

        } catch (error) {
            // fetchAndCache already exhausted all retry attempts and
            // logged the details – count the failure and move on.
            failedFiles++;
        }
    }

    // Remove files from cache that are no longer in filesToCache
    await removeObsoleteFiles(cache, db);

    console.log('[SW] 📊 Caching summary:');
    console.log(`[SW]    - New files:            ${newFiles}`);
    console.log(`[SW]    - Updated files:        ${updatedFiles}`);
    console.log(`[SW]    - Skipped (up to date): ${skippedFiles}`);
    console.log(`[SW]    - Failed:               ${failedFiles}`);

    return { newFiles, updatedFiles, skippedFiles, failedFiles };
}

// ====================================================================
// Fetch a file and store it in both Cache Storage and IndexedDB.
// Retries on network errors and retryable HTTP status codes.
//
// Retry logic:
//   - Network failure / timeout                  → retry with backoff
//   - HTTP 5xx / 429 (temporary server issues)   → retry with backoff
//   - HTTP 404 / 403 / 401 (permanent errors)    → fail immediately
//
// Each fetch is guarded by FETCH_TIMEOUT_MS via AbortSignal.timeout().
// Without a timeout, a hanging mobile connection can stall the entire
// install event for 60–120 seconds before the browser gives up.
// ====================================================================
async function fetchAndCache(cache, db, fileInfo) {
    let lastError;

    for (let attempt = 1; attempt <= RETRY_ATTEMPTS; attempt++) {
        try {
            // AbortSignal.timeout() cancels the fetch if it takes longer
            // than FETCH_TIMEOUT_MS. Supported since Chrome 103 / Firefox 100.
            const response = await fetch(fileInfo.file, {
                cache:  'no-cache',         // Always revalidate with server (ETag / Last-Modified)
                signal: AbortSignal.timeout(FETCH_TIMEOUT_MS)
            });

            if (!response.ok) {
                if (RETRYABLE_STATUS_CODES.has(response.status)) {
                    throw new Error(`HTTP ${response.status} (retryable)`);
                } else {
                    // Permanent error (e.g. 404, 403) – no point retrying
                    console.error(`[SW] ❌ Permanent error for ${fileInfo.file}: HTTP ${response.status}`);
                    throw new Error(`HTTP ${response.status} (permanent)`);
                }
            }

            // --------------------------------------------------------
            // Save to Cache Storage.
            // Wrapped in try-catch because cache.put() throws a
            // QuotaExceededError when storage is full (common on devices
            // with little free space or in private browsing mode).
            // We treat this as a failed file rather than crashing the SW.
            // --------------------------------------------------------
            try {
                await cache.put(fileInfo.file, response.clone());
            } catch (quotaError) {
                console.error(`[SW] ❌ Cache storage full, could not store ${fileInfo.file}:`, quotaError.message);
                throw new Error('QuotaExceeded (permanent)');
            }

            // Save version to IndexedDB (or in-memory fallback).
            // If this write fails, the file is still cached correctly.
            // The only consequence is that it will be re-downloaded on
            // the next SW startup (minor performance impact, no data loss).
            await storeVersion(db, fileInfo.file, fileInfo.version);

            console.log(`[SW] 💾 Cached: ${fileInfo.file} (v${fileInfo.version})`);
            return; // Success – exit retry loop

        } catch (error) {
            lastError = error;

            const isPermanent = error.message.includes('permanent');
            if (isPermanent) {
                break; // Do not retry permanent errors
            }

            if (attempt < RETRY_ATTEMPTS) {
                const delay = RETRY_DELAY_MS * Math.pow(2, attempt - 1); // 1s → 2s → 4s
                console.warn(`[SW] ⚠️ Attempt ${attempt}/${RETRY_ATTEMPTS} failed for ${fileInfo.file}. Retrying in ${delay}ms...`);
                await sleep(delay);
            }
        }
    }

    console.error(`[SW] ❌ All ${RETRY_ATTEMPTS} attempts failed for ${fileInfo.file}:`, lastError.message);
    throw lastError;
}

// ====================================================================
// Simple sleep helper used for retry delays
// ====================================================================
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// ====================================================================
// Check for updates – called by the periodic interval or from the app
// Notifies all open clients if any files were updated.
// ====================================================================
async function checkForUpdates() {
    console.log('[SW] 🔍 Checking for updates...');

    try {
        const result = await performSmartCaching();

        if (result.newFiles > 0 || result.updatedFiles > 0) {
            console.log('[SW] 📢 Updates applied, notifying clients...');

            const allClients = await self.clients.matchAll();
            allClients.forEach(client => {
                client.postMessage({
                    type: 'CACHE_UPDATED',
                    data: result
                });
            });
        } else {
            console.log('[SW] ✅ All files are up to date');
        }
    } catch (error) {
        console.error('[SW] ❌ Error during update check:', error);
    }
}

// ====================================================================
// Remove files from cache that are no longer listed in filesToCache
// ====================================================================
async function removeObsoleteFiles(cache, db) {
    const currentFiles   = new Set(filesToCache.map(f => f.file));
    const cachedRequests = await cache.keys();
    let removedCount     = 0;

    for (const request of cachedRequests) {
        // Use pathname only (no query string / fragment) for matching.
        // This is why filesToCache entries must use clean paths without
        // query parameters – see the PATH RULES note at the top.
        const pathname = new URL(request.url).pathname;

        if (!currentFiles.has(pathname)) {
            console.log(`[SW] 🗑️ Removing obsolete file: ${pathname}`);
            await cache.delete(request);
            await removeVersion(db, pathname);
            removedCount++;
        }
    }

    if (removedCount > 0) {
        console.log(`[SW] 🗑️ Removed ${removedCount} obsolete file(s)`);
    }
}

// ====================================================================
// Remove cache stores created by previous SW versions
// ====================================================================
async function cleanOldCaches() {
    const cacheNames = await caches.keys();
    const oldCaches  = cacheNames.filter(name => name !== CACHE_NAME);

    if (oldCaches.length > 0) {
        console.log(`[SW] 🧹 Removing ${oldCaches.length} old cache store(s):`, oldCaches);
        await Promise.all(oldCaches.map(name => caches.delete(name)));
    }
}

// ====================================================================
// IndexedDB operations
// All functions accept db = null, which means the fallback Map is used.
// ====================================================================
function openDB() {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(DB_NAME, DB_VERSION);

        request.onerror = () => {
            console.error('[SW] ❌ Failed to open IndexedDB:', request.error);
            reject(request.error);
        };

        request.onsuccess = () => {
            console.log('[SW] ✅ IndexedDB opened');
            resolve(request.result);
        };

        request.onupgradeneeded = event => {
            console.log('[SW] 📀 Creating / upgrading IndexedDB schema...');
            const db = event.target.result;

            if (!db.objectStoreNames.contains(FILES_STORE)) {
                // No version index needed – records are looked up by file path only.
                db.createObjectStore(FILES_STORE, { keyPath: 'file' });
                console.log('[SW] ✅ Object store created');
            }
        };
    });
}

function getStoredVersion(db, fileName) {
    if (!db) return Promise.resolve(memoryStore.get(fileName) ?? null);

    return new Promise((resolve, reject) => {
        const tx      = db.transaction([FILES_STORE], 'readonly');
        const store   = tx.objectStore(FILES_STORE);
        const request = store.get(fileName);

        request.onsuccess = () => {
            const result = request.result;
            resolve(result ? result.version : null);
        };

        request.onerror = () => {
            console.error(`[SW] ❌ Failed to read version for ${fileName}:`, request.error);
            reject(request.error);
        };
    });
}

function storeVersion(db, fileName, version) {
    if (!db) {
        memoryStore.set(fileName, version);
        return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
        const tx      = db.transaction([FILES_STORE], 'readwrite');
        const store   = tx.objectStore(FILES_STORE);
        const request = store.put({
            file:        fileName,
            version:     version,
            lastUpdated: new Date().toISOString()
        });

        request.onsuccess = () => resolve();
        request.onerror   = () => {
            console.error(`[SW] ❌ Failed to store version for ${fileName}:`, request.error);
            reject(request.error);
        };
    });
}

function removeVersion(db, fileName) {
    if (!db) {
        memoryStore.delete(fileName);
        return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
        const tx      = db.transaction([FILES_STORE], 'readwrite');
        const store   = tx.objectStore(FILES_STORE);
        const request = store.delete(fileName);

        request.onsuccess = () => resolve();
        request.onerror   = () => {
            console.error(`[SW] ❌ Failed to remove version for ${fileName}:`, request.error);
            reject(request.error);
        };
    });
}

// ====================================================================
// Fetch event – Cache First strategy
// Serves files from cache; falls back to network on cache miss.
// ====================================================================
self.addEventListener('fetch', event => {
    if (event.request.mode === 'navigate') {
        event.respondWith(
            caches.match(event.request)
                .then(response => response || fetch(event.request))
                .catch(() => caches.match('/index.html'))
        );
        return;
    }

    event.respondWith(
        caches.match(event.request).then(response => {
            if (response) return response;

            console.log(`[SW] 🌐 Cache miss, fetching: ${event.request.url}`);
            return fetch(event.request).then(networkResponse => {
                const pathname   = new URL(event.request.url).pathname;
                const fileInList = filesToCache.find(f => f.file === pathname);

                if (fileInList && networkResponse.ok) {
                    caches.open(CACHE_NAME).then(cache => {
                        cache.put(event.request, networkResponse.clone());
                    });
                }

                return networkResponse;
            }).catch(error => {
                console.error(`[SW] ❌ Network unavailable for: ${event.request.url}`, error);
                if (event.request.mode === 'navigate') {
                    return caches.match('/index.html');
                }
                throw error;
            });
        })
    );
});

// ====================================================================
// Messages from the main application
// ====================================================================
self.addEventListener('message', event => {
    if (!event.data) return;

    if (event.data.type === 'SKIP_WAITING') {
        console.log('[SW] ⏩ Skipping wait, activating now...');
        self.skipWaiting();
    }

    if (event.data.type === 'CHECK_UPDATES') {
        console.log('[SW] 📡 Manual update check requested by app');
        checkForUpdates();
    }
});

💡 To adapt for your app: change APP_NAME, update filesToCache with your actual files, and increment version strings whenever you deploy a change. That's it.

Summary of improvements over the original idea

Feature	Original idea	This implementation
Selective file updates	✅ checksum-based	✅ version string-based
`event.waitUntil` correctness	⚠️ partial	✅ full chain
Fetch timeout	❌	✅ `AbortSignal.timeout()`
Retry with backoff	❌	✅ 3 attempts, exponential
Permanent vs. retryable errors	❌	✅ distinguished
`QuotaExceededError` handling	❌	✅ per-file try-catch
IndexedDB fallback	❌	✅ in-memory Map
Multi-app isolation	❌	✅ `APP_NAME` prefix
Periodic update check	❌	✅ configurable interval
User update notification	❌	✅ non-intrusive banner

Thanks to Ilja Nevolin (@codr) for the original concept that sparked this.

Curiosity: Using Ably.io Realtime Messaging as a Lightweight Database

Pavel Kříž — Sat, 04 Jan 2025 10:23:30 +0000

This is my 14th write up on dev.to site. This post demonstrates a curious way to use realtime messaging capabilities.

Note: this is NOT the typical solution of realtime messaging.

Ably offers various solutions for developers, with their most popular being realtime messaging based on the pub/sub model. When you publish a message to a channel, all devices connected to that channel receive it instantly.

Ably provides message persistence for your channel's messages (24 hours on free accounts). What's particularly interesting is their feature that allows the last message to persist for 365 days. I'll leverage this capability in this example.

The concept is straightforward: imagine a web or mobile app with a form and a list of records (such as a todo list, shopping list, or contact list) stored as a single persisted message. When you launch the app on any device (PC, tablet, or phone), it synchronizes data from Ably. Any changes you make to your data are saved as a new persisted message, effectively creating a "realtime database" accessible across all your devices.

There are some limitations to consider. The maximum message length is 64 KB (including metadata, ID, timestamp etc.). Since messages exceeding 2 KB are split into chunks for transmission, Ably recommends keeping data size well below this limit. Therefore, this solution is best suited for small amounts of data.

I tested this concept, and it works perfectly. Adding and deleting records triggers message updates that keep all client applications (web/mobile) in sync.

I've created a simple proof-of-concept as a single page (HTML + CSS + JS) on flems.io. To try it yourself, you'll need to:

Create an Ably app
Insert your API key into the JS code (row 37)
Create a channel named "Realtime" and enable the "persist last message" option

There is an important part of app, JS code:

const ably = new Ably.Realtime("put your API KEY here");
const channel = ably.channels.get('[?rewind=1]Realtime');
var persons = [];

channel.subscribe("db", (message) => {
  persons = message.data;
  renderTable();
});

function addPerson() {
  const name = document.getElementById('name').value;
  const age = document.getElementById('age').value;
  const role = document.getElementById('role').value;

  if (name && age && role) {
    const newPerson = { name: name, age: age, role: role };
    persons.push(newPerson);
    updatePersons();
    document.getElementById('name').value = '';
    document.getElementById('age').value = '';
    document.getElementById('role').value = '';
  }
}

function deletePerson(index) {
  persons.splice(index, 1);
  updatePersons();
}

function updatePersons() {
  channel.publish("db", persons);
}

function renderTable() {
  const personTable = 
  document.getElementById('personTable');
  personTable.innerHTML = '';
  persons.forEach((person, index) => {
    const row = `<tr>
    <td>${person.name}</td>
    <td>${person.age}</td>
    <td>${person.role}</td>
    <td><button onclick="deletePerson(${index})">( X )</button></td>
    </tr>`;
    personTable.innerHTML += row;
  });
}

My app on flems.io

Hope this inspires you! :-)

Persistent variables in MithrilJS

Pavel Kříž — Mon, 21 Oct 2024 17:24:48 +0000

This is my 13th write up on dev.to site. A simple way to use persistent variables in your app written in MithrilJS.

Mithril JS

Mithril JS is an excellent JS framework for writing web and mobile apps. It describes itself as:

Mithril.js is a modern client-side JavaScript framework for building Single Page Applications. It's small (8.9 KiB gzip), fast and provides routing and XHR utilities out of the box.

stream

There is an extension of Mithril JS called stream, which brings us reactive variables, as mentioned on it's site:

A Stream is a reactive data structure, similar to cells in spreadsheet applications.

You can use reactive variable as shown below:

var username = stream("John")

persistent variables

By this term I mean a variable with persistent state (value), it keeps it's value even if you reload the page. Values are stored in localStorage.

I have an implementation of persistent stream() variables in Mithril JS. This code is NOT my work, I have asked AI for help and it creates me a solution.

function useStorage(key, defaultValue) {
  var initialValue = localStorage.getItem(key);
  if (initialValue === "null") {
    initialValue = null;
  } else if (initialValue === null || initialValue === undefined) {
    initialValue = defaultValue;
  }

  const stream = m.stream(initialValue);

  stream.map((value) => {
    if (value === null) {
      localStorage.setItem(key, "null");
    } else if (value === undefined) {
      localStorage.removeItem(key);
    } else {
      localStorage.setItem(key, value);
    }
    return value;
  });

  return stream;
}

Simple example of declaration is like:

var input = useStorage("input", null);

Function uses two parametres, the first one is a name for localStorage (keyName) and the second one is a value for localStorage (keyValue).

localStorage.setItem(keyName, keyValue)

example of functional code

I have prepared a small sample on flems.io playground.

Hope this inspires you and helps you!

Multilanguage manifest.json for PWA

Pavel Kříž — Mon, 29 Jul 2024 10:04:49 +0000

This is my 12th write up on dev.to site. I have a solution for manifest.json for multilanguage PWA app without server side actions.

PWA, manifest.json

PWA applications are web pages that can be installed onto devices such as mobile phones or tablets. A PWA includes a manifest.json file, which contains essential information necessary for successful installation on an operating system (e.g., Android, iOS). Some items are mandatory, while others are optional. A good source of information is https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json

In recent days, I have been working on an application that is localized into seven languages (English, Czech, and others). The application includes automatic detection of the device's language and also provides an option to change the language version manually. However, the problem arises with the manifest.json file, as it does not support language versions.

One solution is to use language detection reported by browser on the server side to dynamically generate or inject the manifest.json into the HTML page according to the language. My solution is intended for static hosting and does not require server-side functions.

I have utilized the ideas and methods described in this article: https://blog.omaralshaker.com/2018/01/16/how-to-setup-your-web-app-manifest-dynamically-using-javascript/

For each of the languages supported in my application, I have created a separate manifest.json file. The individual language versions differ only in the "name" and "short_name" keys and the prefix in the file name, for example, en-manifest.json, cs-manifest.json, etc.

Part of the HTML code in the page header includes <link rel="manifest" id="manifest-placeholder"> without the href attribute. After the application code loads, the JS code is executed, which includes the detection of the device's language. The language code is stored in the variable language, and based on its value, the URL for the desired manifest.json file is set in the href attribute.

Here is the JS code that accomplishes this.

var manifestUrl = "";

if (language == "cs"){
  manifestUrl = "/cs-manifest.json"
};

if (language == "sk"){
  manifestUrl = "/sk-manifest.json"
};

if (language == "pl"){
  manifestUrl = "/pl-manifest.json"
};

if (language == "de")
  manifestUrl = "/de-manifest.json"
};

if (language == "sr"){
  manifestUrl = "/sr-manifest.json"
};

if (language == "uk"){
 manifestUrl = "/uk-manifest.json"
};

if (!manifestUrl) manifestUrl = "/en-manifest.json";

document.querySelector('#manifest-placeholder').setAttribute('href', manifestUrl);

I used this solution in an application where you can save your body measurements and clothing sizes. This way, when shopping, you don't have to remember whether you need pants W32 L30 or the other way around. The application is available at:
https://clothing-sizes.replit.app

Happy coding! :-)

MithrilJS component with state management

Pavel Kříž — Wed, 29 May 2024 15:36:52 +0000

This is my 11th write up on dev.to site. MithrilJS component and state management. A substantial part of the code was written by AI. Source code included.

MithrilJS

Mithril is an excellent JS framework, tiny and powerful. Like with another JS frameworks you can write components - a small piece of code solving a dedicated subtask.

State management

Most of applications and most of JS frameworks implement state management - the way state is realized and maintained.

There are many ways to implement state management in Mithril. Excellent source of information is a blog post of Kevin Fiol: Simple State Management in Mithril.js

Component

In this example I have SVG component, logical OR gate. It has two inputs (A, B) and one output (Q).
You can intend either internal component state (so component is independent) or global app state. And this is what I show you in this example.

State

const NodeState = (size) => Array(size).fill(false);

const NodeActions = (state) => ({
  setNode: (index, value) => {
    if (index >= 0 && index < state.length) {
      state[index] = value;
      m.redraw();  // Ensure Mithril redraws the view to reflect state changes
    }
  }
});

OR gate

const ORGate = {
  view: ({ attrs: { state, actions, idxA, idxB, idxQ } }) => {
    const inputA = state[idxA];
    const inputB = state[idxB];
    const output = inputA || inputB;

    // Update the output node state
    actions.setNode(idxQ, output);

    return m('div',
      m('svg', {
          viewBox: '0 0 100 100',
          width: '100',
          height: '100',
          xmlns: 'http://www.w3.org/2000/svg'
        },
        [
          // Input lines
          m('line', { onclick: () => actions.setNode(idxA, !inputA), x1: '0', y1: '30', x2: '30', y2: '30', stroke: inputA ? 'red' : 'blue', 'stroke-width': '2' }),
          m('line', { onclick: () => actions.setNode(idxB, !inputB), x1: '0', y1: '70', x2: '30', y2: '70', stroke: inputB ? 'red' : 'blue', 'stroke-width': '2' }),

          // OR gate rectangle
          m('rect', { x: '30', y: '20', width: '40', height: '60', fill: 'none', stroke: 'black', 'stroke-width': '2' }),

          // Output line
          m('line', { x1: '70', y1: '50', x2: '100', y2: '50', stroke: output ? 'red' : 'blue', 'stroke-width': '2' }),

          // Labels for inputs and output
          m('text', { onclick: () => actions.setNode(idxA, !inputA), x: '13', y: '25', 'text-anchor': 'middle', 'font-size': '12' }, 'A = ', inputA ? '1' : '0'),
          m('text', { onclick: () => actions.setNode(idxB, !inputB), x: '13', y: '65', 'text-anchor': 'middle', 'font-size': '12' }, 'B = ', inputB ? '1' : '0'),
          m('text', { x: '86', y: '40', 'text-anchor': 'middle', 'font-size': '12' }, 'Q = ', output ? '1' : '0'),
          // sign in gate
          m('text', {x: '45', y: '40', 'text-anchor': 'right', 'font-size': '18'}, "≥1")
        ]
      ),
    );
  }
};

Short explanation

There is an array of values (initially: false values) called nodes. Nodes are used as fictive nodes in real logical circuit. Every gate has two inputs ("connected" to nodes) and one output ("connected" to node). All nodes are in one array; index is used to work with specific node (item of array). Indexes of nodes for inputs and output are put to the component via attributes.

m(ORGate, { state: nodeState, actions: nodeActions, idxA: idxA, idxB: idxB, idxQ: 2 }),

Source code

Complete source code with visualization is on flems playground.
Hope this is useful for you, developers. A little note: chatGPT AI did most of the work.

VueJS + CSS: grid template based on variable

Pavel Kříž — Sun, 03 Dec 2023 12:58:54 +0000

This is my 10th write up on dev.to site. Example of CSS grid based on variable. Full source code is included as a flems.io link.

CSS grid

CSS grid is one of technics for UI definition (you may know CSS Flexbox too).

Using CSS grid one can define visual template for content displayed on web page.

As frontend developers we can use "static template" with no changes. Sometimes, there is a good practice to change layout based on condition defined with Media Queries.

Did you know we can change our template via variable's value? Let's do this.

CSS grid layout example

Assume we need place four buttons inside div and want change their positions.

HTML code:

<div class="grid-area "> 
  <button class="btn-1 bg-blue" > A </button>
  <button class="btn-2 bg-blue" > B </button>
  <button class="btn-3 bg-blue" > C </button>
  <button class="btn-4 bg-blue" > D </button>
</div>

CSS code:

.grid-area {
  display: grid;
  gap: 1rem;
}

This example shows fixed layout, there is nothing we can change. Let's do the magic.

Since we use VueJS, define variable holding class name we add to the div (grid countainer) and some CSS classes with different layout for our four buttons.

...
  data: function(){
    return {
      template: "",
    }
  },
...

Example definitions of different CSS grid templates:

.grid-area-4 {
  grid-template-areas:  "area1 area2 area3 area4"                 
}

.grid-area-2-2 {
  grid-template-areas:  "area1 area2"
                        "area3 area4"
}

.grid-area-1-2-1 {
  grid-template-areas:  "area1 area1"
                        "area2 area3"
                        "area4 area4"
}

.grid-area-2-1-1 {
  grid-template-areas:  "area1 area2"
                        "area3 area3"
                        "area4 area4"
}

.grid-area-1-1-2 {
  grid-template-areas:  "area1 area1"
                        "area2 area2"
                        "area3 area4"
}

Each button has its own class .btn-1, .btn-2 etc.

.btn-1 {
  grid-area: area1;
}

.btn-2 {
  grid-area: area2;
}

.btn-3 {
  grid-area: area3;
}

.btn-4 {
  grid-area: area4;
}

A small change of HTML code is enough to do the magic:

<div class="grid-area " :class="template"> 
  <button class="btn-1 bg-blue" > A </button>
  <button class="btn-2 bg-blue" > B </button>
  <button class="btn-3 bg-blue" > C </button>
  <button class="btn-4 bg-blue" > D </button>
</div>

Using VueJS variable template we can define dynamic class and apply it to the div (grid container).

I suppose my explanation is clear, here you can see full source code and playground on flems.io

Hope this help you :-)

Mithril JS + Quasar CSS + mithril stream + UI (pages) -> real app

Pavel Kříž — Sat, 28 Oct 2023 11:42:26 +0000

This is my 9th write up on dev.to site. Example of a real app using Mithril JS, Quasar CSS, mithril stream and UI based on more pages with dynamic switching. Full source code is included as a flems.io link.

My first attempt and example of both Mithril JS and Quasar CSS is described here:
https://dev.to/pablo_74/mithril-js-quasar-css-here-is-the-proof-4e7c, I bring an example of a real app today.

App layout (mobile app)

My example of the app is based on Quasar layout; it consists of three parts. The top one is a header with color background and title, the central one is page content (dynamically switched by user interaction) and the bottom one is a footer with 'buttons' (not real HTML buttons) for switching content.

App's header

The header is a simple component with Quasar's classes and a title.

var header = {
  view: function(vnode){
    return m("header", {class: "q-header q-layout__section--marginal fixed-top", style: {"background-color":"#FF9900", color:"white"}}, 
      [
        m("div", {class: "q-toolbar row no-wrap items-center", role: "toolbar"}, 
          m("div", {class: "q-toolbar__title ellipsis"}, 
            m("div", {class: "text-big absolute-center text-bold"}, 
              vnode.attrs.title
            )
          )
        ), 
        m("div", {class: "q-layout__shadow absolute-full overflow-hidden no-pointer-events"})
      ]
    )
  }
}

App's footer

The footer is the simple component too with Quasar's classes and a row with columns (count depends of number of pages). Each page has a title and this is shown on the footer component. Each of them has an onclick event and assigns name of page to a mithril stream variable named showPage.

var showPage = stream("page1");

var footer = {
  view: function(){
    return m("footer", {class: "q-footer q-layout__section--marginal fixed-bottom q-px-none", style: {"background-color": "#FF9900", color: "black"}}, 
      m("div", {class: "q-toolbar row no-wrap items-center", role: "toolbar"}, 
        m("div", {class: "q-toolbar__title ellipsis"}, 
          m("div", {class: "row q-pa-none"}, 
            pages.map(function(page){
              return m("div", {class: "col center q-pa-none"}, 
                m("div", {class: showPage() == page.name ? "page-active text-center text-bold " : 'text-center text-bold ', onclick: function(){showPage(page.name)}}, 
                  m("span", {}, page.title)
                )
              )
            })
          )
        )
      )
    )
  }
}

App's page content

The most important part of the app. It is a container, the requested page (selected by user in footer) shows it's content inside it.

var pageContent = {
  view: function(){
    return m("div", {class: "q-layout q-layout--standard", tabindex: "-1"}, 
      m("div", {class: "q-page-container q-pa-none", style: {"padding-top":"50px", "padding-bottom": "50px"}}, 
        m("div", {class: "q-pa-md"}, 
          pages.map(function(page){
            if (page.name == showPage()) return m(page.comp)
          }),           
        )
      )
    )
  }
}

The magic part of switching content is here:

pages.map(function(page){
  if (page.name == showPage()) return m(page.comp)
}),

App's pages

Pages are simple components like:

var page4 = {
  view: function(){
    return m("div", [
        m("h4", "This is 'about' page"),
        m("p", "Lorem ipsum dolor sit amet, ...")
    ])
  }
}

It is not all of definitions, we need something more. An array of objects describing each page with name, title, and comp (=component) keys.

var pages = [
  {
    name: "page1",
    title: "theory",
    comp: page1,        // component
  },
  {
    name: "page2",
    title: "exerc.",
    comp: page2,        // component
  },
  {
    name: "page3",
    title: "sett.",
    comp: page3,        // component
  },
  {
    name: "page4",
    title: "about",
    comp: page4,        // component
  },  
]

This array is used by footer component (number of columns and their names) and pageContent component (switching content).

Example of real app

Full source code of CSS and JS (as described above) is on flems.io I hope it inspires you :-)

MithrilJS, create HTML table from 2D array of data

Pavel Kříž — Tue, 17 Oct 2023 16:44:13 +0000

This is my 8th write up on dev.to site. I will show you Mithril component creating HTML table populated with data as two dimensional array.

Mithril JS

Mithril JS is an amazing JS framework, small and very effective. It can be used to program web/mobile apps, Single Page Applications (SPA). See the documentation for details.

Mithril component

There are many ways how to write component, one of them is JS object (a.k.a. POJO = Plain Old Javascript Object). Components can also receive and use data you put them.

Component table

We will write table component, so it creates HTML table and renders it into page in a browser.

var table = {
  oninit: function(vnode){
    /*
    this.data = vnode.attrs.data,
    this.title = vnode.attrs.title,
    this.titleClass = vnode.attrs.titleClass
    */
    self = vnode.attrs
  },
  view: function(vnode){
    return m("div", [
      m("table", 
        self.title
        ? m("tr", 
            m("td", {colspan: self.data[0].length, class: self.titleClass}, self.title)
          ) 
        : null,
        self.data.map(function(tr){
          return m("tr", tr.map(function(td){
            return m("td", {class: "text-center"}, td)
          })
        )})
      )
    ])
  }
}

Let me explain my code. Table component consists of two functions - oninit(vnode) and view(vnode). Component (when used/called) receives one or more arguments (parameters) and both functions have access to them via vnode object.

---> oninit(vnode) function <---

Pay attentions to first one - oninit(vnode) - function. There are three commented lines of code; it is common way how to use parameters. Say, our component table needs data to create populated table's cells (html td tag). So, you write something like this:

oninit: function(vnode){
  this.data = vnode.attrs.data
},

Everything looks good and works well, you are satisfied. Then you think about another parameter title. It would be great to have table with caption/title. Therefore you extend oninit(vnode) function and add second parameter:

  oninit: function(vnode){
    this.data = vnode.attrs.data,
    this.title = vnode.attrs.title
  },

Looks good, table is pretty and useful. Is there any improvement? Yeah, what about class for title to customise it? And number of parameters grows...

oninit: function(vnode){
  this.data = vnode.attrs.data,
  this.title = vnode.attrs.title,
  this.titleClass = vnode.attrs.titleClass
},

This (common) way means to add another line of code to specify another parameter. But there is even better way: one object, and that is one line of code below three commented lines:

oninit: function(vnode){
  self = vnode.attrs
},

This is a little trick. You assign all parameters as one object to another object named self.
You can simply use any of parameters this way:

self.title

instead of (common) way:

this.title

--> view(vnode) function <---

This is a place where all magic happens :-) At the begining div tag is created (useful for horizontal shift when table is too wide), then table tag and optionally one row with one cell with title of table.
Data are iterated by map function, first it creates rows - tr tags - dependeded of y-dimension of data. Inside rows is another iteration by map function walking each piece of data in x-dimension.

Example of two data arrays we use for our table component:

var data1 = [
  [-2, -1, 0, 1, 2],
  [3, 3, 3, 3, 3],
  [-5, -3, 0, 42, 99]
];

var data2 = [
  ["John", "Marry", "Peter"],
  [2003, 2007, 2001],
  ["student", "writer", "worker"]
];

Our table component simply gets data and creates corresponding rows and cols derived from data array.

use of table component

With the use of data1 and data2 arrays we use table component like this:

m(table, {data: data1, title: "Numbers", titleClass: "text-red text-center text-bold"})

m(table, {data: data2})

Live example is at this flems.io link.

Hope this is useful for you :-)

VueUse and VueJS OPTION API

Pavel Kříž — Sun, 13 Aug 2023 08:10:21 +0000

This is my 7th write up on dev.to site. I have tried two functions - useStorage and useColorMode - and it works even with VueJS Option API. Source code of important parts as a simple example is included.

VueUse

VueUse is an library of functions, it covers a wide spectrum of useful enhancements for VueJS apps. It describes itself as a Collection of Vue Composition Utilities and it's documentation begins with VueUse is a collection of utility functions based on Composition API.
Since I have used VueJS from it's 1.x version, I still use as a developer of mobile apps Option API. Call me conservative person but I like it.

VueUSE + VueJS: useStorage, useColorMode

I show you a simple example of both functions on web/mobile app (HTML + CSS + JS).

First declare two objects outside of any VueJS app or component. OK, declaration doesn't look as an classic object, you can verify it by console.log(typeof state) and console.log(typeof colorMode) and it says object.

const state = VueUse.useStorage('state', 
  {age: 21, numbers: []}, 
  localStorage,
  {mergeDefaults: true}
);

const colorMode = VueUse.useColorMode({
  modes: {
    dark: 'dark',
    dim: 'dim',
    cafe: 'cafe',
  },
  attribute: 'theme',
});

Next step is to declare two variables inside Vue main app, both are assigned to above declared objects.

const app = Vue.createApp({
  template: "#main",
  data: function(){
    return {
      state: state,
      colorMode: colorMode,
    }
  },
...
});

Now I can use state.age and state.numbers (from first object, state) as persistent values. It means I can reload app, close it and open again and all data stored in state object (age, numbers) are loaded back from localstorage. For more information see documentation.

<label for="age">age: </label>
<input v-model="state.age" id="age" >
<p>You are {{state.age}} years old.</p>

The same is for colorMode object, it persist color mode of user's choice. Add simple button to your app, call function on click event and change actual color mode.

<button @click="changeTheme()">{{colorMode}}</button>

changeTheme: function(){
  var newTheme = "";

  if (this.colorMode == "light") newTheme = "dark";
  if (this.colorMode == "dark") newTheme = "dim";
  if (this.colorMode == "dim") newTheme = "cafe";
  if (this.colorMode == "cafe") newTheme = "light";

  this.colorMode = newTheme;
},

It works together with CSS rules:

[theme='dark'] {
  background: #252525;
  color: white;
}
[theme='dim'] {
  background: gray;
  color: white;
}
[theme='cafe'] {
  background: #c0acac;
  color: black;
}

And that's it. Simple example of VueUse with VueJS OPTION API. Hope this inspires you.

Mobile app: Google Sheet as data BACKUP (not database)

Pavel Kříž — Tue, 01 Aug 2023 15:41:27 +0000

This is my 6th write up on dev.to site. Simple solution for data backup in Google Sheet.

Problem to solve

I have developed many mobile apps for my clients. The typical usage of an app is by one person or a few people (family, small team) and all data is created on mobile phone. It means app has form and user fills data on phone. Data is stored in localstorage on phone as an array of JSON objects.

My apps are typically running on phones without active data connection (really: no internet) and there is NOT necessary for data to be realtime.

Since all data is stored on phone's internal memory (localstorage), it is not save. Problems may arise and data demage or data loss may occur.

That's why I decided to find simple solution for data backup. As the title of this article says, I use Google Sheet with Apps Script.

The solution

Important note: data created on app is not extensive; say a few kB (< 20 kB).

As my goal is to backup data - and not create database - I use very simple solution with Google Sheet included Apps Script. I create new sheet for app, fill titles of four columns A, B, C, D as timestamp, date and time, note and data backup. The main idea is simple: data is stored as string represents array of data in one cell inside Google Sheet. So, there is no structure, all data from one backup process is stored inside one cell (column D). It means implementation of backup process is simple and general.

User first fills note for the backup process - it is useful later when data is restored from backup - and sends data to Google Sheet (mobile app sends secret key together with data to backup - it is protection/auth and name of sheet inside Google Sheet doc). Then doPost function is called on Google Apps Script (implemented inside Google Sheet):

function doPost(request){

  var doc = SpreadsheetApp.getActive();

  var time = new Date();
  var timestamp = time.getTime();
  var data = JSON.parse(request.postData.contents);
  var app = data.app;
  var note = data.note;
  var backup = JSON.stringify(data.backup);

  var sheet = doc.getSheetByName(app);

  var output = null;

  if (sheet && app.toLowerCase() == "...SECRET KEY HERE..."){
    output = saveData(sheet, timestamp, time, note, backup);
  };

  if (!sheet) {
    output = 100;
  };

  var objReturn = {
    "timestamp": timestamp,
    "code": output,
  };

  return ContentService.createTextOutput(JSON.stringify(objReturn)).setMimeType(ContentService.MimeType.JSON);

};

Function returns timestamp (not necessary) and status/error code. The data backup is processed by function saveData:

function saveData(sheet, timestamp, time, note, backup){

  var output;

  try {
    var lock = LockService.getPublicLock();

    lock.waitLock(30000);

    sheet.appendRow([timestamp, time, note, backup]);

    lock.releaseLock();

    output = 0;

  } catch (error) {
    output = 101;
  }

  return output;

};

Function tries to append new row to sheet and returns status code 0 (success) or 101 (error code). OK, I know there are to columns with almost same information (columns A, B - timestamp, data and time). Thats for quick overview of me. It is better to see 16. 7. 2023 19:15 (europian format) than timestamp 1689527719019 :-)

As the limit of one cell in Google Sheet is 50 000 chars, there is (in my case!) enough space to store all data in one cell. And it is all. Very simple solution for data backup.

Hope this help you...

Mithril PWA Todo app < 20 kB

Pavel Kříž — Mon, 10 Apr 2023 13:24:16 +0000

This is my 5th write up on dev.to site. Yet another todo app written using Mithril JS.

Mithril JS

As a fan of mobile PWA app development I have written some mobile apps. SPA/PWA (mobile) apps are web pages/apps with some extra features written with combinations of HTML, CSS and JS.

I used to use Quasar framework (both JS and CSS) and VueJS (v2 --> v3).

Mithril JS is another framework for SPA (Single Page Apps). It is one lightweight JS file (cca 10 kB).

Well, I decided to write simple app with Mithril instead of Vue.

16 kB challenge

My first idea and challenge was to write lite app under 16 kB complete. The real SPA PWA app, HTML + CSS + JS, service worker, manifest, icon, all together under 16 kB.

And what is the simplest app than todo? There is no one :-)

As you can suggest from the title of this post, I haven't touch my goal and the entire app has slightly more than 16 kB.

Todo app

My app is under 20 kB total size, one page only with the ability to add, edit and delete todos. It has extra features: you can choose one of four background color of the todo, one of the five languages - although this is very funny, couse there are few words only to translate - and the background color of the app itself with gradient effect.

If you are interested or courious you can check it on its URL address: https://mithril-todo.netlify.app/

It is PWA app, so you can install it to your device (Android, iOS, Windows, Chrome OS).

Quasar: Send email with custom data from web app without backend

Pavel Kříž — Sat, 18 Feb 2023 15:28:03 +0000

This is my 4th write up on dev.to site. I show you a simple way to send an email with data from your Quasar web app. It works on my Android phone (not tested on iOS).

(HTML) a href mailto:

HTML language implements mailto: schema to send an email from web page. Typical example is something like:

<a href="mailto:email@example.com?subject=Mail from our Website">Send Email</a>

Click on this <a> tag and the browser calls mail app from your operating system.

(Quasar) q-btn href mailto:

In Quasar framework you can use href mailto: even in button (q-btn component).

Quasar is based on VueJS so you can use attribute's values indirectly from variable.

What does it mean? Instead of

<q-btn href="mailto:email@example.com?subject=data backup" label="send email" color="green" class="full-width" no-caps></q-btn>

you can use

<q-btn :href="mail" label="send email" color="green" class="full-width" no-caps></q-btn>

And this is the place where the important part happens. Suppose we have variables defined in Quasar/VueJS app:

data: function(){
  return {
    address: "email@example.com",
    subject: "data backup",
    people: [{id: "001", name: "John"}, {id: "002", name: "Lucy"}],
  }
},

The people array is an example of data we send via email. We define computed function named mail which returns string value with complete mailto: schema including people array as body of the email message.

computed: {
  mail: function(){
    var date = new Date().toLocaleString("cs-CZ", {day: "2-digit", month: "2-digit", year: "numeric"});
    var data = "\n\n\n\n" + JSON.stringify(this.people) + "\n\n\n\n"

    return encodeURI(`mailto:${address}?subject=${subject} ${date} &body=${data}`)
  }
},

Pay attention to:

encodeURI() function, it encodes string to be safely used via http protocol
JSON.stringify() to convert JSON object to string
backticks at both sides of mailto: schema, it allows us to unite both string and variable's value

You can ask two questions now:

Q: Why there is "\n\n\n\n" on both sides of data we send?
A: It is not necessary but that helps you copy data from mail client on mobile phone reading received message.
Q: What is it good for?
A: You can use it as an naive data backup of your app's data - or - as an information email containing data you would like to see.

Hope this article helps you...

Forem: Pavel Kříž

Production-Ready Smart Caching for PWA with Service Workers and IndexedDB

Inspiration

The problem with naive caching

The smart approach: version per file

Key design decisions

1. event.waitUntil must wrap everything

2. No double-caching on install + activate

3. Bypass the browser's HTTP cache with cache: 'no-cache'

4. Fetch timeout via AbortSignal.timeout()

5. Retry logic with exponential backoff — but not for permanent errors

6. Handle QuotaExceededError on cache.put()

7. IndexedDB fallback to an in-memory Map

8. Multi-app isolation with APP_NAME

9. Clean path rules — no query strings in filesToCache

Periodic update check for long-running PWAs

User-facing update notification

Vanilla JS

Quasar + Vue 3 (Option API)

How it all fits together

Complete source

Summary of improvements over the original idea

Curiosity: Using Ably.io Realtime Messaging as a Lightweight Database

Persistent variables in MithrilJS

Mithril JS

stream

persistent variables

example of functional code

Multilanguage manifest.json for PWA

PWA, manifest.json

MithrilJS component with state management

MithrilJS

State management

Component

State

OR gate

Short explanation

Source code

VueJS + CSS: grid template based on variable

CSS grid

CSS grid layout example

Mithril JS + Quasar CSS + mithril stream + UI (pages) -> real app

App layout (mobile app)

App's header

App's footer

App's page content

App's pages

Example of real app

MithrilJS, create HTML table from 2D array of data

Mithril JS

Mithril component

Component table

---> oninit(vnode) function <---

--> view(vnode) function <---

use of table component

VueUse and VueJS OPTION API

VueUse

VueUSE + VueJS: useStorage, useColorMode

Mobile app: Google Sheet as data BACKUP (not database)

Problem to solve

The solution

Mithril PWA Todo app < 20 kB

Mithril JS

16 kB challenge

Todo app

Quasar: Send email with custom data from web app without backend

(HTML) a href mailto:

(Quasar) q-btn href mailto:

1. `event.waitUntil` must wrap everything

3. Bypass the browser's HTTP cache with `cache: 'no-cache'`

4. Fetch timeout via `AbortSignal.timeout()`

6. Handle `QuotaExceededError` on `cache.put()`

9. Clean path rules — no query strings in `filesToCache`