How to setup create-react-pwa with nested home page (localhost / app)
I am creating an application with create-react-pwa (CRP) tool and I am deploying the application to the local IIS root path. Then I open Chrome on localhost. Everything works fine, even the Service worker does its job, fetching and caching apps and other resources. In the dev tool, I click the Add to Home Screen button on the Application tab and a shortcut is added.
Problem occurs when changing root path to subfolder (localhost / myapp). Of course I change the CRP settings and edit the home page in the .json and manifest.json packages
//package.json
"homepage" : "/myapp"
//manifest.json
"start_url": "/myapp/",
Then I create an application and edit the service-worker path in index.html
<script>
"serviceWorker" in navigator && window.addEventListener("load", function () {
navigator.serviceWorker.register("/myapp/service-worker.js")
})
</script>
I am deploying this assembly to an IIS subfolder called "/ myapp" and trying to test the result in Chrome. Everything works well, the worker is working. But when I try to add to the desktop it fails. Chrome displays the following error:
Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest
Please, someone knows what is wrong?
Build structure:
/wwwroot
/myapp
/static
/index.html
/manifest.json
/service-worker.js
/ etc...
source to share
You seem to have done everything right, except for one thing - not specifying the service worker's scope at the time of registration. So, you can try two things:
1. Try to explicitly add a worker area during registration. Before putting in more effort as described in Option 2, check if this works for you. CODE:
<script>
"serviceWorker" in navigator && window.addEventListener("load", function () {
navigator.serviceWorker.register('/myapp/service-worker.js', { scope : '/myapp/' })
})
</script>
2. A completely proven method would be like this. Since you are using IIS, you can modify your web.config file to add the Service-Worker-Allowed
Http header to your worker's file response. CODE:
<location path="/myapp/service-worker.js">
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Service-Worker-Allowed" value="/" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>
and then just define the scope {scope : '/'}
when registering your worker. So, no matter your project structure or the placement of your service worker, it should work. Basically what you are doing now is that you add the "Service-Worker-Allowed" header in the HTTP service-worker script response to the resource request . This answer is inspired by example 10 in the above working worker link.
source to share
We were able to run this run on the tomcat server. We had to make sure that
1) The manifest.json, service-worker.js and index.html files are located in the WEB-INF directory.
2) Configure request mapping to ensure that the manifest and worker-service are returned from the appropriate location
@RequestMapping(value = "/manifest.json", method = RequestMethod.GET)
public @ResponseBody InternalResourceView manifest() throws IOException {
return new InternalResourceView("/WEB-INF/manifest.json");
}
@RequestMapping(value = "/service-worker.js", method = RequestMethod.GET)
public @ResponseBody InternalResourceView serviceWorker() throws IOException {
return new InternalResourceView("/WEB-INF/service-worker.js");
}
3) We placed the assets from the script assembly inside resources/static/
and made sure that the resources for caching were named appropriately, for example in service-worker.js
const BASE_STATIC_URLS = [
'.',
'index.html',
'offline.html',
'/myapp/static/js/0.16823424.chunk.js'
];
source to share