AncomWiki

오프라인 웹 애플리케이션 만들기 (Mozilla 웹 기술 블로그)

Properties1
description이 문서는 2010 년도 기준으로 웹 애플리케이션을 오프라인에서 작동하도록 만들기 위한 세 가지 핵심 기술을 소개합니다. 첫째, `localStorage`와 `sessionStorage`를 사용하여 사용자의 입력 데이터를 영속적으로 저장하고 세션 간에 공유합니다. 둘째, `navigator.onLine` 속성과 `online`/`offline` 이벤트를 통해 네트워크 연결 상태를 감지하고, 오프라인 시에는 데이터를 로컬에 저…

12 min read

오프라인 웹 애플리케이션 만들기 (Mozilla 웹 기술 블로그)

Source

  • Evernote/Advanced View Required/오프라인 웹 애플리케이션 만들기 ✩ Mozilla 웹 기술 블로그.md

Summary

이 문서는 2010 년도 기준으로 웹 애플리케이션을 오프라인에서 작동하도록 만들기 위한 세 가지 핵심 기술을 소개합니다. 첫째, localStorage와 sessionStorage를 사용하여 사용자의 입력 데이터를 영속적으로 저장하고 세션 간에 공유합니다. 둘째, navigator.onLine 속성과 online/offline 이벤트를 통해 네트워크 연결 상태를 감지하고, 오프라인 시에는 데이터를 로컬에 저장했다가 온라인 복귀 시 서버로 동기화하는 로직을 구현합니다. 셋째, Cache Manifest 파일 (text/cache-manifest) 을 사용하여 HTML, CSS, JS, 이미지 등 오프라인에서 필요한 리소스들을 명시적으로 캐시하도록 브라우저에 지시합니다.

Key Points

  • 오프라인 웹 앱의 핵심 요소: 데이터 저장소, 연결 상태 감지, 리소스 캐싱
  • DOM Storage: localStorage(영속적) 와 sessionStorage(세션 기반) 를 통해 브라우저 세션 간 데이터 유지
  • 네트워크 상태 감지: navigator.onLine 확인 및 window.addEventListener('online'/'offline') 이벤트 리스너 활용
  • 동기화 전략: 오프라인 시 로컬 저장, 온라인 복귀 시 저장된 데이터 서버 전송 후 로컬 삭제
  • Cache Manifest: HTML 의 manifest 속성으로 연결된 .manifest 파일에 오프라인 필수 리소스 목록 명시
  • Manifest MIME-Type: 반드시 text/cache-manifest 로 설정 필요

그래프 뷰

백링크