Service Worker

2022. 11. 23. 12:05·개발정보
반응형

서비스 워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와 별개로 작동하면서 

웹페이지 또는 사용자의 인터랙션이 필요하지 않는 기능을 제공한다. 

 

오프라인에 문제가 생겼을 때 해결을 하기 위해서 등장하였다. 

개발자에게 오프라인 환경을 통제할 수 있는 권한을 부여해서, 오프라인 환경에서 캐시와의 상호작용, 

백그라운드 동기화, 푸시 알람 등의 기능을 가능하게 했다. 

 

서비스 워커의 특징 

▶ 사용자가 요청해야 동작하고, 목표하는 일이 끝날 때까지 꺼지지 않는다. 

▶ 웹페이지 밖에서 동작하기 때문에 브라우저의 열고 닫힘과는 무관하게 동작한다. 

▶ 브라우저 밖에서 동작하므로 DOM 요소에 접근할 수 없다. 

 

활용 예시

▶ 캐시와의 상호 작용 

서비스 워커가 Fetch 이벤트의 중간자 역할로  HTTP를 통해 정보를 요청하는 대신 가지고 있는 캐시에서

자료를 통해서 전달한다. 

 

이때 캐시가 삭제되지 않는 한 브라우저는 인터넷 연결 없이도 캐시 정보를 보여줄 수 있다. 

▶ 푸쉬 알람

브라우저 창이 닫힌 상태에도 동작이 가능하므로, 푸쉬 알람이 가능하다. 

 

▶ 백그라운드 동기화 

채팅 메시지 또는 사진 업로드 등 작업 도중 컴퓨터가 오프라인 상태가 되어도 

온라인 상태가 될 때 다시 마무리할 수 있다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발정보' 카테고리의 다른 글

GitHub Actions 을 사용한 CI / CD - 이론편  (0) 2022.11.28
비즈니스 로직  (0) 2022.11.25
CI / CD  (0) 2022.11.20
사파리의 vh  (1) 2022.10.23
Webpack css url 파일 문제  (1) 2022.10.15
'개발정보' 카테고리의 다른 글
  • GitHub Actions 을 사용한 CI / CD - 이론편
  • 비즈니스 로직
  • CI / CD
  • 사파리의 vh
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    식물
    next.js
    Babel
    타일러영어
    Node.js
    리얼학습일기
    자바스크립트
    ReactNative
    바질
    react
    프로그래머스
    CSS
    typescript
    CCNA
    webpack
    알고리즘
    ChatGPT
    타입스크립트
    리액트
    덤프
    바질 키우기
    영어회화
    리얼클래스
    네이버 부스트캠프
    네트워크
    영어독학
    redux
    javascript
    다이소
    Docker
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
Service Worker
상단으로

티스토리툴바