为什么此 Service Worker 清单会更改图标图像的请求 URL

如何解决为什么此 Service Worker 清单会更改图标图像的请求 URL

我有一个 JavaScript 文件，其中包含嵌套在目录中的 Service Worker 逻辑内容请求 URL。我有能力并且已经将 Web 服务器配置为使用 HTTP 标头 Service-Worker-Allowed 为该文件提供“/”。

清单文件也位于反映请求 URL 的目录中。但是，范围和图像的设置假设相同的请求 URL 设置为主范围。

我看到的实际请求 URL 是相对于清单中的目录设置的，而不是我想从中开始的根目录。

所以这是浏览器的时间线：

首先，请求返回索引文件的网站：https://localhost:3000。

index.html

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <link rel="manifest" href="json/manifest.json" async>
        <script id="js-webapp" type="module" src="js/webapp.js" defer async></script>
    </head>
    <body>
    </body>
</html>

其次，它解析并请求主应用逻辑：https://localhost:3000/js/webapp.js。

webapp.js

window.addEventListener('load',function (event) {
    const path = '/js/sw.js'
    
    if ('serviceWorker' in navigator) {
        console.log('Service Worker present')
        navigator.serviceWorker.register(path,{ scope: './'})
            .then((registration) => {
                console.log('Service Worker Registered',registration)
            })
            .catch((err) => {
                console.log('Service Worker Failed to Register: ',err)
        })
    }
})

第三，我的应用逻辑根据浏览器配置确定是否加载 service worker 文件：https://localhost:3000/js/sw.js。（这是具有响应键值“service-worker-allowed”和“/”的 HTTP 标头。

sw.js

const cacheName = 'v1.0.0'
const cacheFiles = [
    './manifest.json','./css/theme.css','./js/webapp.js','./img/logo.ico'
]
self.addEventListener('install',(event) => {
    console.log('Installed')

event.waitUntil(
    caches.open(cacheName).then((cache) => {
        console.log('Caching cacheFiles')
        return cache.addAll(cacheFiles)
        })
    )
})

接下来，Service Worker 请求清单缓存文件：https://localhost:3000/json/manifest.json。（这是在主索引文件上加载的，但在没有触发 Service Worker 逻辑的情况下，不会对此文件执行任何操作。）

manifest.json

{
    "name": "Web App","short_name": "","start_url": "/","scope": "/","display": "standalone","display": "fullscreen","theme_color": "#404040","background_color": "#404040","icons": [
        {
            "src": "img/ic_launcher_48.png","sizes": "48x48","type": "image/png"
        },...
    ]
}

按照此逻辑，我希望 URL 请求为 https://localhost:3000/img/ic_launcher_48.png。但是，我看到浏览器执行的请求 URL 是 https://localhost:3000/json/img/ic_launcher_48.png。

如果我在提供用于安装、激活和获取 Service Worker 逻辑的主文件时已经在标头中设置了 Service Worker 允许 HTTP，我做错了什么？

从其他 JavaScript 加载的所有其他内容或 HTML 文件正确加载。

解决方法

图标 src 与清单文件所在的位置有关，因为您的清单位于 /json，因此浏览器会在 /json/img 处寻找图标