[PWA] 7. First Cache when installed

最新推荐文章于 2025-08-13 07:41:10 发布

weixin_30469895

最新推荐文章于 2025-08-13 07:41:10 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

文章标签： ux

原文链接：http://www.cnblogs.com/Answer1215/p/5499313.html

本文介绍了如何使用Service Worker缓存资源以支持离线访问。通过在安装阶段创建缓存并预加载必需文件，可以确保应用程序即使在网络不可用的情况下也能正常运行。此外，还讨论了如何在fetch事件中使用缓存来响应请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

If you want your application works offline or lie-wifi. You need to use cache.

API:

Create Caches:

caches.open('cache_name').then( (cache) => {
    // create name if not exists yet, return cache if there is a one
})

Create single cache:

cache.put(request, response);

cache.addAll([
  '/foo',
  '/bar'
])

Get the cache:

cache.match(request)

caches.match(request)

When to start cache:

We can do cache in 'installing' service worker, what it will do is fetch everything we need from network and create cache for each of them.

self.addEventListener('install', function(event) {
  var urlsToCache = [
    '/',
    'js/main.js',
    'css/main.css',
    'imgs/icon.png',
    'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
    'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
  ];

  event.waitUntil(
    // TODO: open a cache named 'wittr-static-v1'
    // Add cache the urls from urlsToCache
      caches.open('wittr-static-v1')
          .then( (cache) => {
              cache.addAll(urlsToCache)
          })
          .catch( () => {
              console.error("Cannot cache anything");
          })
  );
});

Now we have create the cache, but it is not useful until we use the cache.

To use cache, we can do:

self.addEventListener('install', function(event) {
  var urlsToCache = [
    '/',
    'js/main.js',
    'css/main.css',
    'imgs/icon.png',
    'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
    'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
  ];

  event.waitUntil(
    // TODO: open a cache named 'wittr-static-v1'
    // Add cache the urls from urlsToCache
      caches.open('wittr-static-v4')
          .then( (cache) => {
              cache.addAll(urlsToCache)
          })
          .catch( () => {
              console.error("Cannot cache anything");
          })
  );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then((response)=>{
            if(response){
                return response;
            }else{
                return fetch(event.request);
            }
        })
    )
});