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 bined offline experience (Offline page + Offline copy of pages)

const CACHE = "pwabuilder-offline-page";

importScripts('.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!

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 bined offline experience (Offline page + Offline copy of pages)

const CACHE = "pwabuilder-offline-page";

importScripts('https://storage.googleapis./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!

• javascript
• html
• progressive-web-apps
• service-worker
• manifest.json

• One thing that is also required for the PWA to work is that the site is served with httpS and not http, is it your case ? – giviz Commented May 5, 2023 at 21:22
• My site runs on Netlify, so yes, https. – vlone Commented May 5, 2023 at 21:33
• Did you check the installation requirements listed here: https://web.dev/learn/pwa/installation/ They vary depending on OS and browser. – Stef Chäser Commented May 9, 2023 at 9:15
• I am mainly targeting Chrome, and I have all the necessary values. – vlone Commented May 9, 2023 at 11:50
• Can you install it manually via menu or icon? How do other PWA behave / are they installable? (e.g fugu-tracker.web.app) I tested the install prompt for the fugu-tracker on my PC (Win 10 Enterprise V 22H2 / Chrome 112) but no prompt appears. While on mobile (Chrome/Android) the prompt appears immediately. Maybe something is off with the install prompt in bination with Win & Chrome. :-/ – Stef Chäser Commented May 15, 2023 at 13:59

4 Answers 4

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.

My best guess then is that the display attribute set to browser is the issue. Try to set it to

"display": "standalone"

Just to confirm that it's not the problem.

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/en-US/docs/Web/Manifest

The best solution is just check your index.html file after the local build in your build folder If the it is something like this

then just modify the href as href ="/manifest.json or the link to your manifest

And deploy the build folder manually, this works for me in netlify