Add to home screen

[mostwanted]

Whats the simplest way to get my web2py application to prompt users to add to screen? I have tried alot of things but none are working, there are no prompts happening! Some say its only achievable through a PWA design, i tried this https://groups.google.com/forum/#!searchin/web2py/pwa$20me%7Csort:date/web2py/rHBfs1zFG44/gKS6EOmlAgAJ

nothing is working, if anyone has a way to achieve this with web2py i'd appreciate your assistance.

Regards;

Mostwanted

[mostwanted]

Ok! So far I have been able to get some aspects of my PWA project working, The issue is that I have to install the app manually from the browser's menu but it installs with its icon & it can be launched from the icon with a splash screen, that's a minor success, it also opens fully like a standalone app, another achievement, it shows its respecting the manifest file rules,  Now the major problems are that offline functionality & a prompt by the browser to install the app on home screen are not working and apparently this is caused by a service worker that can not be detected! The error says:

"No matching service worker detected. You may need to reload page or check that the scope of the service worker for the current page encloses the scope of the start URL from the manifest."

I do not understand this message at all, I went through the internet looking for possible answers but none of them are clear! Some are saying the solution is to place the service worker in the root directory! But guys please forgive my ignorance but where is the web2py root directory?! If anyone has been able to overcome this issue or understands the solution to it i'd greatly appreciate your assistance, my site is being hosted by pythonanywhere I dont know if this matters (Root Directories & all)!

This is my code below:

LAYOUT CODE:

<!---------------------------------PWA---------------------------------------------->

   <link rel="manifest" href="/init/static/manifest/manifest.json">

  <link rel="icon" href="/pwa/static/favicon.ico" type="image/x-icon" />

  <link rel="apple-touch-icon" href="/init/static/images/icon_152x152.png">

  <!--meta name="theme-color" content="#DE3C4B" /-->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="theme-color" content="white"/>

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="apple-mobile-web-app-title" content="Hello World">

  <meta name="msapplication-TileImage" content="/init/static/images/icon_144x144.png">

  <meta name="msapplication-TileColor" content="#FFFFFF">

  <script src="/init/static/js/main.js"></script>

MAIN.JS

window.onload = () =>

{

  'use strict';

  if ('serviceWorker' in navigator) {

    navigator.serviceWorker.register('/init/static/js/sw.js');

  }

}

SW.JS

var cacheName = 'hello-pwa';

var filesToCache = [

  '/',

  '/init/',

];

/* Start the service worker and cache all of the app's content */

self.addEventListener('install', function(e) {

  e.waitUntil(

    caches.open(cacheName).then(function(cache) {

      return cache.addAll(filesToCache);

    })

  );

});

/* Serve cached content when offline */

self.addEventListener('fetch', function(e) {

  e.respondWith(

    caches.match(e.request).then(function(response) {

      return response || fetch(e.request);

    })

  );

});

MANIFEST.JSON

{

  "name": "Hello World",

  "short_name": "Hello",

  "lang": "en-US",

  "background_color": "#DE3C4B",

  "theme_color": "#DE3C4B",

  "icons": [

    {

      "src": "/init/static/images/icon_72x72.png",

      "sizes": "72x72",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_96x96.png",

      "sizes": "96x96",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_128x128.png",

      "sizes": "128x128",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_144x144.png",

      "sizes": "144x144",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_152x152.png",

      "sizes": "152x152",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_192x192.png",

      "sizes": "192x192",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_384x384.png",

      "sizes": "384x384",

      "type": "image/png"

    },

    {

      "src": "/init/static/images/icon_512x512.png",

      "sizes": "512x512",

      "type": "image/png"

    }

  ],

"start_url": "/init",

  "scope": "/init",

  "display": "standalone"

}

Regards;

Mostwanted 

[mostwanted]

Hey guys i'm still struggling with the add to home screen prompt, please look at my code above & suggest something. Help me to get this to work. I really need this functionality, please help me.

Regards;

Mostwanted

[mostwanted]

Hey guys, I'm still here, struggling with the add to home PWA fucntionality. Has anyone found a solution? Please share or assist.

Regards

[mostwanted]

I was finally able to get my app to prompt add to screen. My app is hosted on pythonanywhere.com & its all thanks to Giles Thomas overthere at Pythonanywhere.com for assisting me with what I could do.

What I did was that I set up a static file mapping on my "Web" tab page.

I set  "URL"  to "/sw.js" and "Directory"  to "/home/myusername/web2py/applications/init/static/js/sw.js" In my pythonanywhere.com dashboard. 

From there I changed the navigator.serviceWorker.register('/sw-location') arguments of the /main.js script to point to my /sw.js script served now from my root directory & no longer from sub-directories in my app as set up above:

Main.js Script

window.onload = () =>
{
  'use strict';

  if ('serviceWorker' in navigator)

{
    navigator.serviceWorker.register('https://www.my-app.com/sw.js');
  }
}

Regards;

Mostwanted

[Dave S]

I found this reference, which helped me understand What The Heck you kids were talking about.

<URL:https://flaviocopes.com/progressive-web-apps/>

<URL:https://flaviocopes.com/service-workers/>

 

Flavio is another Italian (in the northern lake district, I believe), but his English is quite good.  He also has lots of tutorials about Vue, React, javascript itself, CSS, and lots of stuff for the web-fingers.

/dps

[mostwanted]

😂😂😂 Thanks alot, these links will come in handy