사이트에 서비스 작업자를 추가하십시오

서비스 작업자를 추가하여 2022 년 웹 사이트의 성과 및 탄력성을 향상시킵니다 (아직하지 않은 경우). 이 강력한 JavaScript 도구는 상당한 이점을 제공합니다. 기능을 탐색하고 간단한 구현 안내서를 제공합시다.

서비스 근로자 이해

서비스 작업자는 귀하의 웹 사이트의 미들웨어 역할을합니다. 모든 요청과 응답은이를 통과합니다. 또한 자산 및 응답을 저장하기위한 로컬 캐시를 관리합니다. 이것은 다음을 가능하게합니다.

• 성능 향상 : 캐시에서 자주 액세스하는 자산을 제공하여 데이터 사용 및로드 시간을 줄입니다.
• 오프라인 기능 : 오프라인 상태에서도 필수 컨텐츠에 대한 액세스를 제공합니다.
• 프리 페치 : 중요한 자산 및 API 응답을 적극적으로로드합니다.
• 오류 처리 : HTTP 오류의 경우 폴백 자산을 제공합니다.

본질적으로 서비스 직원은 더 빠르고 신뢰할 수있는 웹 경험을 만듭니다. 일반 JavaScript와 달리 DOM 액세스가 부족하고 별도의 스레드에서 실행됩니다 (다른 스크립트를 차단하지 않음).

보안 고려 사항

요청 및 응답을 가로 채는 역할로 인해 서비스 직원은 보안 제한 사항이 있습니다.

• 동일한 원인 정책 : 웹 사이트와 동일한 도메인에서 호스팅해야합니다. CDN 또는 타사 호스팅은 허용되지 않습니다.
• SSL 인증서 요구 사항 : SSL 인증서가 필요합니다 ( localhost 테스트에는 예외가 있지만 file:// 프로토콜에는 그렇지 않음).

많은 호스팅 제공 업체는 최소한의 비용으로 SSL 인증서를 제공합니다.

서비스 작업자 통합

서비스 작업자를 등록하는 것은 navigator.serviceWorker.register() 사용하여 서비스 작업자 파일의 경로를 제공합니다.

 navigator.serviceworker.register ( 'sw.js');

이상적으로는 이것을 인라인 내에 놓습니다

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2980

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

3193

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

2598

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

2562

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

2591

관련 주제

더>

• HTML 코드를 제거하는 방법
• CSS에서 div의 의미
• 웹 사이트 데드 링크를 확인하는 방법
• Windows 10 런닝 오프닝 위치 소개
• Tracert 명령의 기능
• 왜 Pinterest를 열 수 없나요?
• JavaScript에서 배열 요소를 삭제하는 방법
• 속도 구문 소개