클릭시
default.htm
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<html lang="ko"> <head> <meta charset="utf-8"> <title>My PWA App</title> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#0066cc"> </head> <body> <h1>App 설치. </h1> <button id="btnInstallPWA" style="display:none; padding:8px 14px;"> 앱 설치하기 (바탕화면 아이콘 생성) </button> <script> // Service Worker 등록 if ('serviceWorker' in navigator) { window.addEventListener('load', function () { navigator.serviceWorker.register('/service-worker.js') .then(function (reg) { console.log('ServiceWorker registered:', reg.scope); }) .catch(function (err) { console.warn('ServiceWorker registration failed:', err); }); }); } let deferredPrompt = null; const installBtn = document.getElementById('btnInstallPWA'); window.addEventListener('beforeinstallprompt', (event) => { event.preventDefault(); deferredPrompt = event; if (installBtn) installBtn.style.display = 'inline-block'; }); if (installBtn) { installBtn.addEventListener('click', async () => { if (!deferredPrompt) { alert('설치할 수 있는 상태가 아닙니다. 이미 설치되었을 수 있습니다.'); return; } deferredPrompt.prompt(); const { outcome } = await deferredPrompt.userChoice; console.log('사용자 선택:', outcome); deferredPrompt = null; installBtn.style.display = 'none'; }); } window.addEventListener('appinstalled', () => { console.log('PWA installed'); if (installBtn) installBtn.style.display = 'none'; }); </script> </body> </html> |
Service-worker.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// service-worker.js (아주 기본형) // 캐시 이름 const CACHE_NAME = 'auctionpro-cache-v1'; // 설치 시 기본 파일 캐싱 (옵션) self.addEventListener('install', (event) => { // 바로 활성화하고 싶으면 self.skipWaiting(); }); // 활성화 시 (옵션) self.addEventListener('activate', (event) => { // 오래된 캐시 정리 등 event.waitUntil(clients.claim()); }); // fetch 이벤트 (옵션) - 오프라인 캐시 로직 넣을 수 있음 self.addEventListener('fetch', (event) => { // 여기서 기본 네트워크 패스스루 return; }); |
manifest.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "name": "Travelport WebTerminal", "short_name": "1GX", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#003366", "icons": [ { "src": "/auctionpro-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/auctionpro-512.png", "sizes": "512x512", "type": "image/png" } ] } |