# Browser Storage & Offline Studio — starter instructions

## Run the notes example
Upload the entire offline-notes folder with index.html and sw.js together. Open it over HTTPS or localhost; file:// is not a service-worker environment. The main Studio does not register a worker. Click Enable offline inside the example, wait for setup, then reload once online. Confirm control before testing an offline reload.

The example uses a single small localStorage note, versioned JSON, guarded reads/writes, current-draft and raw-value exports, and a narrowly scoped shell cache. It has no server, sync, login, analytics or background submission. Use fictional data. Saving locally is not a cloud backup.

## Ownership boundaries
- Course progress: discoveryvip-browser-storage-v1. Course reset affects only course state.
- Web Storage lab: discoveryvip-browser-storage-demo-v1, separately in localStorage or sessionStorage.
- IndexedDB lab: discoveryvip-browser-storage-records-v1, notes object store, up to 20 demo records.
- Notes example: discoveryvip-offline-notes-example-v1.
- Notes shell caches: discoveryvip-offline-notes-shell-*.
- Service-worker scope: only the offline-notes directory.

Course backup exports include lab input drafts, not the separately stored real experimental records. Remove the Web Storage key and individual IndexedDB records with their lab buttons. No code uses localStorage.clear or deletes unrelated databases/caches.

## Test matrix
1. Save a fictional note, reload and read it.
2. Export a draft and verify its version/body shape.
3. Enter a malformed saved value in a disposable browser context; reload. Confirm it is reported without being silently overwritten, and raw export remains possible.
4. Enable offline while online; reload once online; then reload offline.
5. Try a never-cached page offline and distinguish it from the known cached shell.
6. Remove only the example’s offline support; confirm the note remains and other cache names remain.
7. Remove the example’s note; confirm unrelated localStorage keys remain.
8. Test an updated worker with a bumped version and an old tab open. This example retains the normal waiting lifecycle; it does not call skipWaiting or force a new controller.

## Cleanup
The example provides separate buttons for removing its saved note and its worker/cache. Unregistering does not immediately remove the controller from an already-open page; close/reopen online to finish the lifecycle. Do not unregister every worker on the origin. In DevTools, inspect exact names before manual cleanup.

## Limits
The note is at most 4,000 characters. Storage policies, eviction, private browsing and errors vary. The shell is cache-first and must be versioned when HTML changes. This is a teaching example, not a multi-user sync system. The queue, migration, cache-strategy and budget labs are simulations; the Web Storage and IndexedDB labs use real browser stores.