서비스 워커
- WBOY원래의
- 2024-08-09 07:28:421065검색
서비스 워커는 브라우저, 애플리케이션, 인터넷 사이에서 "특정" 목적으로 사용할 수 있는 웹 API입니다.
서비스 워커는 기본 브라우저 스레드와 별도로 웹 애플리케이션의 백그라운드에서 실행되는 스크립트입니다. 푸시 알림, 백그라운드 동기화 및 오프라인 기능을 활성화합니다. 서비스 워커는 웹 애플리케이션, 브라우저 및 네트워크 사이의 중개자 역할을 합니다. 서비스 워커를 언제, 어떻게 사용할 수 있는지에 대한 예는 다음과 같습니다.
1. 오프라인 지원:
- 서비스 워커는 사용자가 웹사이트를 처음 방문할 때 중요한 리소스(HTML, CSS, JavaScript, 이미지)를 캐시합니다.
- 다음 방문 시 캐시에서 검색할 수 있어 지속적인 오프라인 기능을 제공합니다.
2. 푸시 알림:
- 서비스 워커를 사용하면 웹 애플리케이션이 열려 있지 않은 경우에도 푸시 알림을 전달할 수 있습니다.
- 외부 이벤트나 서버 업데이트로 인해 알림이 전송될 수 있습니다.
3. 배경 동기화:
- 서비스 워커는 백그라운드 동기화를 활성화하여 애플리케이션이 백그라운드에서 데이터를 업데이트하거나 새 콘텐츠를 가져올 수 있도록 합니다.
- 실시간 데이터 업데이트에 유용합니다.
4. 동적 콘텐츠 캐싱:
- 서비스 워커는 웹 페이지에서의 사용자 행동을 기반으로 콘텐츠를 동적으로 캐시할 수 있습니다.
- 자주 액세스하는 콘텐츠를 빠르게 전달하는 데 도움이 됩니다.
5. 성능 최적화:
- 서비스 워커는 자산과 리소스를 사전에 캐싱하여 웹페이지 성능을 크게 향상시킵니다.
- 로딩 프로세스를 최적화하여 사용자 행동에 따라 리소스를 선택적으로 로드할 수 있습니다.
6. 배경 가져오기:
- 서비스 워커는 백그라운드 로딩을 활성화하여 대용량 파일이나 리소스도 다운로드할 수 있습니다.
일반적으로 웹페이지를 방문하면 웹페이지는 서버에 요청을 보내고 서버는 데이터를 다시 사용자에게 보냅니다.
서비스 워커를 등록한 경우 웹 브라우저와 서버 사이의 미들웨어로 추가됩니다.
서버에 대한 요청을 중지하고 해당 요청을 서버로 보낼지 아니면 오프라인으로 작업할지 결정합니다. 이 경우 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))
);
});
이렇게 한 후 브라우저의 개발 도구 섹션에 있는 애플리케이션 열로 이동하여 서비스 워커 섹션을 보면 활성화가 발생한 것을 확인할 수 있습니다.
캐시 저장 부분에 가면 우리가 지정한 이름으로 표시한 파일을 받게 됩니다.
이를 살펴보면 다음과 같은 결과를 확인할 수 있습니다.
보시다시피 이제 오프라인에서도 작동합니다. 오프라인 상태에서는 서비스 워커가 캐시 저장소에 열려 있는 위치에서 데이터를 가져오고 있습니다.
@abdulakhatov-dev
@AbdulakhatovDev
위 내용은 서비스 워커의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!