swPrecache 및 CDN을 프록시로 사용 하시겠습니까?

Question

내 PWA의 정적 자산을로드하여 오프라인 모드를 지원하기 위해 swPrecache를 사용하고 있습니다. 잘 작동합니다. 내 설정은 다음과 같습니다.

https://www.myexampledomain.com/myapp/ 정적 index.html을로드하고 swPrecache를 사용하여 JS, 이미지, CSS 등의 정적 애셋을로드합니다. www.myexampledomain.com/myapp/js/file1.js

그러나 swprecache 목록에는 상당한 파일 수가 있고 느린 인터넷 연결에서 다운로드하는 데 시간이 걸립니다. 참고로, 저는 이미 서비스 작업자 등록을 "로드"이벤트와 같은 것으로 지연하고 있습니다.

그래서 여기에 제가 지금 시도하고있는 것이 있습니다. 가능한 경우 유효성을 검사 할 사람이 필요합니다.

1. https://www.myexampledomain.com/myapp/은 이전과 같이 정적 HTML 파일을로드합니다.
2. swPrecache가 앱 도메인 (예 : https://www.myexampledomain.com/myapp/js/file1.js)으로 이동하는 정적 요청을 차단하고 대신 CDN 끝점으로 가져 오도록 설정 했습니까? (예 : https://some.cloudfront.com/myapp/js/file1.js).
3. 다운로드가 완료되면 swPrecache는 계속 평소대로 작동합니다.

기본적으로 swaprecache 프록시는 정적 자산 요청을 CDN에 전달하여 초기로드 중에 다운로드하는 것이 더 빠릅니다.

이 부분에 대한 모든 설명/참고 자료가 도움이 될 것입니다.

Answer 1

stripPrefixMulti option을 sw-precache에 사용하면 서비스 작업자 파일에 기록 된 URL을 변경할 수 있습니다. 그래도 꽤 무차별 적입니다. 그래서 CDN에서 제공 될 모든 자산들에 의해 공유되는 공통 접두사가 있다면 도움이됩니다. CDN에 떨어져 제공됩니다 모든 로컬 assets/ 디렉토리에 저장되며, CDN에 자신의 경로가 https://my-cdn.com/assets/로 시작하는 경우

예를 들어, 당신은 할 것

{ 
    stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'}, 
    // ... other sw-precache options... 
} 

을 사용할 수 있습니다 빌드 프로세스의 일부로 로컬 파일이 변경 될 때마다 CDN에있는 파일의 복사본도 즉시 변경되거나 로컬 파일이 업데이트 된 버전 정보와 동기화되지 않도록해야합니다 CDN.

Answer 2

그래, 당신은

{ 
    stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'}, 
    // ... other sw-precache options... 
} 

을 사용할 수 있습니다하지만 난 당신이 새로운 CORS 문제에 직면하게 될 것이다 확신합니다. 나도 그 일을하고있어.