React PWA中manifest.json的start_url、scope的"."与"./"差异问询

一、start_url: "." 和 "./" 的区别 #

假设你的manifest文件放在https://www.example.com/scorer/manifest.json，所有相对路径都会基于这个地址解析：

• 设为.时，解析后的绝对URL是https://www.example.com/scorer（不带末尾斜杠）。很多反向代理或服务器配置中，访问无斜杠的/scorer会自动重定向到带斜杠的/scorer/，而PWA对start_url的匹配通常是严格的——如果启动时跳转的实际路径和配置的start_url不一致，就会导致PWA无法正常初始化。
• 设为./时，解析后的绝对URL是https://www.example.com/scorer/（带末尾斜杠），这和你React应用的实际入口路径完全匹配，不会触发重定向，因此能顺利启动PWA。

二、scope: "." 和 "./" 的区别 #

scope用来定义PWA能控制的URL范围，决定Service Worker可以接管哪些页面，以及添加到主屏幕后的跳转边界：

• 设为.时，解析后的范围是https://www.example.com/scorer（无斜杠）。部分浏览器会把这个范围理解为仅包含/scorer这个精确路径，而非其下的所有子路由，导致你的React应用内的页面无法被Service Worker接管，PWA的离线缓存等功能失效。
• 设为./时，解析后的范围是https://www.example.com/scorer/（带斜杠），明确表示/scorer/下的所有子路径都属于PWA的控制范围，Service Worker能正常处理你应用内的所有路由，确保PWA功能正常。

针对你场景的原因 #

你的应用部署在反向代理后的https://www.example.com/scorer，实际入口是带斜杠的/scorer/。当你设置start_url: "./"时，刚好匹配正确的入口路径；scope: "."时，部分浏览器会兼容将其解析为覆盖/scorer目录下的所有路径，而如果两者都设为.，start_url的无斜杠路径会触发重定向，导致PWA启动失败，同时scope的控制范围也会出现偏差，最终无法正常运行。

内容的提问来源于stack exchange，提问作者Targett-Adams