Tutorials - Offline

Topic 0.3

Install the offline js file to allow remote operation even when the internet is not available.

In the repository folder look for the file offline.js and add the line below in your html page.

    let _o = {
        name: "webapp-v001",
        offline: "index.html", 
        caches: [
            // Add the file(s) you want to run offline...
            // example: "ecash-supply.js" or "qr.cache.js" or "some-html-page.html"
        ]
    };
    _o.caches.push(_o.offline);
    this.addEventListener("install", async (e) => {
        try {
            e.cache = await caches.open(_o.name);
            await e.cache.addAll(_o.caches);
        } catch (error) {}
    });
    this.addEventListener("fetch", (e) => {
        e.respondWith(
            (async () => {
                e.cache = await caches.open(_o.name);
                try {
                    e.response = await e.cache.match(e.request);
                    if (e.response) return e.response;
                    e.response = await fetch(e.request);
                    if (e.response) {
                        await e.cache.put(e.request, e.response.clone());
                        return e.response;
                    };
                } catch (err) {
                    return await e.cache.match(_o.offline);
                }
            })()
        );
    });

In the ecash-supply.js set the offline flag to !0 or true.

    _uz = { offline: !1 };

    // or
    
    _uz = { offline: true };

In the ecash-supply.js you should see the offline function if not copy and paste the code into the ecash-supply.js file or directly in the html page.

    if (navigator.onLine && _uz.offline && "serviceWorker" in navigator)
    navigator.serviceWorker
        .register("offline.js")
        .then((registration) => {})
        .catch((err) => {});

or

    <script>
        if (navigator.onLine && _uz.offline && "serviceWorker" in navigator)
        navigator.serviceWorker
            .register("offline.js")
            .then((registration) => {})
            .catch((err) => {});
    </script>