Skip to content

fix: use network-first for navigation to prevent stale HTML/MIME errors#33

Merged
brianorwhatever merged 1 commit intomainfrom
fix/sw-network-first-navigation
Feb 7, 2026
Merged

fix: use network-first for navigation to prevent stale HTML/MIME errors#33
brianorwhatever merged 1 commit intomainfrom
fix/sw-network-first-navigation

Conversation

@krusty-agent
Copy link
Collaborator

Problem

The text/html is not a valid JavaScript MIME type error keeps happening even after PR #23.

Root Cause Analysis

PR #23 correctly stopped caching hashed assets, BUT the cached index.html still references old asset hashes:

  1. User visits site → SW caches / (index.html with <script src="/assets/index-abc123.js">)
  2. New deploy happens → new index.html references index-xyz456.js
  3. User revisits → SW serves cached old HTML
  4. Browser tries to load index-abc123.js → 404 → SPA fallback returns HTML
  5. Browser fails: 'text/html' is not a valid JavaScript MIME type

Solution

Network-first for navigation requests - ensures users always get fresh HTML.

Changes to service-worker.ts:

  • Navigation requests now use network-first strategy
  • Only fall back to cache when offline
  • Cache version bumped to lisa-v3 to clear old caches
  • Improved asset hash detection regex

Changes to sw-registration.ts:

  • Stale asset detection: Listens for script errors and dynamic import failures
  • Auto-clears all caches and reloads when MIME errors detected
  • updateViaCache: 'none' forces SW update checks on every page load
  • Periodic SW update checks every 5 minutes
  • Auto-reload on controllerchange (when new SW activates)

Testing

  • Build succeeds ✅
  • SW correctly serves fresh HTML on navigation
  • Hashed assets bypass SW entirely (browser caching via immutable headers)
  • Existing users with bad caches will auto-recover on MIME error

Breaking Changes

None. Users with old SWs will either:

  1. Get new SW on next visit (controllerchange → auto-reload)
  2. Hit MIME error → auto-clear and reload
  3. Work normally once new SW is active

Fixes the persistent MIME type error issue.

The previous fix (PR #23) stopped caching hashed assets, but the root
issue remained: cached index.html still references old asset hashes.

When user visits with stale cached HTML:
1. Cached HTML references old hashes (e.g., index-abc123.js)
2. New deploy has different hashes (e.g., index-xyz456.js)
3. Browser loads old HTML → requests old JS → 404 → HTML response
4. Browser fails with 'text/html is not a valid JavaScript MIME type'

Changes:
- Network-first for navigation requests (HTML always fresh from server)
- Fallback to cache only when offline
- Cache version bump to lisa-v3 to clear old caches
- Add stale asset detection that auto-refreshes on MIME errors
- Add updateViaCache: 'none' to force SW update checks
- Periodic SW update checks every 5 minutes
- Handle controllerchange to auto-reload on SW update

This ensures users always get fresh HTML with correct asset references,
while still supporting offline access as a fallback.
@brianorwhatever brianorwhatever merged commit a4c73fd into main Feb 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants