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)
  • 태그

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

티스토리툴바