연결 상태에 따라 기능을 세 갈래로 나눈 오프라인 규칙
2026.10.04 · 2분
- #오프라인
- #service worker
- IndexedDB
- Service Worker
- Web Serial API
개요
| 항목 | 내용 |
|---|---|
| 유형 | 설계 구현 |
| 시점 | 웹 클라이언트 개발 과정 |
| 상태 | 오프라인 허용 범위 규칙 공동 결정, 구현 반영 |
| 관련 영역 | Service Worker, IndexedDB, 오프라인 모드, USB 기기 설정 |
| 나의 역할 | 오프라인 방식(Service Worker·IndexedDB) 선정, 규칙 논의 참여, 구현 |
1. 상황과 제약
엔지니어가 모뎀을 다루는 현장에는 네트워크가 없었습니다. 오프라인에서 도구가 아무것도 못 하면 현장에서 쓸 수 없고, 모든 기능을 허용하면 서버 데이터와 어긋날 수 있었습니다.
요구사항은 웹에서 Web Serial API로 기존 도구를 다시 만드는 것까지였고, 오프라인 동작 방식은 정해져 있지 않았습니다.
2. 검토와 판단
오프라인 대응 방식으로 Service Worker와 IndexedDB를 골랐습니다. 오프라인에서 무엇을 허용할지는 함께 논의해 세 갈래로 나눴습니다.
| 구분 | 오프라인에서 | 예시 |
|---|---|---|
| 한 번이라도 읽어 온 데이터·화면 | 보여 줌 | 기기 목록, 기기 프로파일 데이터 |
| 새로 받아 오는 데이터 | 막음 | 기기 프로파일 다운로드 |
| 서버 데이터의 등록·수정·삭제 | 모두 막음 | 기기 정보, 관리자 정보 |
서버에 쓰는 것은 막았지만, USB로 연결한 기기에 설정을 쓰는 것은 오프라인에서도 할 수 있게 했습니다.
3. 실행과 조율
- Service Worker로 앱을 캐싱했습니다.
- 한 번이라도 서버에서 읽어 온 데이터와 화면을 IndexedDB에 저장해 오프라인에서 보여 줬습니다.
- 오프라인에서 쓸 수 없는 기능은 문구로 안내하고, 해당 버튼은 화면에 표시하지 않았습니다.
4. 결과와 확인
네트워크가 되는 곳에서 프로파일을 미리 받아 두면, 네트워크가 없는 현장에서도 받아 둔 데이터로 기기 설정을 읽고 쓸 수 있습니다. 오프라인에서는 서버 데이터가 바뀌지 않으므로 서버와 어긋나지 않습니다.