gulp - 使用 Gulp 的 Workbox 高级食谱示例

Question

我拼命尝试使用 Gulp 和 Workbox generateSW 库生成一个服务工作者，以便在没有连接时提供“offline.html”页面。

我尝试使用工作箱文档中给出的高级配方“仅离线页面”，但没有成功（https://developers.google.com/web/tools/workbox/guides/advanced-recipes#offline_page_only）。

这个想法是使用 Gulp Workbox generateSW 库编写，它相当于这个 vanilla 函数：

   this.addEventListener('fetch', event => {
  // request.mode = navigate isn't supported in all browsers
  // so include a check for Accept: text/html header.
  if (event.request.mode === 'navigate' || (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

我使用 lib 缓存离线页面没有问题，但我找不到生成提取部分的语法。

有人可以帮助我吗？非常感谢。

标签： gulpservice-workerworkbox