Indexed DB support

Detlef Jaeger

Hello,

first of all: I bought the editor earlier this year and after hard work everything works perfectly according to my individual ideas (it's my first Web-App - I'm a Desktop-Developer). It's a great product with an incredible amount of "secret" features, so almost anything is possible!

Currently I am faced with the task of making my application available offline. Progressive Web App (PWA) is my strategy and so far a few basic functions in combination with Workbox work great.

Now, Indexed DB for offline mode in combination with the editor is my next step. I have already implemented the basic structure, so that the data of the online database (MySQL) is synchronized with the Indexed DB.

I know there is an example of the connection from the editor to the Indexed DB.
Nevertheless my demand, if there are already plans for a connector specifically for Indexed DB, which allows a simple integration with the same data structure.
If so, I would still currently devote myself to the other numerous tasks and later implement the offline function.

Maybe there is a quite simple approach about Ajax and the php-page ... so after an offline check (I could do that myself) the indexed DB is accordingly queried and then returns the result in JSON-format to the editor?

I think the topic will be more and more in focus due to PWAs and it would be a great feature.

allan

if there are already plans for a connector specifically for Indexed DB, which allows a simple integration with the same data structure.

There aren't any plans to support Indexed DB at the moment on the client-side natively with Editor at the moment. That said, it absolutely can be done. This example shows Editor with localStorage that same method (overriding ajax with a function that access the database) could readily be used for Indexed DB.

Allan

Detlef Jaeger

Hello allan,

i got it ;-) and everything is working fine (searching, page loading, etc.).

I use dexie.js which reads the data from the IndexedDB a little bit faster.

One problem however is loading from large tables (> 4000) on
mobile devices.
Currently I have to load all data from IndexedDB. The next task for me is to implement the editors page loading with IndexedDB and don’t lost the search function.

colin

Hi @Detlef Jaeger ,

You can limit what's loaded with deferRender - only those rows visible are drawn. This section of the FAQ should help, it discusses various techniques to improve performance,

Cheers,

Colin

Detlef Jaeger

Hello allan,

thanks for the hint.

But the problem is not on the side of DataTables.

At the moment I must load all data from the IndexedDB, so that I can easily process them afterwards in DataTables (search function etc.).

5000 data on a PC are no problem (about one second).
But on a mobile device it takes 6 seconds (just loading from IndexedDB - not processing DataTables).

I would already limit the loading of data from the indexed database according to the current page etc.
With Dexie.js this would have to work:
https://dexie.org/docs/Collection/Collection.offset()#paged-or-queries

The question is if I can respond to all relevant events (page, length, order, search) of DataTables and then start a new limited query on Dexie.js.

colin

Have you tried the deferRender that I suggested?

allan

If deferRender doesn't help (it sounds like the problem is more with the database running in the client rather than the rendering of the table), then you could use server-side processing. Using that you can indeed response to all the required events for DataTables to draw just the data needed for any one single page of data.

Allan

Detlef Jaeger

Hello allan,

Thanks again for your time and help!

I already use deferRender and for online access also the option serverSide.

I read out the time at the relevant points (here with your example):

request.onsuccess = function(event) {
db = request.result;
var d = [];
setTimeout( function () {
**const Time1 = new Date();**
db.transaction("Adr").objectStore("Adr").openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if ( cursor ) {
// Rows need an ID
d.push( $.extend( true, {}, cursor.value, {DT_RowId: cursor.value.id} ) );
cursor.continue();
} else {
if ( d.length > 0 ) {
**const Time2 = new Date();**
$('#Kundenliste').dataTable().fnAddData(d);
**const Time3 = new Date();**
alert("Time1: " + Time2 + " Time2: " + Time2 + " Time3: " + Time3);
}
}
};
}, 500 );
};

There are 5340 records in the IndexedDB. 52 fields with 11 indices. Content is just text.

On the smartphone:
Time1: 20:44:22
Time2: 20:44:25
Time3: 20:44:33

On the PC:
Time1: 20:58:18
Time2: 20:58:18
Time3: 20:58:19

The same data in a MySQL database will load online in less than 2 seconds on the smartphone. I'm still a bit helpless ...

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

As Allan said, if the issue is just the speed of the DB (which it appears to be given it's faster with MySQL), then the only other option is serverSide, so only the rows being displayed are queried and sent to the client.