Bucket Notes

This application is a proof of concept for an offline-first note-taking platform. It uses the modern Chrome Storage Buckets API to manage local data with greater control than standard web storage.

The Storage Buckets API

The Storage Buckets API allows websites to group their data into named "buckets." This is a significant improvement over traditional storage where the browser handles all a website's data as a single unit during storage pressure. By using buckets, we can prioritize which data is most important and should be kept longest.

Our Implementation

1. Feature Detection: We check for the API in both the newer navigator.storage.buckets path and the older navigator.storageBuckets path to ensure compatibility across recent browser versions.
2. Bucket Initialisation: We create a dedicated bucket named "notes" with specific policies:
   • Persistence: Enabled to survive storage pressure.
   • Durability: Set to "strict" to minimize data loss during unexpected power outages.
3. Scoped Storage: We use the bucket.indexedDB entry point rather than the global window.indexedDB. This ensures that all note data is physically and logically contained within our specific bucket.

Application Architecture

The project is built as a modular vanilla JavaScript application:

• src/storage/bucket-layer.js handles the API lifecycle and feature detection.
• src/storage/note-store.js manages the IndexedDB CRUD operations inside the bucket.
• src/ui.js handles pure DOM rendering for the dark-mode interface.
• src/app.js orchestrates the state management and user interactions.

How to Run

To run the app, you must use a web server because it relies on ES modules.

Using Node.js

npx serve .

Using Python

python -m http.server

Open the local URL in a modern Chromium browser to see the app in action.