gpt4 book ai didi

javascript - Angular7:服务 worker 未按预期运行

转载 作者:行者123 更新时间:2023-11-29 16:33:01 26 4
gpt4 key购买 nike

我有一个 angular service worker 并且我缓存了声音(mp3 文件)以便它们可以离线播放。这是 ngsw-config-json:

{
"index": "/index.html",
"assetGroups": [{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/*.svg",
"/*.eot",
"/*.woff",
"/*.woff2",
"/*.tff"
]
}
}, {
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/sounds/character1/**",
"/assets/sounds/character2/**"
]
}
}]
}

在我的网络应用程序中,声音是这样播放的:

let audioLink = `/assets/sounds/${character}/${soundURL}`;
let player = new Audio(audioLink);
player.play()

该网站离线工作。 HTML、CSS、JS、JSON 文件都被缓存了。但是声音不播放(当我尝试播放时,出现上面显示的错误)。

在 Chrome 开发者工具 > Application> Cache 中,我可以看到有一些声音(路径),但不是全部。但是他们没有离线工作。

有时会出现这些错误:

  • GET "path/to/file"net::ERR_ABORTED 504(网关超时)
  • 未捕获( promise )DOMException
  • 无法加载资源:net::ERR_INTERNET_DISCONNECTED

有时也说 manifest.json 有问题,但在线时在开发人员工具的 list 部分显示没有问题。

这个问题有解决办法吗?这不是 Chrome 错误,因为我在 Safari 和 Firefox 中也看到了相同的行为。我知道在新的 chrome 版本中有一个错误,由于这个错误,favicon.ico 不会离线显示

不确定这是否有帮助,但是 here是指向托管 Web 应用程序的链接。如果您在 Chrome 开发者工具中看到网络选项卡,您会看到 mp3 文件正在“下载”,但不能离线播放。

在生成用于生产的网站 (ng build --prod --base-href="/") 之后,我查看了 ngsw.json,这是我看到的(删除了一些行):

{
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/assets/sounds/character1/sound one.mp3",
"/assets/sounds/character1/sound two.mp3",
"/assets/sounds/character2/sound three.mp3"
"/assets/sounds/character2/sound four.mp3"
],
"patterns": []
}

Here是完整生成的 ngsw.json。一切都已设置为预缓存而不是延迟缓存。

所有这些 Assets URL 也都在 “hashTable” 对象中。我还看到它们正在 chrome 开发人员工具(开发人员工具 > 网络)中下载,但我只在应用程序缓存部分看到其中一些(可能是总共 150 个中的前 20-30 个)。

我在这里做错了什么?这可能是 Angular 7 的错误吗?我看到过关于类似问题的各种其他 StackOverflow 和 Reddit 问题。

我尝试过的东西正在改变

let audioLink = `/assets/sounds/${character}/${soundURL}`;

let audioLink = `assets/sounds/${character}/${soundURL}`;

(删除了开头的斜杠),但这并没有什么不同。

我完全确定所有声音文件路径都是正确的,因为网站在线运行时绝对没有错误。

除上述之外,我尝试手动更改所有网址并在应该有空格的地方插入 %20。例如,将 "/assets/sounds/character1/sound one.mp3" 更改为 "/assets/sounds/character1/sound%20one.mp3",但确实如此也不行。

我注意到的一件事是,如果您是第一次访问该网站,并等待所有声音下载完毕,然后关闭您的互联网连接并试用该网站,所有声音都可以正常工作。但只有一段时间,通常在 10-15 分钟左右,然后它们就会停止工作。我已经在 Chrome、Chrome Android、Firefox、Safari 和 IOS Safari 上进行了测试。

编辑:根据某人的建议,我尝试更改

{
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/assets/sounds/character1/sound one.mp3",
"/assets/sounds/character1/sound two.mp3",
"/assets/sounds/character2/sound three.mp3"
"/assets/sounds/character2/sound four.mp3"
],
"patterns": []
}

{
"name": "assets",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/assets/sounds/**"
],
"patterns": []
}

但同样的问题仍然存在:声音可能会在离线状态下缓存 10-15 分钟,之后就无法离线播放。我只能在 Chrome 和 Chrome Android 中对此进行测试。

最佳答案

我已经尝试制作一个演示来隔离错误并且似乎有效。注意到应用程序缓存中有一些奇怪的 url:Imgur

不确定这是导致问题的原因。您已经提到在您使设备离线后声音有效,我猜这是浏览器缓存而不是离线缓存。当我尝试刷新页面时,声音根本不起作用。我的猜测是 ngsw 的配置或 ngsw 缓存文件的方式与音频类不兼容。

您可以通过首先使用 @angular/common/http 获取它,将 blob 传递到 Audio 来测试它是否有效。我认为这是因为音频文件似乎位于不同的缓存目录中(请参见屏幕截图)。由于某些原因,css/js 文件的存储方式似乎有所不同,并且音频文件只能通过 Angular 访问(离线)。

作为回复发布,因为评论太长了

关于javascript - Angular7:服务 worker 未按预期运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54016609/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com