기본 캐시 우선 전략을 sw-precache의 네트워크 첫 번째 전략으로 변경하는 방법은 무엇입니까?

Question

여기 내 꿀꺽 작업입니다 :

gulp.task('service-worker', ['clean:sw'], function (cb) { 
swPrecache.write(path.join(global.config.offlineRoot, 'sw.js'), { 
    staticFileGlobs: [ 
     global.config.offlineRoot + '/offline/**/*.{js,html,css,png,jpg,jpeg,gif,svg,ttf,woff,woff2}', 
     global.config.offlineRoot + '/manifest.json' 
    ], 
    dynamicUrlToDependencies: { 
     '/app-shell': ['lib/views/layouts/app-shell.hbs'], 
     '/': [ 
      'lib/views/layouts/main-layout.hbs', 
      'lib/views/index.hbs' 
     ] 
    }, 
    runtimeCaching: [ 

     { 
      // See https://github.com/GoogleChrome/sw-toolbox#methods 
      urlPattern: /^\/(?!login|admin)/, 
      handler: 'networkOnly' 
     } 


    ], 

    stripPrefix: global.config.offlineRoot, 
    stripPrefixMulti: { 
     "node_modules/": 'scripts/' 
    }, 
    navigateFallback: '/app-shell', 
    navigateFallbackWhitelist: [/^\/(?!login|admin)/], 
    cacheId: "nodebeats", 
    // importScripts: ['scripts/sw-toolbox/sw-toolbox.js'], 
    verbose: true, 
    maximumFileSizeToCacheInBytes: 3097152, //3mb 
    handleFetch: true//(global.config.env === 'prod') 
}) 
    .then(cb) 
    .catch(function() { 
     cb(); 
    }); 

});

위의 설정에서 네트워크를 사용하여 로그인 및 관리 경로를 가져오고 인덱스 경로는 캐시에서 먼저 제공되지만 서버 측에서 내 페이지를 바인딩하기 때문에 먼저 네트워크로 설정해야합니다. 따라서 동적 데이터는 ctrl + f5가 아니라면 복제되지 않습니다.

Answer 1

웹용 콘텐츠를 서버에서 동적으로 렌더링해야하는 경우에는 sw-precache이 적합하다고 생각하지 않습니다. sw-precache은 서버 렌더링 된 리소스의 certain types에 유용 할 수 있지만 서버에서 렌더링 된 내용이 서버에서 구성된 하나 이상의 로컬 부분/템플릿에 의존하는 경우에만 유용합니다. (dynamicUrlToDependencies을 통해 해당 매핑을 설정해야합니다. sw-precache은 현재 로그인 한 사용자에 따라 달라지는 것처럼 서버 렌더링 된 콘텐츠가 로컬 템플릿/부분 데이터 이외의 것에 의존하는 경우에는 sw-precache이되지 않습니다. 많은 도움이되었습니다. 과 같은 전략을 사용하면 네트워크 연결이있을 때마다 새로운 응답을 제공 할 때와 이전 캐시 된 응답으로 되돌아 오는 탄력성이 균형을 이루는 경우 이러한 유형의 동적 콘텐츠를 직접 처리하기 위해 sw-toolbox을 사용할 수 있습니다. 네트워크를 사용할 수 없습니다.