服务工作者缓存破坏谷歌地图 api

塔克·希格利

我无法让我的渐进式网络应用程序正常工作。我需要防止它缓存 google maps api。我试图做到这一点,因此它不会缓存域外的任何内容,但似乎无法弄清楚。

cacheId = cacheIdRelace;
staticCache = "static-" + cacheId;
dynamicCache = "dynamic-" + cacheId;

self.addEventListener('install', function(event) {
  console.log('[Service Worker] Installing Service Worker ...', event);
  self.skipWaiting();
  event.waitUntil(
    caches.open(staticCache).then(function(cache) {
      cache.addAll(['/', '/index.html','offline/index.html', '/manifest.json', '/style/main.css']);
    })
  );
});

self.addEventListener('activate', evt => {
  console.log('[Service Worker] Activating Service Worker ....');
  evt.waitUntil(
    caches.keys().then (keys =>{
      //console.log(keys);
      return Promise.all(keys
        .filter(key => key !== staticCache && key !== dynamicCache)
        .map(key => caches.delete(key))
      )
    })
  )
});

self.addEventListener('fetch', evt => {
  evt.respondWith(
    caches.match(evt.request).then(cacheRes => {
      return cacheRes || fetch(evt.request).then(fetchRes => {
        return caches.open(dynamicCache).then(cache => {
          if ((evt.request.url).includes(window.location.host)) {
            cache.put(evt.request.url, fetchRes.clone());
          }
          fetchRes.clone()
          return fetchRes
        })
      });
    }).catch(() => caches.match('/offline/'))
  );
});

我在其中添加了以下语句,以防止它缓存本地域外的任何内容,但我做错了,它只会引发 fetch 错误。

if ((evt.request.url).includes(window.location.host)) {
不要去

如果是 google api,您应该检查 url 并从服务器获取:

self.addEventListener('fetch', function (event) {
    // no caching google api
    if (event.request.url.indexOf('maps.googleapis.com/maps/api/') > -1) {
        event.respondWith(
            fetch(event.request).then(
                function (response) {
                    // Check if we received a valid response
                    if (!response) {
                        console.error("fetch eventhandler error: no response");
                        return Response.error();
                    }
                    if (!response.ok) {
                        console.warn("fetch eventhandler warning: status=", response.status, response.type);
                        return response;
                    }
                    // ok
                    return response;
                }).catch(function () {
                  // failed access
                  console.error("fetch eventhandler error");
                  return Response.error();
            }))
    } else {
        event.respondWith(
            caches.match(event.request).then(cacheRes => {
                return cacheRes || fetch(event.request).then(fetchRes => {
                    return caches.open(dynamicCache).then(cache => {
                        if ((event.request.url).includes(window.location.host)) {
                            cache.put(event.request.url, fetchRes.clone());
                        }
                        fetchRes.clone()
                        return fetchRes
                    })
                });
            }).catch(() => caches.match('/offline/'))
        );
    }
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何卸载服务工作者?

Javascript服务工作者:从缓存中获取资源,但也进行更新

是否可以修改服务工作者缓存响应标头?

服务工作者和客户端请求“缓存控制”:“无缓存”

使Web应用程序脱机-应用程序缓存或服务工作者哪个更好?

WebView:以编程方式清除服务工作者缓存

使用CSRF令牌缓存请求时,如何减少服务工作者缓存的大小

服务工作者不会从缓存中返回文件

具有SSL证书缓存的服务工作者

PWA服务工作者缓存/更新预期行为

服务工作者将文件从API调用添加到预缓存

notificationclick事件服务工作者

将服务工作者保存在缓存中有意义吗?

根据年龄删除服务工作者缓存中的条目

注销时如何清除服务工作者缓存?

延迟加载或预加载Angular模块并使用服务工作者来缓存结果?

在服务工作者中服务之前,可以编辑缓存的index.html吗?

通常,服务工作者应预缓存哪些文件?

如何防止服务工作者删除缓存,PWA

如何由服务工作者更新缓存的资源

服务工作者查询缓存算法是否允许表达式匹配URL路径?

服务工作者中的XMLHttpRequest

检查服务工作者缓存中是否存在URL

Chrome自定义标签Cookie,存储API和服务工作者

服务工作者缓存文件但不离线加载

服务工作者从磁盘缓存中缓存资源

服务工作者在反应中缓存的路由

服务工作者缓存与 VuexPersistence

角度缓存 - 我们应该使用服务工作者吗?