-
Notifications
You must be signed in to change notification settings - Fork 2
Neodigm 55 Progressive Web App
Scott C. Krause edited this page Oct 23, 2022
·
7 revisions
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.
{
"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"
}
<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>
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 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. It's Secure, Smart, and Easy! You can install it as a Web App. It is easily accessible and 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>