#pwa

Frontend › CSS

테마는 페이지 색만이 아니라 브라우저 UI(theme-color), 브라우저가 그리는 폼·스크롤바(color-scheme), 체크박스·라디오 강조색(accent-color), 아이콘과 사진까지 함께 바꿔야 완성된다. 색 값은 커스텀 속성에 모아 한 번만 재정의하고, 사진은 밝기를 낮추거나 picture로 바꿔 끼운다.

• #css
• #frontend
• #design
• #responsive

Frontend › Web

서비스 워커는 페이지와 서버 사이에서 스코프 안의 요청을 가로채는 별도 스레드의 스크립트다. 등록 → 설치 → 활성화 순서로 생명주기를 밟고, 파일이 한 바이트라도 바뀌면 새 버전이 설치되지만 옛 버전이 모든 창에서 물러날 때까지 대기한다. skipWaiting·clients.claim의 위험, 메모리 상태가 사라지는 수명, 브라우저별 디버깅 도구를 정리한다.

• #frontend
• #web
• #service-worker
• #browser

Frontend › Web

Cache Storage API로 요청·응답 쌍을 저장하고, fetch 이벤트의 respondWith()로 캐시 우선·네트워크 우선·stale-while-revalidate·네트워크 전용·캐시 전용 중 하나를 URL별로 골라 응답한다. 무엇을 언제 프리캐시할지, 불투명 응답과 addAll의 원자성 함정, 오프라인 대체 페이지, Workbox로 줄이는 코드, 페이지를 조각별로 캐시하는 서비스 워커 인클루드와 스트리밍까지 정리한다.

• #frontend
• #web
• #service-worker
• #cache
• #performance

Frontend › Web

웹 앱 매니페스트는 설치된 PWA의 이름·아이콘·시작 URL·표시 방식·색·바로 가기를 정하는 JSON이다. 앱을 식별하는 id, 내비게이션 범위 scope, 마스크 가능 아이콘, display와 display_override의 대체 순서, 설치 화면을 키우는 description·screenshots, iOS가 따로 쓰는 link·meta, 그리고 바뀐 메타데이터가 플랫폼마다 언제 반영되는지 정리한다.

• #frontend
• #web
• #html
• #mobile

Frontend › Web

브라우저에 내장된 출처별 트랜잭션 키-값 데이터베이스의 API. 버전으로 스키마를 바꾸는 upgradeneeded, 객체 저장소·키·인덱스·키 범위·커서로 저장하고 찾는 법, 자동 커밋되는 트랜잭션의 함정과 오류 처리, 다른 탭과의 버전 충돌, 그리고 네이티브 개념이 idb 래퍼에서 어떻게 보이는지 정리한다.

• #browser
• #storage
• #database
• #javascript
• #frontend

Frontend › Web

PWA가 운영 체제와 이어지는 기능을 지원 범위별로 정리한다. 웹 푸시와 알림(iOS는 16.4부터 홈 화면 웹 앱에서만, 18.4부터 선언적 웹 푸시), 앱 배지, 공유하기와 공유 대상, 파일 시스템 접근과 파일 핸들러, 프로토콜 핸들러, 링크 캡처, 연락처 선택기, 하드웨어 API, 그리고 Project Fugu·오리진 트라이얼로 새 기능을 시험하는 법과 기능 감지·권한 요청 원칙을 다룬다.

• #frontend
• #web
• #browser
• #mobile

Frontend › Web

설치 기준은 브라우저마다 다르다. Chrome은 HTTPS, name·아이콘(192·512px)·start_url·display를 갖춘 매니페스트와 최소한의 사용자 참여를 본다. 데스크톱 Chromium·Android(WebAPK와 바로 가기)·iOS 홈 화면·macOS Safari의 Dock 추가·Firefox의 Windows 작업 표시줄 웹 앱까지 플랫폼별 설치 방식, beforeinstallprompt로 직접 띄우는 설치 버튼, display-mode로 실행 방식을 알아내는 법, 앱 스토어 배포를 정리한다.

• #frontend
• #web
• #mobile
• #browser

Frontend › Web

설치된 PWA는 브라우저 탭이 아니라 자기 창을 가진다. 200×100px 미니 모드까지 견디는 반응형·점진적 향상의 기초와 오프라인을 기본 상태로 보는 오프라인 우선 원칙(마지막 상태 지키기, 동작 큐, 충돌 해결) 위에, display-mode 미디어 쿼리, 창 제목, 선택·당겨서 새로고침·safe area 같은 앱다운 CSS를 더한다. 스코프 밖 링크가 여는 앱 안 브라우저와 OAuth 흐름, 창 이동·크기·새 창, 제목 표시줄 오버레이, 여러 화면 배치, 화면 꺼짐 방지, 가상 키보드 API까지 정리한다.

• #frontend
• #web
• #css
• #ux
• #mobile

Frontend › Web

URL로 요청하는 자산은 Cache Storage에, 검색·조합할 구조화 데이터는 IndexedDB에 둔다. 저장소 할당량은 출처 단위로 묶이고 StorageManager.estimate()로 확인한다. 브라우저는 압박이 생기거나 오래 쓰지 않으면 데이터를 지우므로 persist()로 영속 저장을 요청하고, 지워진 뒤에도 앱이 온라인에서 다시 뜨게 만든다. 데이터를 뒤에서 최신으로 유지하는 백그라운드 동기화 계열 API도 정리한다.

• #frontend
• #web
• #storage
• #browser
• #service-worker