Skip to content

Offline: localStorage Persister fails to restore data after PWA is reloaded twice #10142

@slax57

Description

@slax57

Describe the bug

We implemented offline query data persistence in our PWA following the React Example: Offline.

While we are using the PWA, if we simulate getting offline everything works as expected (we can navigate through data that's already in the cache).
If we close and reopen the PWA once (simulated by refreshing the browser tab on desktop), the data persisted in localStorage is properly restore.

However, if we close and reopen the PWA a second time (again, simulated by refreshing the browser tab) without having gained back connectivity (i.e. remaining offline the whole time), then the cached data is gone.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/withered-water-nnxdr2?workspaceId=ws_GvfcTzCi2aJ7bCaQr5bmfV

Steps to reproduce

The provided sandbox is forked from the React Example: Offline.

Key changes:

  • Add a checkbox to mount/unmount the app (otherwise we can't reload the app while being offline since the service worker is not configured to serve the main page)
  • Target a real API (JSONPlaceholder) instead of mock data, which is affected by connectivity

Steps to reproduce:

  1. Initial loading
  2. Open the sandbox
  3. Mount the app to load data into cache
  4. First reload
  5. Refresh the sandbox preview iframe
  6. Using the browser DevTools, simulate Offline connectivity
  7. Mount the app
  8. The cached data should be rendered
  9. Unmount the app
  10. Simulate Online connectivity
  11. Second reload
  12. Refresh the sandbox preview iframe
  13. Simulate Offline connectivity
  14. Mount the app
  15. Notice the cached data is missing!

Expected behavior

On second reload I expect the data to be restored from the localStorage, just like it was on first reload.

How often does this bug happen?

Every time

Screenshots or Videos

Screencast.2026-02-17.16.16.54.mp4

Platform

  • OS: Linux
  • Browser: Brave
  • Brave version: 1.86.148
  • Chromium version: 144.0.7559.133

Tanstack Query adapter

react-query

TanStack Query version

5.90.21

TypeScript version

5.8.3

Additional context

We are experiencing this issue in a real PWA (built with Vite PWA plugin) on mobile hardware, not only on desktop with the convoluted steps described above.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions