Neodigm 55 Progressive Web App

The Neodigm PWA component provides a smooth experience for installing your app. Simply implement the following code and your website will automatically prompt for installation.

---

MANIFEST.JSON - IN ROOT FOLDER

{
    "name": "Neodigm 55 ⚡ Chicago",
    "short_name": "Neodigm",
    "start_url": "./index.html",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#edba08",
    "background_color": "#d3cdb4",
    "display": "standalone"
}

---

INLINE JAVASCRIPT NEAR THE TOP OF YOUR PAGE

<script>
    if ("serviceWorker" in navigator) {
        window.addEventListener("load", () => {
            navigator.serviceWorker.register("/sw.js");
        });
    }
    window.addEventListener("beforeinstallprompt", function( ev ){
        setTimeout(function(){
            if( neodigmPWA ){
                neodigmPWA.beforeinstallprompt( ev )
                neodigmPWA.autoOpen( 60 * 1000 * 3.8 )
            }
        }, 4800)
    })
</script>

---

SERVICE WORKER IN THE ROOT DIRECTORY

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

workbox.setConfig({ debug: false });

console.log( "workbox 6.5.4 | 20221014 (5s timeout)", workbox )
const {registerRoute} = workbox.routing;
const {NetworkFirst} = workbox.strategies;
//  const {CacheableResponsePlugin} = workbox.cacheable.response;

//workbox.LOG_LEVEL = "debug";
try {
  self.skipWaiting()
  clients.claim();
} catch (error) {
  console.log("---- claim error | ", error )
}

const cacheName = 'Neodigm55Cache';
//  const matchCallback = ({request}) => request.mode === 'navigate';
const matchCallback = ({request}) => {
  //if(request.url.indexOf(".vue") != -1) console.log("---- sw req | ", request.url)
  return true;
};

const networkTimeoutSeconds = 5;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    "cacheName": "Neodigm55Cache",
    "matchOptions": {"ingoreSearch": true}
  })
);

console.log("Arcanus 55 ~ Neodigm 55 ~ SW v2.3 | " + workbox.LOG_LEVEL );

---

TEMPLATE, ON EVERY PAGE OF YOUR SITE

<template id="js-pup-n55-pwa" data-n55-sodapop-modal="true" data-n55-sodapop-size="small" data-n55-sodapop-fullscreen="false">
    <article class="rev-artc h-center" style="padding: 12px;">
        <div>
            <section style="background-color: #242424;border-radius: 8px;">
                <h4 class="h-center readable__caption_white">Install the Web App</h4>
                <neodigm-marquee data-n55-marquee-text="  Did you know that you can add this website on your home screen?  You can install it as a Web App.  It's fast, secure, and Easy!  It will work when you are disconnected from the Internet.  How Convenient! "
                data-n55-marquee-size="small">
                <pre data-n55-theme="info"></pre>
                </neodigm-marquee>
            </section>

            <br><br>
            <img src="/android-chrome-256x256.png" alt="Neodigm Chicago - Install Progressive Web App"
            data-n55-wired4sound-click="14"
            style="max-width: 256px; height: auto; border-radius: 20%">
            <br><br><br>

            <a id="js-down-vcf" href="#"
            rel="noopener" tabindex="0" aria-haspopup="true"
            data-n55-enchanted-cta
            onclick="neodigmSodaPop.close(); neodigmPWA.install()"
            data-n55-enchanted-cta-alt="Install Web App|Add to Home Screen"
            data-n55-enchanted-cta-ambient="emit"
            data-n55-enchanted-cta-dont-touch="false"
            data-n55-enchanted-cta-shape-off="false"
            data-n55-enchanted-cta-size="medium"
            data-n55-flash-theme="marcom"
            data-n55-theme="danger"
            data-n55-toast="Click the INSTALL button"
            data-n55-wired4sound-click="7"
            ><span data-n55-wired4sound-mouseover="3">Install</span><span>Add to Home Screen</span>
            </a>
            <a id="js-down-vcf" href="#"
            rel="noopener" tabindex="0" aria-haspopup="true"
            data-n55-enchanted-cta
            onclick="neodigmSodaPop.close();"
            data-n55-enchanted-cta-ambient="emit"
            data-n55-enchanted-cta-dont-touch="true"
            data-n55-enchanted-cta-shape-off="false"
            data-n55-enchanted-cta-size="medium"
            data-n55-flash-theme="marcom"
            data-n55-theme="night"
            data-n55-toast="You can install later ...|Install from the Omnibox"
            data-n55-wired4sound-click="7"
            ><span data-n55-wired4sound-mouseover="3">Cancel</span><span>Maybe Later</span>
            </a>
            <br><br>
        </div>
    </article>
</template>