Offline Apps with "Workbox"

Take a look at the PouchDB.com API. I use that to build my Cherry PC apps and it makes working with both client and server DBs very easy.

The toughest part of building apps like I'm doing with Cherry PC is building CouchDB from source on your server. That's a fairly long process but it's easy going until you get to setting up SSL, and you have to do that for a production app.

I chose to go that route but there are services like https://www.couchbase.com (which I've not looked into yet) that should make that pretty easy.

I have looked into IBM's Cloudant services and you can get started with those for free. I like CouchDB better though.

For the most part, the Cherry PC apps are built with these tools:

server side: (DigitalOcean Ubuntu 16.04)

Apache Web Server

CouchDB

client side:

PouchDB

jQuery

jQueryUI

Bootstrap

The apps run almost entirely in the client, so almost all of the work is done with those client side APIs and those four tools work together so well they are essentially used like a single, very rich, API. You barely have to mess with CouchDB itself, you use PouchDB to work with it, and PouchDB has great docs and example code to get you started with.

PouchDB/CouchdB provide user authentication, server and client side data storage/management (CRUD), Sync on Demand, Live Sync, Replication, Snapshots, Search, and even multi-user management.

"Workbox" lets you point to a toolset like Bootstrap with just the path to "javascripts/bootstrap.min.js" and from there it finds and loads all the associated resources.

So, here's all I did to get my apps running offline:

In my "index.html" I added this at the bottom of the page:

------------------------------------------------------

<script>

// Check that service workers are registered

if ('serviceWorker' in navigator) {

// Use the window load event to keep the page load performant

window.addEventListener('load', () => {

navigator.serviceWorker.register('sw.js');

});

}

</script>

--------------------------------------------------------------------------

In "sw.js" (the "serviceWorker" referenced above) I basically have what's shown below. (I actually list all the ".js", ".html", ".css", files I created for use in my apps)

--------------------------------------------------------------------------

console.log('Hello from sw.js v.00.02b');

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');

workbox.core.setCacheNameDetails({

prefix: 'CherryPC_Apps',

suffix: 'v.00.02b',

precache: 'cherrypc-precache',

runtime: 'cherrypc-runtime'

});

if (workbox) {

console.log("Yay! Workbox is loaded");

workbox.precaching.precacheAndRoute([

'index.html',

'javascripts/index.html',

'javascripts/pouchdb.js',

'javascripts/pouchdb.find.js',

'javascripts/jquery.js',

'javascripts/jquery-ui.js',

'javascripts/bootstrap.min.js',

'javascripts/mustache.min.js',

'javascripts/my.js',

'stylesheets/my.css',

{ url: '/index.html', revision: '0002' },

]);

} else {

console.log("Boo! Workbox didn't load");

}

------------------------------------------------------