zwave-js / zwave-js-ui / 19431150818

20%

push

github

fix(pwa): prevent cache mismatch errors after updates (#4452)

Users see "Error: Not Found" after application updates due to the
service worker activating immediately and serving stale cached resources
against new routes.

## Root Cause

- `skipWaiting: true` and `clientsClaim: true` in workbox config cause
immediate SW activation
- New SW takes control while page still expects old routes/assets
- Cache manifest mismatch produces 404 errors

## Changes

### Service Worker Configuration (`vite.config.mjs`)
Remove automatic activation flags from workbox config:
```diff
  workbox: {
    cleanupOutdatedCaches: true,
-   skipWaiting: true,
-   clientsClaim: true,
    globIgnores: ['**/api/**'],
  },
```

### Service Worker (`src/sw.js`)
Remove immediate `clientsClaim()` call. Activation now deferred until
explicit user confirmation:
```diff
- import { clientsClaim } from 'workbox-core'
  
  self.addEventListener('message', (event) => {
    if (event.data && event.data.type === 'SKIP_WAITING') {
      self.skipWaiting()
    }
  })
  
- clientsClaim()
```

### Update Handler (`src/App.vue`)
Reload page after SW activation to fetch resources from new cache:
```diff
  await event.detail.updateSW()
- // do not reload page
+ // Reload the page to ensure the new version is loaded properly
+ window.location.reload()
```

## Update Flow

1. New SW downloads → waits in "installed" state
2. User sees "Update available" dialog
3. On acceptance: SW activates → page reloads → fresh resources served
4. On rejection: old SW continues, update deferred to next visit

This ensures cache and routes remain synchronized throughout the update
process.

<!-- START COPILOT CODING AGENT SUFFIX -->



<details>

<summary>Original prompt</summary>

> 
> ----
> 
> *This section details on the original issue you should resolve*
> 
> <issue_title>Error: Not found on updated installations</issue_title>
> <issue_description>>
![Image](https://github.com/user-attachments/assets/58df7e8c-aa... (continued)

333 of 441 branches covered (75.51%)

Branch coverage included in aggregate %.

0 of 6 new or added lines in 1 file covered. (0.0%)

4048 of 21387 relevant lines covered (18.93%)

1.18 hits per line