我正在尝试制作一个针对手机的离线PWA计划器，安装后我完全不需要用户数据或与主页的交互。
在我的电脑和Lighthouse上一切都很好，但在我的手机(S8(上，当我离线时，PWA在Chrome和Firefox中无法正常工作。只要我在线，最小化应用程序并点击已安装的图标在Chrome中就可以工作，但在Firefox中偶尔会出现黑屏，尤其是在应用程序失去焦点一段时间的情况下
离线会导致Chrome忽略缓存的文件，并在重新加载时抱怨连接不足，例如在手机重新启动或关闭所有应用程序后。Firefox只是挂着一个白色或黑色的屏幕。
我缓存了我的index.html文件，并怀疑在重新加载时重新安装服务人员会在离线时刷新缓存，但尽管进行了广泛的搜索，我还是找不到解决这个问题的方法，甚至没有提及
我在三星S5和iPad上遇到了同样的问题。
下面包括我的html标题中的脚本：
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/FuzzyPlan_serviceWorker.js', { scope: '/' }).then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
我的服务人员代码：
let CACHED_URLS = [
'200px-A_SVG_semicircle_heart_empty.svg.png',
'200px-A_SVG_semicircle_heart.svg.png',
'200px-Flag_of_Denmark.png',
'200px-Flag_of_the_United_Kingdom.png',
'FuzzyPlan20211002.css',
'FuzzyPlan20211002.js',
'apple-touch-icon.png',
'favicon.ico',
'favicon.png',
'icon.svg',
'index.html',
'instructions_dk.html',
'instructions.html',
'manifest.json',
'favicons/maskable_192.png',
'favicons/favicon-512.png'
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(FP_CACHE).then(function(cache) {
return cache.addAll(CACHED_URLS);
})
);
});
self.addEventListener('fetch', function(event) {
console.log('Fetch request for: ', event.request.url);
event.respondWith( caches.match(event.request, {ignoreVary: true}).then( // ignoreVary should make the cache match ignore flags and stuff that can make a mathc fail unintentionally
function(response) {
return response || fetch(event.request);
}).catch(function(error) {
console.log('FuzzyPlan serviceWorker responded with error', error);
})
);
})
我希望能解释一下我在哪里犯了一个新手错误：-(
完整项目位于https://github.com/HappyDustbunny/FuzzyPlan
最初的问题得到了回答：PWA部分工作正常
一位好心人在他的手机上试用了PWA，没有发现任何问题，这促使我在自己的手机之外的其他手机上进行了更彻底的测试，而且PWA部分似乎正常工作。
欺骗我的是在其他不起作用的手机上测试了旧版本。
最新更新的PWA部分可以工作，但它有另一个尚未识别的故障。
这个故障不容易重现，但在Chrome中遇到白色屏幕后，我通过USB将手机连接到电脑，并使用Chrome DevTools(通过键入chrome://inspect/#devices在地址行中(来分离应用程序的内部结构
所有东西都在那里(服务工作者、清单、缓存、DOM…(，我可以在控制台中与javascript交互，但屏幕是白色的。无论是在电话上还是在DevTools中。(欢迎建议！！(
它甚至将滑动事件记录到控制台，这是我忘记删除的较早的调试工作。
我怀疑罪魁祸首是我试图通过每个手机底部的后退按钮(三角形(接管导航，但不知怎么搞砸了
如果我被卡住了，我将不得不自己测试更多，并打开一个新问题。