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
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.
Make sure you actually linked your manifest like this
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