I'm working on a React PWA and I've successfully installed it as an app in both iOS (using Safari) and android (using Chrome) but I am facing troubles installing it through a browser (Chrome) on my PC.
As far as I know, there should be a install prompt on load or an add icon on the right in address bar which will allow the user to install the PWA in PC as an app, but there is no option displayed to install PWA when I open my React web app on browser.
This is my manifest.JSON:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
and this is my service-worker.JS:
// Flag for enabling cache in production
var doCache = true;
var CACHE_NAME = "pwa-app-cache";
// Delete old caches
self.addEventListener("activate", event => {
const currentCachelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(keyList =>
Promise.all(
keyList.map(key => {
if (!currentCachelist.includes(key)) {
return caches.delete(key);
}
})
)
)
);
});
// This triggers when user starts the app
self.addEventListener("install", function(event) {
if (doCache) {
console.log("install");
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
fetch("asset-manifest.json")
.then(response => {
console.log(response.json());
response.json();
})
.then(assets => {
console.log("installs");
// We will cache initial page and the main.js
// We could also cache assets like CSS and images
const urlsToCache = ["/", assets["main.js"]];
cache.addAll(urlsToCache);
});
})
);
}
});
// Here we intercept request and serve up the matching files
self.addEventListener("fetch", function(event) {
if (doCache) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
}
});
