Origin has one or more service workers... page is not in scope

Question

I'm running my React PWA app in a subfolder and I'm getting the following error when running the Chrome developer Lighthouse pwa tool:

"This origin has one or more service workers, however the page (https://test.mysite.com/apps/testing) is not in scope."

This is the only PWA on the server and it runs fine in the browser as a regular website. But it isn't passing the PWA test and I need it to run as a disconnected PWA to go to production.

In an effort to fix this, I created a brand new React PWA using the create-react-app PWA template. I made the following changes:

package.json:

"homepage": "/apps/testing/"

manifest.json:

"start_url" ".",
"scope": "/apps/testing",

This didn't work, so after lots of googling I tried lots of ideas that people recommended:

"start_url" ".",
"scope": "https://test.mysite.com/apps/testing/"

and

"start_url" "./",
"scope": "https://test.mysite.com/apps/testing/"

and

"start_url" "./",
"scope": "/apps/testing/"

and

"start_url" "./apps/testing/",
"scope": "/apps/testing/"

and

"start_url" "/apps/testing/",
"scope": "/apps/testing/"

and a few others I don't recall. Nothing works.

Any ideas on how to set the scope of a React PWA app that runs in a subfolder?

Thanks

Answer 1

I wasn't able to get it working in Windows/IIS, but was able to get it working with Linux and NGINX. Here are the correct settings I used.

package.json:

"homepage": "/apps/testing/"

manifest.json:

"start_url" ".",
"scope": "/apps/testing/"