如何在渐进式网络应用程序中使用服务工作者下载所有文件以供离线使用？答案

【问题标题】：How to download all files with the service worker in a progressive web-app for offline-use?如何在渐进式网络应用程序中使用服务工作者下载所有文件以供离线使用？
【发布时间】：2022-10-18 15:19:51
【问题描述】：

我对渐进式 Web 应用程序有疑问。我有一个应用程序，并且服务人员已成功注册。我可以下载应用程序。但是，只有 index.html 可以离线工作，而不是所有其他子页面。但是，我已将它们添加到数组中以保存。在 Windows 上它工作正常。只有在智能手机上没有。我的默认浏览器是三星浏览器（三星智能手机）我该怎么办？你有什么想法？

这是我在 index.html 中的注册：

if ("serviceWorker" in navigator) {
     window.addEventListener('load', function() {
      navigator.serviceWorker.register( "./SW.js").then(
       function(erfolg) {
        console.log( "ServiceWorker wurde registriert.", erfolg);
       }
      ).catch(
       function(fehler) {
        console.log( "ServiceWorker wurde leider nicht registriert.", fehler);
       }
      );
     });
    }

这是我的 SW.js，其中包含服务人员的事件：

const contentToCache = [
  '/index.html',
  '/Upload.html',
  '/Save.html',
  '/Routing.js',
  '/LocalStorageService.js'
];

self.addEventListener('install', (e) => {
console.log("[SERVICE WORKER] INSTALL DATA");
e.waitUntil((async () => {
  const cache = await caches.open("Baum-App");
  await cache.addAll(contentToCache);
})());
});

self.addEventListener('fetch', (e) => {
  e.respondWith((async () => {
    const r = await caches.match(e.request);
    console.log(`[Service Worker] Fetching resource: ${e.request.url}`);
    if (r) { return r; }
    const response = await fetch(e.request);
    const cache = await caches.open("Baum-App");
    console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
    cache.put(e.request, response.clone());
    return response;
  })());
});

我在 Windows 上运行了该应用程序，它在那里工作。我已经尝试了很多，但不幸的是我还不太了解它。

【问题讨论】：

标签： javascript web-applications progressive-web-apps service-worker-events

【解决方案1】：

我也遇到了这个问题。我通过确保数组中使用的字符串来修复它内容到缓存匹配文件名中使用的每个字符的大小写（在物理磁盘上）。

换句话说;桌面浏览器不区分上传.html和上传.html，但您移动设备上的浏览器可以！（对于 Windows 操作系统尤其如此）

另一方面，对于 Linux 操作系统，它是区分大小写的。因此，如果您的目标是 android 设备，则需要牢记这一点。

【讨论】：

【解决方案2】：

不幸的是，我认为第三方浏览器的支持有限（例如 Safari、Samsung 等）。某处可能存在一种解决方法，但老实说，我会在navigator.userAgent 上使用regex check，然后只为除 Chrome/Firefox 以外的任何浏览器显示一点吐司消息（此时甚至可能是 Edge）。

【讨论】：