IndexedDB or Local Storage for saving data when offline?

[SimonLab]

https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa
https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker

The request/response are saved with the cache api (https://developer.mozilla.org/en-US/docs/Web/API/Cache)

The recommended api for saving other data is indexedDB (https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) as the localStorage api is not supported with service worker

[nelsonic]

@SimonLab good thinking. 👍

[SimonLab]

Backround Sync and Sync Manager. Unfortunately these APIs are specific to the Chrome/Firefox
https://caniuse.com/#feat=background-sync
https://developer.mozilla.org/en-US/docs/Web/API/SyncManager

[nelsonic]

@SimonLab good researching. 👍
(hope you aren't "workin" today ... iDon't want to get into trouble with Jo when you should be painting...) 😉

It could be worth reading:
https://medium.com/offline-camp/hack-time-service-workers-background-sync-and-pouchdb-3c8b71535823
|> https://pouchdb.com
|> https://pouchdb.com/learn.html
|> https://pouchdb.com/getting-started.html
|> https://github.com/pouchdb/pouchdb
|> https://www.jsdelivr.com/package/npm/pouchdb

<script src="//cdn.jsdelivr.net/npm/pouchdb@7.1.1/dist/pouchdb.min.js"></script>
<script>
  var db = new PouchDB('my_database');
</script>

Docs are much better than last time I checked.
It's based on CouchDB which (I don't know if you've used it) is a jSON database.
Since our API will be predominantly JSON for the main functionality, we can easily conform to the Couch API style and thus leverage this library to do all the sync functionality.

Thoughts? (also, send photo of your painting progress to group chat!) 😊

[SimonLab]

Currently reading the doc on how to use PouchDB.

Since our API will be predominantly JSON for the main functionality, we can easily conform to the Couch API style and thus leverage this library to do all the sync functionality.

At the moment the Elm PWA app is using the API build with Phoenix and Postgres to save items. I haven't looked how PouchDB synchronises with CouchDB but if there is a way to avoid writting the logic code this might be worth it. I'm just not sure how easy it is to replace Postgres by CouchDB, I'm not sure there is an easy way to use Ecto and CouchDB together.

[SimonLab]

Following the getting started guide for PouchDB https://pouchdb.com/getting-started.html

• Adding PouchDB to the application. At the bottom of the index.html file add the cdn link before the closing body tag:
  

• Run elm reactor and open the console to see if the PouchDB object is defined:

• create a pouchdb.js which will contain the logic for the database and add it to index.html
  

• create the database var db = new PouchDB('dwyl');:
  

• To test pouchDB we can try to save a capture when offline. For that we need to update the Elm application to use port and a a javascript function which will put the capture in PouchDB. The port elm function will be called when the user attempt to save a new capture when offline

port pouchDB : String -> Cmd msg

saveCapture : Bool -> String -> Cmd Msg
saveCapture appOnline capture =
    if appOnline then
        Http.post
            { url = "https://dwylapp.herokuapp.com/api/captures/create"
            , body = Http.jsonBody (captureEncode capture)
            , expect = Http.expectJson SaveCaptureResult captureDecoder
            }
    else
    -- if not online save the item in PouchDB via ports
    pouchDB capture 

on the javascript side we can for now create a dummy function:

            app.ports.pouchDB.subscribe(function(capture) {
                console.log("capture offline", capture)
            });

This subscribe function will later on call the pouchDB api to save the capture:

• Save capture in PouchDB

function saveCapture(capture) {
    var capture = {
        _id: new Date().toISOString(),
        text: capture
      };
    db.put(capture, function callback(err, result) {
      if (!err) {
        console.log('Successfully saved capture!');
      }
    });
}

• Create js function to retrieve all the captures saved in PouchDB:

function showCaptures() {
    db.allDocs({include_docs: true, descending: true}, function(err, doc) {
      console.log(doc.rows)
    });
}

[SimonLab]

The above issue describe quickly the basic "save and get" functions for adding/retrieving captures from PouchDB. Now that we now how do the basic we need to see what are our best options to synchronise data between the saved data on the server and the saved data on the front-end and how to resolve and conflicts (captures updated/deleted from different places at the same time)