离线 PWA 在手机上的表现不如预期。尽管缓存了所有相关文件，仍要求连接

Question

我正在尝试制作一个针对 phones 的离线 PWA 规划器，我 完全不需要 安装后的用户数据或与我的主页的交互.

在我的 PC 上一切正常，Lighthouse 的健康状况良好，但在我的 phone (S8) 上，当我处于离线状态时，PWA 在 Chrome 和 Firefox 中无法正常工作. 只要我在线，就可以在 Chrome 中最小化应用程序并点击已安装的图标，但偶尔会在 Firefox 中出现黑屏，尤其是在应用程序失去焦点一段时间的情况下。
离线会导致 Chrome 忽略缓存文件并在重新加载时抱怨缺乏连接，例如在 phone 重新启动或关闭所有应用程序后。 Firefox 挂起并出现白屏或黑屏。

我缓存了我的 index.html 文件，并怀疑在重新加载时重新安装 service worker 会在离线时刷新缓存，但是尽管进行了广泛的搜索，我还是无法找到解决这个问题的方法 - 或者甚至一提。
我在 Samsung S5 和 iPad.

上遇到同样的问题

以下是我的脚本 html header:

    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

Answer 1

原问题已回答：PWA部分工作正常

有好心人在他的phone上试过PWA没发现问题，促使我在phone以外的地方测试得更彻底，看来PWA部分是正常工作。

欺骗我的是在其他 phone 上测试了旧版本但不起作用。

最新更新的 PWA 部分做工作，但它有另一个 - 尚未识别 - 故障。

此故障不易重现，但在 Chrome 中遇到白屏后，我通过 USB 将 phone 连接到计算机并使用 Chrome DevTools（通过键入 chrome://inspect/#devices in the address line) 来剖析应用程序的内部结构。
一切都在那里（服务工作者、清单、缓存、DOM、……），我可以在控制台中与 javascript 交互，但屏幕是白色的。在 phone 和 DevTools 中。（欢迎提出建议！！！）
它甚至将滑动事件记录到控制台，这是我忘记删除的早期调试工作。

我怀疑罪魁祸首是我试图通过每个 phone（三角形）底部的后退按钮接管导航并以某种方式搞砸了它。
我将不得不自己对此进行更多测试，如果遇到困难，我将提出一个新问题。

离线 PWA 在手机上的表现不如预期。尽管缓存了所有相关文件，仍要求连接

Offline PWA not behaving as expected on phones. Asks for connectivity despite caching all relevant files

javascript

progressive-web-apps

service-worker

offline-browsing