Can I Use IndexedDB – the Database of the Web Browsers?
IndexedDB Database is the accepted (standardized) way of storing semi-structured & organized information in the Web Browsers. It is supported by most of them in their latest version: https://caniuse.com/indexeddb. In programming terms – you could check the support programmatically this way:
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
} Should I Use IndexedDB – the Database of the Web Browsers?
- Do you have Data Models that are structured?
- Do you have Business logic that could work offline – without the help of a Back-End?
- Do you want your browser client to function like app?
- Do you really need it like that? Who is your user?
- Are you going to support older, legacy browsers or you gonna look into the future where the users are having up-to-date software?
All in All – This is an architectural decision that is not made so much from the technical detail so much – than – the users and their use case, the client, the environment and platform of execution, and at last place – the developers.
How Do I Use IndexedDB – the Database of the Web Browsers?
The Database has API presented as a versioned file. First it needs to be opened. If requested versions of the file and the request do not match, an update callback is called by the API.
_dbPromise = indexedDB.open("offlineNotesWebPage", 1);
var self = _dbPromise;
var onerror = (e) => {
console.log(e);
};
_dbPromise.onerror = onerror;
_dbPromise.onsuccess = function (event) {
//resultCallback.call(self.result, self.result);
};
_dbPromise.onupgradeneeded = function (event) {...} After successful opening of the file, the API offers a connection object that allows opening transactions against the files. On successful initialization of database session, read (and if requested – also write) operations are allowed on Object Stores (Database Tables). There are functions for defining data models and all the standard CRUD operations: https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore. What is the most tricky thing is – that they are all a-synchronically executed from the usual call flow. Whatever result or failure error response gets delivered via callback functions and many software developers will have a hard time Debugging problems.
Utility To Boost your use of IndexedDB Database
License for – Database Application Generator /GeneratorApp/ – Version – All – Executable Build
The Utility for Generating Source Code around Data Model Definition has Indexed DB as implemented Target Platform.
It Generates JavaScript Model Definitions:
function Note() {
this.id = 0;
this.content = "";
} JavaScript Data Access classes:
initDB = function (resultCallbackWithIndexedDBConnection) { ... }
function NoteDao() {}
NoteDao.loadRecord = function (id, callback) { ... }
NoteDao.getPage = function(offset, callback, total) { ... }
NoteDao.save = function (f, callback) { ... }
NoteDao.removeRecord = function (id, callback) { ... }
and separated from the others – Plain HTML + JavaScript view Layer:
function reloadPage() {
NoteDao.getPage(0, (result) => {...});
var notes = document.getElementById('notes');
---- <h3>Note</h3>
…
<table id=”notes” width=”100%”>… </table>
<div id=”totalNotes”>Total : 0</div>
<button id=”addeditnotebutton”>Add</button>
<form id=”addeditNoteForm”><input id=”noteId” type=”hidden” />
<div><label for=”noteContent”> <input id=”noteContent” name=”noteContent” type=”text” /></label></div>
<input id=”addeditnotesubmit” type=”submit” value=”Save” /> <input id=”addeditnotecancel” type=”submit” value=”Clear” />
</form>
It is replaceable by whatever User Interface Technology you’d like. The example apps bellow are direct example of that.
Demo Apps Build with Indexed DB
https://programtom.com/developapp.online/ – A No-Code Free – Online version of my Database Application Generator. Define Data Models, Model Properties, Sync the Data Model and on second Sync a link to the build was able to be received. There is no interest in this project so currently The Building Task is turned off, but the UI is still present and you could play with it.
Simple Notes App Data Model – Note (id, content):
Offline IndexedDB – In Browser Notes Web Page – Flutter Web – Source Code
A Stuff Organizer Data Model. You’ll be able to type in places and storing locations within places (in infinite sub-levels) and at the bottom – in each place you could add items. It has the idea of organizing your stuff so one they, when you search for something (currently not implemented) the app would be able to tell you where it is located.
Offline IndexedDB – In Browser Stuff Organizer Web Page – Flutter Web – Source Code
Simple To-Do App in the Browser – Todo(id, title, is done)
Offline IndexedDB – In Browser To-Do Web Page – Flutter Web – Source Code
Similar to Stuff Organizer – Folders (with id, title, [sub-folders]), and notes (id, content) inside folders
Offline IndexedDB – In Browser Folders & Notes Web Page – Flutter Web – Source Code
This is the CRUD side of a budgeting app – Wallet (id, name, amount), money flow (amount – + or -), items (where the money comes from or flows to). Statistics are in to be implemented.
Offline IndexedDB – Personal Budget App Web Page – Flutter Web – Source Code
Very Simple App for Storing Employees.
Here are more tutorials from the Internet where you could look up for reference, documentation, tips and tutorials:
https://developers.google.com/web/ilt/pwa/working-with-indexeddb
https://dev.to/saurabhdaware/make-websites-work-offline-offline-storage-making-indexeddb-the-hero-1oee
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API