서비스 워커-JS 튜토리얼-php.cn

서비스 워커

WBOY

풀어 주다： 2024-08-09 07:28:42

원래의

1109명이 탐색했습니다.

서비스 워커는 브라우저, 애플리케이션, 인터넷 사이에서 "특정" 목적으로 사용할 수 있는 웹 API입니다.

Service Workers

서비스 워커는 기본 브라우저 스레드와 별도로 웹 애플리케이션의 백그라운드에서 실행되는 스크립트입니다. 푸시 알림, 백그라운드 동기화 및 오프라인 기능을 활성화합니다. 서비스 워커는 웹 애플리케이션, 브라우저 및 네트워크 사이의 중개자 역할을 합니다. 서비스 워커를 언제, 어떻게 사용할 수 있는지에 대한 예는 다음과 같습니다.

1. 오프라인 지원:

서비스 워커는 사용자가 웹사이트를 처음 방문할 때 중요한 리소스(HTML, CSS, JavaScript, 이미지)를 캐시합니다.
다음 방문 시 캐시에서 검색할 수 있어 지속적인 오프라인 기능을 제공합니다.

2. 푸시 알림:

서비스 워커를 사용하면 웹 애플리케이션이 열려 있지 않은 경우에도 푸시 알림을 전달할 수 있습니다.
외부 이벤트나 서버 업데이트로 인해 알림이 전송될 수 있습니다.

3. 배경 동기화:

서비스 워커는 백그라운드 동기화를 활성화하여 애플리케이션이 백그라운드에서 데이터를 업데이트하거나 새 콘텐츠를 가져올 수 있도록 합니다.
실시간 데이터 업데이트에 유용합니다.

4. 동적 콘텐츠 캐싱:

서비스 워커는 웹 페이지에서의 사용자 행동을 기반으로 콘텐츠를 동적으로 캐시할 수 있습니다.
자주 액세스하는 콘텐츠를 빠르게 전달하는 데 도움이 됩니다.

5. 성능 최적화:

서비스 워커는 자산과 리소스를 사전에 캐싱하여 웹페이지 성능을 크게 향상시킵니다.
로딩 프로세스를 최적화하여 사용자 행동에 따라 리소스를 선택적으로 로드할 수 있습니다.

6. 배경 가져오기:

서비스 워커는 백그라운드 로딩을 활성화하여 대용량 파일이나 리소스도 다운로드할 수 있습니다.

일반적으로 웹페이지를 방문하면 웹페이지는 서버에 요청을 보내고 서버는 데이터를 다시 사용자에게 보냅니다.

Service Workers

서비스 워커를 등록한 경우 웹 브라우저와 서버 사이의 미들웨어로 추가됩니다.

Service Workers

서버에 대한 요청을 중지하고 해당 요청을 서버로 보낼지 아니면 오프라인으로 작업할지 결정합니다. 이 경우 404 찾을 수 없음 페이지를 표시하는 대신 전체 페이지를 오프라인으로 볼 수 있습니다. 서비스 워커를 사용하여 맞춤형 오프라인 페이지를 만들 수도 있습니다.

컴퓨터에 인터넷이 연결되어 있지 않으면 오류 페이지가 표시됩니다.

인터넷이 없더라도 서비스 워커와 함께 웹 페이지에 접속하겠습니다.

서비스 워커 라이프사이클 및 이벤트

등록 → 설치 → 활성화 → 가져오기

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <!-- Scripts -->
    <script src="main.js" defer></script>
  </head>
  <body>
    <!-- istalgan kodlaringizni yozishingiz mumkin... -->
  </body>
</html>

로그인 후 복사

main.js 파일을 html에 연결했습니다.

main.js

// service worker browser tomonidan support qilinishini tekshirib olamiz
if ('serviceWorker' in navigator) {
  // web sahifa browserga yuklanishi bilan ishlashini aytib o'tamiz
  window.addEventListener('load', () => {
    // 1. service workerni registratsiyadan o'tkazamiz.
    navigator.serviceWorker
      .register('sw.js') // bizda sm.js file ochib olishimiz kerak bo'ladi. va bu yerdagi register ushani target qiladi.
      .then((registration) =>
        console.log('Service Worker registered with scope:', registration.scope)
      )
      .catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
  });
}

로그인 후 복사

sw.js

// browser kashda qanday nom nilan saqlanishini bildirish uchun nom beramiz
const cacheName = 'my-cache-v1';

// Qaysi fayllarni kashlashini aytib o'tib ketamiz
const cacheFiles = ['index.html', 'posts.html', 'css/style.css', 'js/main.js'];

// 2. INSTALL qilamiz
self.addEventListener('install', (event) => {
  event.waitUntil(
        // kashdan biz bergan nom bilan joy ochadi va bizni fayllarimizni joylaydi.
    caches.open(cacheName).then((cache) => cache.addAll(cacheFiles))
  );
});

// 3. ACTIVATE qilish
self.addEventListener('activate', () => {
  console.log('Server worker activated');
});

// 4. FETCH, ya'ni oflayn holatimizda kashlangan fillarni ko'rsatish uchun olish
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches
      .match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

로그인 후 복사

이렇게 한 후 브라우저의 개발 도구 섹션에 있는 애플리케이션 열로 이동하여 서비스 워커 섹션을 보면 활성화가 발생한 것을 확인할 수 있습니다.

Service Workers