Question

我在为我的网站设置服务工作者时遇到了一些问题。

我只想缓存css / js / fonts和一些images / svg，我不想缓存HTML，因为它每分钟都会更新。

它有点工作，但尝试我的智能手机我不断收到通知“添加到主屏幕”，即使我已经添加它。在Chrome Dev应用中，我没有收到添加按钮。

还有灯塔，我收到以下错误：

“脱机时不响应200”

“系统不会提示用户安装Web应用程序，失败：Manifest start_url不会被服务工作者缓存。”

现在我的sw.js是这样的。正如您所看到的，我评论了获取部分，因为它正在缓存HTML并且Cookies也无法正常工作。

是否有一个简单的服务工作者“模板”可供使用？

const PRECACHE = 'app-name';
const RUNTIME = 'runtime';

// A list of local resources we always want to be cached.
const PRECACHE_URLS = [
'/css/file.css',
'/js/file.js',
'/images/logo.png',
'/fonts/roboto/Roboto-Regular.woff2'
]

// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(PRECACHE)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(self.skipWaiting())
  );
});

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const currentCaches = [PRECACHE, RUNTIME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

// The fetch handler serves responses for same-origin resources from a cache.
// If no response is found, it populates the runtime cache with the response
// from the network before returning it to the page.
self.addEventListener('fetch', event => {
  // Skip cross-origin requests, like those for Google Analytics.
  // if (event.request.url.startsWith(self.location.origin)) {
  //   event.respondWith(
  //     caches.match(event.request).then(cachedResponse => {
  //       if (cachedResponse) {
  //         return cachedResponse;
  //       }

  //       return caches.open(RUNTIME).then(cache => {
  //         return fetch(event.request).then(response => {
  //           // Put a copy of the response in the runtime cache.
  //           return cache.put(event.request, response.clone()).then(() => {
  //             return response;
  //           });
  //         });
  //       });
  //     })
  //   );
  // }
});

Answer 1

我不确定为什么会出现安装横幅，但是灯塔给出的两个错误与start_url的丢失缓存有关，可能是index.html。因此，如果您遵循此处描述的缓存策略，灯塔将始终告诉您这些。

我建议您可以尝试使用Workbox及其运行时缓存。简而言之，运行时缓存的工作原理如下：您指定了诸如* .svg，* .css等的URL，并且一旦客户端首先询问它们，SW就会缓存它们。将来，当文件已经被缓存时，SW会将它们从缓存服务到客户端。基本上你告诉SW在遇到它们的时候缓存这个和那种网址而不是提前。

运行时缓存很可能伴随着预缓存（也可以从Workbox中找到！）来缓存一堆文件。

请在此处查看：https://workboxjs.org

他们有几个用于构建工具的示例和插件。

避免使用service worker缓存start_url

1 个答案: