Question: So I was trying to make a PWA for my website when I checked the “Application” tab in Chrome DevTools, it showed me No matching service worker detected. You may need to reload the page, or checked that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
. So, what what does it mean and how to fix it?
Repl link: https://replit.com/@codingneko/uranus?v=1
{
"name": "Uranus",
"short_name": "Uranus",
"icons": [
{
"src": "manifest.png",
"type": "image/png",
"sizes": "144x144"
}
],
"theme_color": "#afffff",
"display": "standalone",
"scope": ".",
"start_url": "/"
}
I’ve not built anything like this before but a quick google for the first part of the error message suggests this is a possibility:
opened 04:54PM - 07 Jun 21 UTC
closed 09:51PM - 10 Jun 21 UTC
**Library Affected**:
*webpack-workbox-plugin*
**Browser & Platform**:
*Goo… gle Chrome*
I include `new GenerateSW(),` in the plugins of my webpack config but receive this warning when running lighthouse on my website
```
Web app manifest or service worker do not meet the installability requirements 1 reason
Service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. With proper service worker and manifest implementations, browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement
Failure reason
--
No matching service worker detected. You may need to reload the page, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
Does not register a service worker that controls page and start_url
The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications.
```
I can see that the service worker is running in my console, because it prints
LOG from GenerateSW
<i> The service worker at service-worker.js will precache
<i> 107 URLs, totaling 5.25 MB
---------------------------------
I am also using `WebpackPWAManifest`
```
new WebpackPwaManifest({
icons: [
{
src: Icon192,
sizes: "192x192",
type: "image/png",
purpose: "any maskable",
},
{
src: Icon512,
sizes: "512x512",
type: "image/png",
},
],
name: "Example",
short_name: "Example",
orientation: "portrait",
start_url: "/",
scope: "/",
theme_color: "#ffffff",
background_color: "#ffffff",
description: "Example",
display: "standalone",
prefer_related_applications: false,
}),
```
Hope it helps!