skip to Main Content

I have made a PWA, manifest and service worker and all, and the PWA install (atleast on Chrome) is not appearing. I have read all the requirements and have fufilled them, but still it’s not showing the install prompt.

manifest.json

{
  "name": "Surplus Learning",
  "start_url": "/",
  "display": "browser",
  "icons": [
    {
      "src": "assets/images/icon.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "assets/images/icon.png",
      "type": "image/png",
      "sizes": "any",
      "purpose": "any"
    },
    {
      "src": "assets/images/icon.png",
      "type": "image/png",
      "sizes": "any",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#333333",
  "background_color": "#333333",
  "short_name": "S L",
  "description": "The best place for students.",
  "dir": "rtl",
  "orientation": "landscape",
  "display_override": [
    "browser"
  ],
  "categories": [
    "education",
    "productivity"
  ],
  "prefer_related_applications": false,
  "lang": "en"
}

Service Worker

// This is the service worker with the combined offline experience (Offline page + Offline copy of pages)

const CACHE = "pwabuilder-offline-page";

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

const offlineFallbackPage = "offline.html";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener('install', async (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => cache.add(offlineFallbackPage))
  );
});

if (workbox.navigationPreload.isSupported()) {
  workbox.navigationPreload.enable();
}

workbox.routing.registerRoute(
  new RegExp('/*'),
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: CACHE
  })
);

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResp = await event.preloadResponse;

        if (preloadResp) {
          return preloadResp;
        }

        const networkResp = await fetch(event.request);
        return networkResp;
      } catch (error) {

        const cache = await caches.open(CACHE);
        const cachedResp = await cache.match(offlineFallbackPage);
        return cachedResp;
      }
    })());
  }
});

The site works and serves cached pages but no install prompt is shown. Please help!

2

Answers


  1. The Chrome devtools has a tab called application. This tab shows PWA information about your current website and it also shows what causes an app not to be installable. Please take a look at this information.

    Login or Signup to reply.
  2. Make sure you actually linked your manifest like this

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

    In the <head> of your main page. Also make sure you are actually running this from a web server, and not a local file.
    You may also want to take a look at this MDN page: https://developer.mozilla.org/en-US/docs/Web/Manifest

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search