zoukankan      html  css  js  c++  java
  • [PWA] 7. First Cache when installed

    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);
                }
            })
        )
    });

    So we use 'caches.match' to get all the caches for request.

    In the then block, cache is successfully fetched, we check whether there is cache data, if it is, then return the response;

    If there is no cache data, then we fetch the data from real-server.

    But this approach has some problem:

    After we go offline mode, the pictures are not showing, this is because we only cache when the servcie worker is installed. 

    So here is some problem we need to solve:

  • 相关阅读:
    诺基亚N900聊QQ的三种方法 狼人:
    VirtualBox安装MeeGo系统黑屏问题处理 狼人:
    android 使用SurfaceView实现小球高处落下并弹起的效果
    【科研论文】新型脉冲电子围栏网络化系统设计
    centos6 yum安装nginx、phpfpm
    windows phone:动画(二)
    Logical Architecture
    xtrabackup全备方案,备份恢复全过程记录
    在Oracle中恢复被DROP掉的表
    JadePool应用范例:创建China软件项目
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5499313.html
Copyright © 2011-2022 走看看