datastar/site/static/md/examples/offline_sync.md

Offline Sync

Demo

Go offline, then online to see the signals sync

Explanation

<div
  data-signals='{"existingSignals":"this will persist in the signals even without network"}'
  data-persist
  data-on-online__window="console.log('online, syncing'); @put('/examples/offline_sync/sync')"
  data-on-offline__window="console.log('offline')"
>
  <div id="results"></div>
</div>

The data-persist attribute dumps the signals to a datastar key in localStorage. A similar thing happens with the __session modifier but gets saved to sessionStorage. Any updates will be saved and reload on page refresh. To fully work this needs a service worker like workbox to be installed. To test it go to the network tab of your browser's dev tools and toggle Online/Offline.