Marked as work-in-progress (WIP). The content of this post may be unreliable or incomplete. Please check back later.
Open comments page
App Infrastructure Code:
How to make your web app installable.
truePlain JavaScript starter code to build indexedDB data server.
js/infrastructure/models/
Script tags:
<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@f52bc8d/js/infrastructure/models/idb-connection.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@f52bc8d/js/infrastructure/models/idb-wrapper.js"></script>Handle the database upgrade call.
js/application/indexed-db/onupgrade.js
function onUpgradeIDBEvt(event) {
let db = event.target.result;
let dbOldVersion = db.oldVersion ?? 0;
let storeNames = {
notes: 'notes',
};
if (dbOldVersion < 1) {
let storeName = storeNames.notes;
if (!db.objectStoreNames.contains(storeName)) {
db.createObjectStore(storeName, { keyPath: 'id' });
}
}
}Set up indexedDB connection and create a data server object with custom types.
js/application/servers.js
const dbName = 'app-v1-db';
const dbVersion = 1;
const dbConnection = new IdbConnection(dbName, dbVersion, onUpgradeIDBEvt);
// define store item types
/**
* @typedef {Object} Post
* @property {number} id
* @property {string} title
* @property {string} content
*/
// extend the IdbWrapper class with custom type
/** @extends IdbWrapper<Post> */
class PostsIdbStorage extends IdbWrapper {
constructor(dbConnection, storeName) {
super(dbConnection, storeName);
}
}
// pass in the idb connection and store name
let servPosts = new PostsIdbStorage(dbConnection, 'notes');Add or update an item:
await servPosts.Put_({
id: Date.now().toString(),
content: 'First note',
});Delete an item:
await servPosts.Delete_(id);Clear store data:
await servPosts.Clear_();