← DataForge 홈
📱 PWA 빌더 — 내 웹사이트를 스마트폰·PC에 설치되는 앱으로 만듭니다. 앱 정보와 아이콘만 입력하면 manifest.json · 서비스 워커 · 아이콘 세트 · 적용 스니펫을 한 번에 생성합니다. index.html을 업로드하면 PWA 코드가 자동 삽입된, 바로 배포 가능한 파일로 받을 수 있습니다. 모든 처리는 브라우저에서 이루어지며, 생성된 파일을 HTTPS로 배포된 내 사이트(GitHub Pages·Vercel 등)에 올리면 설치 배너가 활성화됩니다.
① 앱 정보
#2563eb
#ffffff
② 앱 아이콘 512·192·180·32px 자동 생성
🖼️
아이콘 이미지를 올려주세요
정사각형 512×512px 이상 권장 · PNG/JPG/WebP/SVG
#2563eb
③ 서비스 워커 · 배포 환경
캐시 전략 — HTML 페이지는 네트워크 우선(항상 최신 확인, 오프라인이면 캐시), 이미지·CSS·JS는 캐시 우선으로 동작합니다. 캐시 버전을 올려서 재배포하면 이전 캐시가 자동 삭제되어 "배포했는데 안 바뀌는" 문제를 예방합니다.
Vercel — 루트 도메인으로 서빙되어 경로 문제가 없습니다. 파일을 프로젝트 루트(index.html 옆)에 넣고 배포하면 바로 설치 가능합니다.
④ 내 HTML에 바로 적용 배포 준비 완료 파일 생성
📄
index.html을 올리면 PWA 코드를 자동 삽입합니다
</head> 앞에 스니펫 자동 삽입 · ZIP 패키지에 index.html로 포함됩니다
생성 결과 미리보기

            

          

          

            

              
              

            

          

          

            

              아래 스니펫을 내 사이트 index.html의 </head> 바로 앞에 붙여넣으세요.
            

            

              
              

            

          

        


        
        

          
패키지 다운로드

          

          

            
          

        


        
        

          
적용 가이드 — 3단계면 끝

          

            
1

            

              ZIP의 압축을 풀고 manifest.json · sw.js · icons 폴더를
              내 사이트의 index.html과 같은 폴더(사이트 루트)에 넣습니다.
            

          

          

            
2

            

              <head> 스니펫 탭의 코드를 복사해서 index.html의
              </head> 바로 앞에 붙여넣습니다.
            

          

          

            
3

            

              GitHub Pages·Vercel에 배포(push)합니다. 배포된 주소를 Chrome으로 열면
              주소창 오른쪽에 설치 아이콘(⊕)이 나타납니다.
              모바일 Chrome은 메뉴 → 앱 설치, iPhone Safari는 공유 → 홈 화면에 추가로 설치합니다.
            

          

          

            설치 조건 체크 — ① HTTPS 주소 ② manifest.json 연결 ③ 서비스 워커 등록 ④ 192px·512px 아이콘.
            네 가지가 모두 충족되어야 설치 배너가 뜹니다. 확인은 Chrome 개발자도구(F12) → Application 탭 → Manifest에서 할 수 있습니다.