Web App Install Banners - Error

[Krissams]

Hi Guys, I am new to progressive web app, I am planning to convert one of my projects to a progressive one but when I tried to test adding a Web App Install Banners which I followed the documentation here https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/#testing-the-app-install-banner I got this error
Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

This is the link of my site, hope you can help me
https://fundraising.avalonpearls.com/

Thanks in advance

[entonbiba]

@Krissams put the manifest.json on the root folder not in assets/. Once in root folder change "start_url": "../index.php" to "start_url": ".".

You can also add the following after "display"

"start_url": ".",
"display": "standalone",
"related_applications": [{
    "platform": "web"
}]

At the moment it's not giving the error:

[jawadamin99]

How to install a service worker? -_-

[entonbiba]

@jawadamin99 you can do the following below, I'll post a sample code on my website in a few days.

main.js or in <script> within index.html file

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('worker.js');
}

// link to a image file
var iconUrl = 'https://www.seeklogo.net/wp-content/uploads/2014/10/Google-Chrome-logo-vector-download.png';

// create the <img> html element
// on first load it will request the image
// second time it will load it from cache directly thanks to the service worker
var imgElement = document.createElement('img');
imgElement.src = iconUrl;

worker.js

var PRECACHE = 'precache-v1';
var RUNTIME = 'runtime';

// list the files you want cached by the service worker
PRECACHE_URLS = [
  'index.html',
  './',
  'style.css',
  'main.js'
];


// the rest below handles the installing and caching
self.addEventListener('install', event => {
  event.waitUntil(
     caches.open(PRECACHE).then(cache => cache.addAll(PRECACHE_URLS)).then(self.skipWaiting())
  );
});

self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', event => {
  if (event.request.url.startsWith(self.location.origin)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        }

        return caches.open(RUNTIME).then(cache => {
          return fetch(event.request).then(response => {
            // Put a copy of the response in the runtime cache.
            return cache.put(event.request, response.clone()).then(() => {
              return response;
            });
          });
        });
      })
    );
  }
});

[jawadamin99]

Wow. Thanks alot @entonbiba I will use the code and check 👍