Question

我正在研究在Aurelia中构建渐进式Web应用程序的技术，其中包含适用于主流浏览器的离线功能。服务工作者似乎是资产缓存的首选选项，但在Safari（目前是Edge）中缺乏支持。如果他们不受支持，是否可以使用服务工作人员回退appcache？如果有appcache清单和服务工作者安装，应用程序将如何运作？

Answer 1

如果浏览器支持服务工作者，则将使用服务工作者缓存而不是appCache清单。您可以为Safari等旧版浏览器添加appCache清单，事情将按照过去的方式运行。此外，对于现代浏览器，他们将利用服务工作者缓存，并且就像appCache不存在一样。有点像响应图像的工作方式。

Answer 2

检查浏览器支持哪种技术很容易：

if(navigator.serviceWorker){
    initServiceWorker()
}else if(window.applicationCache){
    initApplicationCache();
}else{
    console.log('no caching possible');
}

动态加载服务工作者应该不是问题，因为无论如何都是在javascript中完成。

动态加载applicationCache的主要功能似乎不可能，但您可以尝试iframe hack，请参阅： Dynamically Trigger HTML5 Cache Manifest file?

Answer 3

现在是2019年，iPhone仍无法使Service Worker在WebViews中运行。因此，应用程序缓存回退仍然有用。

并非完全正确，当服务启动时，应用程序缓存不会起作用。它仍然尝试更新其缓存，这是很愚蠢的事情。关闭它并不是至关重要的，但这样做是一件好事。

我现在要执行的技巧是在服务工作者工作时禁用应用程序缓存，方法是拦截html（导航）请求，然后从manifest中删除<html>属性。

服务工作者脚本中的内容如下：

self.addEventListener('fetch', (ev) => {
  if (request.mode === 'navigate' && request.method === 'GET') {
    ev.respondWith(
      fetch(ev.request.url)
        .then(r => r.text())
        .then(html => new Response(html.replace('manifest=', 'xmanifest='), {
          headers: {'Content-Type': 'text/html'}
        }))
    )
  }
})

为不受支持的浏览器实施具有appcache后备功能的Service Worker

3 个答案: