구성 SW-미리 캐시의 웹팩 플러그인은

다음과 같은 시나리오를 고려 navigateFallback 경로로 서버 렌더링 된 페이지를로드합니다.구성 SW-미리 캐시의 웹팩 플러그인은

사용자가 오프라인 일 때이 동일한 생성 된 HTML을 서비스 작업자 navigateFallback으로 다시 제공하고 싶습니다.

내 웹팩 구성에서 https://www.npmjs.com/package/sw-precache-webpack-plugin을 사용하고 있습니다.

html-webpack-plugin을 통해 index.html을 생성하고 index.html을 내 navigateFallback 파일로 설정하면 생성 된 파일이 서비스 작업자에 의해 올바르게 제공됩니다.

그러나 렌더링 된 인덱스 html (라이브 서버가 "/"경로로 반환하는)을 캐싱하여 오프라인 html로 사용하는 방법은 없습니다.

출처

2017-01-22 Gavin

사용 사례가 지원되어야합니다. 기본 sw-precache 라이브러리를 사용하여 example of something similar이 있고 Webpack 래퍼를 사용할 때 구문이 동일해야합니다. 이 경우

는 /shell는 App Shell을 구성하는 서버에서 동적으로 생성 된 컨텐츠에 사용되는 URL이지만, 사용 사례는 유사처럼 그것은 / 대신 /shell으로 들린다. 서비스 노동자 미리 캐시의

{ 
    // Define the dependencies for the server-rendered /shell URL, 
    // so that it's kept up to date. 
    dynamicUrlToDependencies: { 
    '/shell': [ 
     ...glob.sync(`${BUILD_DIR}/rev/js/**/*.js`), 
     ...glob.sync(`${BUILD_DIR}/rev/styles/all*.css`), 
     `${SRC_DIR}/views/index.handlebars` 
    ] 
    }, 

    // Brute force server worker routing: 
    // Tell the service worker to use /shell for all navigations. 
    // E.g. A request for /guides/12345 will be fulfilled with /shell 
    navigateFallback: '/shell', 

    // Other config goes here... 
}

출처

2017-01-26 16:23:01

사용 dynamicUrlToDependencies 옵션은 경로의 URL과 그 종속성을 캐시합니다. 그런 다음 서브 링크 로직과 일치하는 정규식에 navigateFallback을 '/' 및 navigateFallbackWhitelist으로 설정하십시오.

new SWPrecacheWebpackPlugin({ 
 
    cacheId: 'my-project', 
 
    filename: 'offline.js', 
 
    maximumFileSizeToCacheInBytes: 4194304, 
 
    dynamicUrlToDependencies: { 
 
     '/': [ 
 
     ...glob.sync(`[name].js`), 
 
     ...glob.sync(`[name].css`) 
 
     ] 
 
    }, 
 
    navigateFallback: '/', 
 
    navigateFallbackWhitelist: [/^\/page\//], 
 
    staticFileGlobsIgnorePatterns: [/\.map$/], 
 
    minify: false, //set to "true" when going on production 
 
    runtimeCaching: [{ 
 
     urlPattern: /^http:\/\/localhost:2000\/api/, 
 
     // Use network first and cache as a fallback 
 
     handler: 'networkFirst' 
 
    }], 
 
})

(당신의 웹팩 설정의 꼭대기에 const glob = require('glob') 추가) :

이 구성을 가지고

출처

2017-02-11 23:57:44

구성 SW-미리 캐시의 웹팩 플러그인은

답변

관련 문제