Question

如果浏览器不支持服务工作者，我如何告诉浏览器使用缓存清单？

我有一个需要离线运行的Angular 4应用。服务工作人员能够很好地完成工作，但Safari不支持它，它是需要运行的必需浏览器。

如果浏览器不支持服务工作者，那么我需要生成缓存清单文件，然后浏览器在浏览器脱机后使用缓存清单文件

当前代码（打字稿）：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('../../service-worker.js').then(function(registration) {
    //TODO: Implement Logging
  }).catch(function(err) {
    //TODO: Implement Logging
  });
} else {
  //Not currently supported on Internet explorer, Safari, IE Mobile and Safari Mobile. Use old Application Caching instead.
  console.log("Not Supported");
  //Use cache manifest
}

Answer 1

如何在<link>语句中创建一个包含清单文件所需属性的元素else？我想你必须把脚本的那部分放在<head>

中

const linkMeta = document.createElement('link');
linkMeta.setAttribute('rel', 'manifest');
linkMeta.setAttribute('href', '/manifest.webmanifes');

并将其附加到<head>

Answer 2

iOS支持appCache清单。这就是我们在过去十年中使网站脱机工作的方式。如果页面引用了appCache清单和服务工作者，则支持服务工作者的浏览器将忽略appCache。

此外，我认为您将web清单与appCache清单混淆。它们是两个不同的东西。 appCache管理如何缓存脱机文件。 Web清单文件向浏览器提供元数据，因此一旦将其添加到精简屏幕，它就知道如何标记和呈现您的网站。

FWIW我从2010年左右开始使用appCache和localStorage / IndexedDB构建离线/移动的第一个可与iOS上的原生应用相媲美的网络应用。所以你绝对可以这样做：）

这是我几年前在Velocity上发表的一篇演讲https://youtu.be/GKxkzu0pHUc它可能对你有帮助。

如果浏览器不支持服务工作者，我如何告诉浏览器使用缓存清单？

2 个答案: