如何使用嵌套主页(本地主机/应用程序)配置创建-反应-pwa

Question

我通过create-react-pwa(CRP)工具创建了一个应用程序，并将该应用程序部署到本地IIS根路径。然后我在本地主机上打开Chrome。一切正常，甚至 Service worker 也能完成工作，获取和缓存应用程序包和其他资源。在开发工具中，我单击"应用程序"选项卡中的"添加到主屏幕"按钮，然后添加了一个快捷方式。

将根路径更改为子文件夹(本地主机/myapp)时出现问题。当然，我会更改CRP设置并在package.json和manifest.json中编辑主页

//package.json
"homepage" : "/myapp"
//manifest.json
"start_url": "/myapp/",

然后，我构建应用程序并在索引中编辑服务工作进程的路径.html

<script>
"serviceWorker" in navigator && window.addEventListener("load", function () {
navigator.serviceWorker.register("/myapp/service-worker.js")
})
</script>

我将这个版本部署到名为"/myapp"的IIS子文件夹，并尝试在Chrome中检查结果。一切正常，服务工作者工作。但是当我尝试添加到主屏幕时，它失败了。铬显示以下错误：

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

拜托，有人知道出了什么问题吗？

构建结构：

/wwwroot
/myapp
/static
/index.html
/manifest.json
/service-worker.js
/ etc...

Answer 1

您似乎已经正确完成了所有操作，除了一件事 - 在注册时没有定义服务工作者的范围。因此，您可以尝试两件事：

1.尝试在注册时显式添加服务工作进程的范围。在按照选项 2 中所述做出更大的努力之前，请检查这是否适合您。法典：

<script>
"serviceWorker" in navigator && window.addEventListener("load", function () {
navigator.serviceWorker.register('/myapp/service-worker.js', { scope : '/myapp/' })
})
</script>

2.一个完整的证明方式是这个。由于使用的是 IIS，因此可以对 web.config 文件进行更改，以将Service-Worker-AllowedHttp 标头添加到服务工作进程文件的响应中。法典：

<location path="/myapp/service-worker.js">
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Service-Worker-Allowed" value="/" />
</customHeaders>
</httpProtocol>
</system.webServer>
</location>

然后，只需在注册服务辅助角色时将范围定义为{scope : '/'}。这样，无论您的项目结构或服务工作者的位置如何，它都应该有效。基本上，您现在正在做的是在对服务工作线程的脚本资源请求的 HTTP 响应中添加"服务工作线程允许"标头。 此答案的灵感来自上面服务工作者规范链接中的示例 10。

Answer 2

我们能够在tomcat服务器上运行它。我们必须确保

1) manifest.json、service-worker 和索引.html驻留在 WEB-INF 目录中.js。

2) 设置请求映射，以确保从正确的位置返回清单和服务工作线程

@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)我们将构建脚本中的资产放在目录中resources/static/并确保要缓存的资源在服务工作者中具有正确的名称，例如.js

const BASE_STATIC_URLS = [
'.',
'index.html',
'offline.html',
'/myapp/static/js/0.16823424.chunk.js'
];