const dataUrl = ''; //your data api url

(function(dataUrl, Observable) {

    'use strict';

    /******** your impure functions: ***********/

    //bind data to the view here
    const updateViewData = data => {}

    //you got data from the network, user is online..
    const updateViewSetOnline = () =>  {}

    //retrieve data from the network
    const getFromNetwork = url =>
        Observable.fromPromise(
            fetch(url)
                .then( response => response.json() )
                .catch( error => ({ err: 'network' }) )
        )

    //retrieve data from the cache
    const getFromCache = url =>
            Observable.fromPromise(
                caches.match(url)
                    .then( response => {
                        if( ! response) throw Error("No cached data")
                        return response.json();
                    })
                    .catch( error => ({ err : error }) )
            )

    //my cache/network observable stream instances
    const getFromNetwork$ = getFromNetwork(dataUrl);
    const getFromCache$ = getFromCache(dataUrl);

    Observable.merge(
        getFromNetwork$,
        getFromCache$.takeUntil(getFromNetwork$)
    ).subscribe( updateViewData )

    getFromNetwork$
        .subscribe( updateViewSetOnline )

    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('./service-worker.js')
            .then(function() { console.log('Service Worker Registered'); });
    }

})(dataUrl, Rx.Observable);