Google의 sw-precache로 만든 서비스 작업자가 실제로 networkFirst 일 수 있습니까?

Question

휴고 (Hugo)를 실행하는 웹 사이트 https://www.igluonline.com을 실행했으며 최근에 Google의 sw-precache 다음에 서비스 직원을 설치했습니다.

이것은 구성 파일입니다 때로는 자동 생성 된 코드는 어떤하는 오류로 실행되지만,

서비스 노동자가 제대로 작동하고 웹에 모두 오프라인 경험을 제공 :

module.exports = { 
    staticFileGlobs: [ 
    'dist/css/**.css', 
    'dist/**/*.html', 
    'dist/images/**.*', 
    'dist/js/**.js' 
    ], 
    skipWaiting: true, 
    stripPrefix: 'dist', 
    runtimeCaching: [{ 
    urlPattern: /\/*/, 
    handler: 'networkFirst' 
    }] 
}; 

고려 사항 변하기 쉬운.

또한 cache-control은 max-age=0으로 설정되며 새 코드를 누르면 업데이트됩니다.

는 문제 :

나는에 따라 networkFirst에 runtimeCaching handler를 설정하고 구글의 sw-toolbox 연결이 없을 경우는 HTTP 호출 바람직 페이지를 얻을해야합니다 (runtimeCaching를 사용하는 경우 sw-precache에 존재) API 캐시로 대체해야합니다.

그러나 코드를 새로 고치고 테스트 할 새 창을 열면 (업데이트 전에 웹 사이트를 실행하는 모든 탭과 창을 닫음에 유의하십시오) 캐시 된 페이지가 표시됩니다. 그것은 자연스럽게 새로운 서비스 작업자를 다운로드하고 두 번째 새로 고침 페이지를 업데이 트하지만, 내 방문자가 내 홈페이지를 새로 고침 때마다 새로운 콘텐츠를 얻을 것으로 예상하지 않습니다.

내가 네트워크에서 직접로드 적어도 내 홈페이지를 얻을 수 있었으면 다음에 runtimeCaching 코드를 변경 시도,하지만 난 운이 없었다 : 잘 모르겠어요 이제

runtimeCaching: [{ 
    urlPattern: /\//, 
    handler: 'networkOnly' 
    },{ 
    urlPattern: /\/*/, 
    handler: 'networkFirst' 
    }] 

을 원하는 PWA 경우 경험은 그렇게합니다. 즉, 새로 고침 된 코드를 보려면 사용자가 두 번 다시로드하거나 적어도 두 페이지를 방문해야합니다. 또는 실수를하는 경우입니다. 나는 정말 고맙게 생각합니다.

Answer 1

서비스 근로자를 생성 할 때 sw-precache과 sw-toolbox을 사용하여 원하는 정책을 얻는 가장 쉬운 방법입니다.

sw-precache으로 새 서비스 작업자를 생성 할 때 올바른 구성 옵션을 전달하여 생성 된 파일의 끝에 sw-toolbox 코드를 가져올 수도 있습니다. sw-precache Documentation에 따르면

:

sw-precache 모듈은 자체 구성 나란히 sw-toolbox 코드 및 구성을 포함 할 수있는 능력을 가지고 있습니다. sw-precache (see below)의 runtimeCaching 구성 옵션을 사용하면 서비스 직원에게 sw-toolbox을 가져 와서 고유 한 라우팅 규칙을 작성하여 수동으로 수행 할 수있는 작업을 수행하는 바로 가기입니다.

이

는 runtimeCaching 옵션의 예는 sw-precache documentation에 보여입니다 :

runtimeCaching: [{ 
    urlPattern: /^https:\/\/example\.com\/api/, 
    handler: 'networkFirst' 
}, { 
    urlPattern: /\/articles\//, 
    handler: 'fastest', 
    options: { 
    cache: { 
     maxEntries: 10, 
     name: 'articles-cache' 
    } 
    } 
}] 

당신은 선택의 구성과 함께이 옵션을 사용할 수 있습니다. documentation에 명시된 바와 같이

예를 들어, 당신은 설정 파일을 사용할 수 있습니다

--config 사용하여 복잡한 구성을 전달하기위한 지원이있다. 파일의 모든 옵션은 명령 행 플래그를 통해 겹쳐 쓸 수 있습니다. module.exports를 통해 config를 정의하는 외부 JavaScript 파일을 전달하는 것이 좋습니다. 예를 들어, 포함하는 경로에 /이/SW-미리 캐시-config.js 파일이의 가정도 verbose 옵션을 설정하는 동안 파일이

을 통해, 명령 줄 인터페이스에 전달 될 수 있다는

module.exports = { 
    staticFileGlobs: [ 
    'app/css/**.css', 
    'app/**.html', 
    'app/images/**.*', 
    'app/js/**.js' 
    ], 
    stripPrefix: 'app/', 
    runtimeCaching: [{ 
    urlPattern: /this\\.is\\.a\\.regex/, 
    handler: 'networkFirst' 
    }] 
}; 

$ sw-precache --config=path/to/sw-precache-config.js --verbose 

이렇게하면 runtimeCaching.urlPattern 옵션에 정규 표현식을 제공하는 등의 유연성을 최대로 제공합니다.

또는 당신은 JSON 파일을 사용할 수 있습니다 :

이 덜 유연성을 제공하지만 우리는 또한, --config위한 JSON 파일 전달 지원

:

{ 
    "staticFileGlobs": [ 
    "app/css/**.css", 
    "app/**.html", 
    "app/images/**.*", 
    "app/js/**.js" 
    ], 
    "stripPrefix": "app/", 
    "runtimeCaching": [{ 
    "urlPattern": "/express/style/path/(.*)", 
    "handler": "networkFirst" 
    }] 
} 

이 예를 구성 옵션에 JS 파일을 사용합니다.

$ sw-precache --config=path/to/sw-precache-config.js --verbose 

명령을 실행하고이 구성으로 서비스 작업자를 생성 한 후에는 sw-precache을 사용하는 것보다 precache 및 정책을 훨씬 쉽게 처리 할 수 ​​있습니다.

정책을 파일에 직접 구성하거나 서비스 작업자 코드 맨 아래에 수동으로 추가 할 수 있습니다. 여기

는 생성 된 코드의 바닥 부분의 예는 다음과 같습니다

//sw-precache generated code... 

// *** Start of auto-included sw-toolbox code. *** 
/* 
Copyright 2016 Google Inc. All Rights Reserved. 

Licensed under the Apache License, Version 2.0 (the "License"); 
you may not use this file except in compliance with the License. 
You may obtain a copy of the License at 

    http://www.apache.org/licenses/LICENSE-2.0 

Unless required by applicable law or agreed to in writing, software 
distributed under the License is distributed on an "AS IS" BASIS, 
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 
See the License for the specific language governing permissions and 
limitations under the License. 
*/ 
//(!function(e){if("object"==typeof exports&&"undefined"!=typeof module))... 

// *** End of auto-included sw-toolbox code. *** 

// Runtime cache configuration, using the sw-toolbox library. 

toolbox.router.get(/this\\.is\\.a\\.regex/, toolbox.networkFirst, {}); 

toolbox.options.debug = true; 

//Here you can configure your precache: 

toolbox.precache([ 
    '/', 
    '/assets/background.png', 
    '/assets/logo.png', 
    '/assets/application.css', 
]); 

//And here you can configure your policies for any route and asset: 

toolbox.router.get('/', toolbox.fastest); 
toolbox.router.get('/assets/background.png', toolbox.fastest); 
toolbox.router.get('/assets/logo.png', toolbox.fastest); 

//Here is the Network First example 

toolbox.router.get('/myapp/index.html', toolbox.networkFirst); 

내가 찾은이 훨씬 더 효과적이고 유연한 단지 sw-precache 사용하는 것보다.

구성에 대한 자세한 내용은 여기 sw-toolbox Usage Guide을 참조하십시오.