Offline Sync#

Demo#

Explanation#

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

The data-persist.local attribute dumps the signals to a datastar key in localStorage. A similar thing happens with session 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.