Ggthjy

In my site:

• Users have many Activities


• Each Activity has encoded_polyline data


• I display these encoded_polylines on a map

I want to use IndexedDB (via Dexie) as an in-browser cache so that they don't need to re-download their full Activity set every time they view their map. I've never used IndexedDB before, so I don't know if I'm doing anything silly or overlooking any edge cases.

Here's a high-level description of what I think the overall process is:

• Figure out what exists on the server


• Remove anything that is present in IndexedDB but is not present on the server


• Figure out what exists in IndexedDB


• Request only the data missing in IndexedDB


• Store the new data in IndexedDB


• Query all of the data out of IndexedDB

Throughout all of this, we need to be focusing on this user. A person might view many people's pages, and therefore have a copy of many people's data in IndexedDB. So the queries to the server and IndexedDB need to be aware of which User ID is being referenced.

Here's the English Language version of what I decided to do:

• Collect all of this User's Activty IDs from the server


• Remove anything in IndexedDB that shouldn't be there (stuff deleted from the site that might still exist in IndexedDB)


• Collect all of this User's Activty IDs from IndexedDB


• Filter out anything that's present in IndexedDB and the server


• If there are no new encoded_polylines to retrieve then putItemsFromIndexeddbOnMap (described below)


• If there are new encoded_polylines to retrieve: retrieve those from the server, then store them in IndexedDB, then putItemsFromIndexeddbOnMap
  

For putItemsFromIndexeddbOnMap:

• Get all of this user's encoded_polylines from IndexedDB


• Push that data into an array


• Display that array of data on the map

Here's the JavaScript code that does what I've explained above (with some ERB because this JavaScript is embedded in a Rails view):

var db = new Dexie("db_name");

db.version(1).stores({ activities: "id,user_id" });

db.open();



// get this user's activity IDs from the server

fetch('/users/' + <%= @user.id %> + '/activity_ids.json', { credentials: 'same-origin' }

).then(response => { return response.json() }

).then(activityIdsJson => {

  // remove items from IndexedDB for this user that are not in activityIdsJson

  // this keeps data that was deleted in the site from sticking around in IndexedDB

  db.activities

    .where('id')

    .noneOf(activityIdsJson)

    .and(function(item) { return item.user_id === <%= @user.id %> })

    .keys()

    .then(removeActivityIds => {

      db.activities.bulkDelete(removeActivityIds);

    });



  // get this user's existing activity IDs out of IndexedDB

  db.activities.where({user_id: <%= @user.id %>}).primaryKeys(function(primaryKeys) {

    // filter out the activity IDs that are already in IndexedDB

    var neededIds = activityIdsJson.filter((id) => !primaryKeys.includes(id));



    if(Array.isArray(neededIds) && neededIds.length === 0) {

      // we do not need to request any new data so query IndexedDB directly

      putItemsFromIndexeddbOnMap();

    } else if(Array.isArray(neededIds)) {

      if(neededIds.equals(activityIdsJson)) {

        // we need all data so do not pass the `only` param

        neededIds = [];

      }



      // get new data (encoded_polylines for display on the map)

      fetch('/users/' + <%= @user.id %> + '/encoded_polylines.json?only=' + neededIds, { credentials: 'same-origin' }

      ).then(response => { return response.json() }

      ).then(newEncodedPolylinesJson => {

        // store the new encoded_polylines in IndexedDB

        db.activities.bulkPut(newEncodedPolylinesJson).then(_unused => {

          // pull all encoded_polylines out of IndexedDB

          putItemsFromIndexeddbOnMap();

        });

      });

    }

  });

});



function putItemsFromIndexeddbOnMap() {

  var featureCollection = [];



  db.activities.where({user_id: <%= @user.id %>}).each(activity => {

    featureCollection.push({

      type: 'Feature',

      geometry: polyline.toGeoJSON(activity['encoded_polyline'])

    });

  }).then(function() {

    // if there are any polylines, add them to the map

    if(featureCollection.length > 0) {

      if(map.isStyleLoaded()) {

        // map has fully loaded so add polylines to the map

        addPolylineLayer(featureCollection);

      } else {

        // map is still loading, so wait for that to complete

        map.on('style.load', addPolylineLayer(featureCollection));

      }

    }

  }).catch(error => {

    console.error(error.stack || error);

  });

}



function addPolylineLayer(data) {

  map.addSource('polylineCollection', {

    type: 'geojson',

    data: {

      type: 'FeatureCollection',

      features: data

    }

  });

  map.addLayer({

    id: 'polylineCollection',

    type: 'line',

    source: 'polylineCollection'

  });

}

...Am I doing it right?