Question

我的网站有6个不同的内容元素，我想通过服务工作者特定的缓存方法来控制。

[预先缓存] STATIC CONTENT（css，js，fonts）
[缓存回退到网络] CDN（来自CloudFront S3的图片）
[网络回退到缓存] INDEX（主页）
[缓存回退到网络] PAGES（domain.com/sth - ＆gt; html）
[pass] API（ajax调用）
[pass] OTHER STUFF（分析，代码管理器）

我在ServiceWorker fetch事件中创建了6个if。

我的问题是......这是一个好方法吗？不是方法......因为它特定于我的网站/博客。但是你怎么看待ifs？这是过滤特定内容并使用适当缓存的正确方法吗？

var domain = location.host.split('.')[0]

regexStatic = new RegExp('https://' + location.host + '/build/(.*)')
regexCdn = new RegExp('https://cdn.' + domain + '(.*)')
regexIndex = new RegExp('https://' + location.host + '/')
regexApi = new RegExp('https://' + location.host + '/api/(.*)')
regexPages = new RegExp('https://' + location.host + '/(.*)')

self.addEventListener('fetch', function (event) {
  // STATIC
  if (regexStatic.test(event.request.url)) {
    event.respondWith(
      //
    )
    return
  }

  // CDN
  if (regexCdn.test(event.request.url)) {
    event.respondWith(
      //
    )
    return
  }

  // INDEX
  if (regexIndex.test(event.request.url)) {
    event.respondWith(
      //
    )
    return
  }

  // API
  if (regexApi.test(event.request.url)) {
    return
  }

  // PAGES
  if (regexPages.test(event.request.url)) {
    event.respondWith(
      //
    )
    return
  }

  // OTHER
  console.log('NOT INCLUDED IN CACHE: ', event.request.url)
})

Answer 1

为什么要分割内容。

如果在缓存中找不到内容，它将自动转发到网络以进行提取，否则将提供本地缓存副本。

只需在进行API调用时检查content-type，然后不要缓存这些响应。

只需将内容分为两类。Cache-able / Non Cache-able。

在此处获取更多信息： https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker

ServiceWorker ifs为特定内容定义特定缓存

1 个答案: