ServiceWorker 절대 URL로 프리 페치

Question

내 사이트의 https://example.com에 /app-1 범위의 서비스 작업자 (리소스 캐싱에 사용)가 있습니다.

example.com 
- /images/image.jpg 
- /css/style.css 
- /app1 

내가 문서에서 알 것은 범위의 하위 경로를 액세스 할 수 있기 때문에 해당 서비스 노동자 ../images/image.jpg 또는 ../css/style.css에 액세스 할 수 있습니다.

나는 담대하게 가서 캐시에 내 서비스 작업자에 절대 경로를 추가 :

var urlsToPrefetch = [ 
'./', 
'https://example.com/css/style.css', 
'https://example.com/images/image.jpg' 
]; 

을 그리고 어떻게 든 이제 캐시 스토리지 보여 작동합니다

https://example.com/app1 
https://example.com/images/image.jpg 
https://example.com/css/style.css 

정확히 무엇을해야합니다. 오류가 전혀 없습니다.

누구나이 접근법이 수용 가능한지 확인하고 왜 (범위 제한을 고려하여) 설명 할 수 있습니까?

Answer 1

Serivce Worker Scope가 실제로 의미하는 바가 약간 혼란 스럽습니다. 서비스 작업자가 가져 오지 않고 제어 할 수 있도록 콘텐츠의 하위 집합을 지정하는 데 사용됩니다.

범위에있는 페이지에 Service Worker가 설치되어 있으므로 URL의 리소스를 완벽하게 가져 와서 캐시 할 수 있습니다. 유일한 문제는 범위를 벗어난 이러한 리소스가 원하는 페이지 일 경우 서비스 작업자가 해당 페이지에 설치되지 않으므로 기능 손실을 가장 잘 계획 할 수 있습니다.

마지막으로, 서비스 작업자 파일을 프로젝트의 루트에두면 응용 프로그램의 원본에있는 모든 콘텐츠가 범위에 포함됩니다. 따라서 Service Worker 파일을 루트에두면 "/images/image.jpg"가 범위에 포함됩니다.