WEB PUSH

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { // 등록 성공 console.log('ServiceWorker registration successful with scope: ', registration.scope); }, function(err) { // 등록 실패 console.log('ServiceWorker registration failed: ', err); }); }); }

const CACHE_NAME = 'v1'; const urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; // 설치: 캐시를 열고 원하는 파일들을 캐시에 추가합니다. self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); }); // 활성화: 구 캐시를 정리합니다. self.addEventListener('activate', function(event) { var cacheWhitelist = ['v1']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); }); // 네트워크 요청 가로채기: 캐시된 응답을 반환하거나, 네트워크에서 가져옵니다. self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // 캐시에서 찾았으면 해당 응답을 반환, 아니면 네트워크에서 요청 return response || fetch(event.request); }) ); }); // 푸시 이벤트가 발생하면 사용자에게 알림을 보낸다. self.addEventListener('push', function(event) { const title = 'Push Message'; const options = { body: 'This is a message from your push notification.', icon: '/icon.png', badge: '/badge.png' }; event.waitUntil(self.registration.showNotification(title, options)); }); // 네트워크 연결이 불안정할 때 사용자의 작업을 저장했다가 네트워크가 다시 연결되면 동기화 self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeBackgroundSync()); } }); function doSomeBackgroundSync() { // 여기에서 실제 동기화 작업을 수행합니다. // 예를 들어, 오프라인 상태에서 사용자가 생성한 데이터를 서버로 보낼 수 있습니다. return fetch('/some-endpoint', { method: 'POST', body: JSON.stringify({ /* 데이터 */ }), headers: { 'Content-Type': 'application/json' } }).then(response => { // 동기화 작업이 성공했을 때의 처리 }).catch(err => { // 동기화 작업이 실패했을 때의 처리 }); }

// 알람의 권한 확인 Notification.permission; // 'default', 'denied', 'granted' Notification.requestPermission().then(function(permission) { if (permission === "granted") { console.log("알림 허용"); // 알림을 보내는 로직을 실행 } else if (permission === "denied") { console.log("알림 거부"); // 알림 거부 처리 로직을 실행 } else { console.log("알림 권한 요청을 무시함"); // 사용자가 권한 요청을 무시한 경우의 처리 로직을 실행 } }); // 사용자에게 알림 권한 요청 Notification.requestPermission().then(function(permission) { if (permission === "granted") { // 알림 권한이 허용되면 알림 생성 var notification = new Notification("새 알림", { body: "알림 메시지 본문입니다.", icon: "notification_icon.png", tag: "sample-notification", data: { importantData: "중요한 데이터" } }); // 알림 클릭 이벤트 처리 notification.onclick = function(event) { console.log("알림이 클릭되었습니다.", event); window.open("https://yourwebsite.com", "_blank"); }; // 알림 닫힘 이벤트 처리 notification.onclose = function(event) { console.log("알림이 닫혔습니다.", event); }; } });

if (Notification.permission === "granted") { var notification = new Notification("알림 제목", { body: "알림 내용입니다.", icon: "icon_url_here.png", tag: "알림 태그" // 알림을 구분하기 위한 태그 }); // 알림 클릭 이벤트 처리 notification.onclick = function() { window.open("https://yourwebsite.com"); }; }

// 서비스 워커 등록 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker.js').then(function(registration) { console.log("서비스 워커 등록 성공"); }).catch(function(err) { console.log("서비스 워커 등록 실패:", err); }); } // 서비스 워커 알람 보내기 self.addEventListener('push', function(event) { if (Notification.permission === "granted") { self.registration.showNotification("알림 제목", { body: "알림 내용입니다.", icon: "icon_url_here.png", tag: "알림 태그" }); } });

navigator.serviceWorker.ready.then(function(registration) { if (!('pushManager' in window)) { return; } registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(applicationServerPublicKey) }).then(function(subscription) { console.log('푸시 알림 구독 성공:', subscription); // 서버에 구독 정보를 보냄 }).catch(function(err) { console.log('푸시 알림 구독 실패:', err); }); });

// sw.js 파일 내부 self.addEventListener('push', function(event) { var options = { body: '이것은 푸시 알림 메시지입니다.', icon: 'images/icon.png', vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: '2' } }; event.waitUntil( self.registration.showNotification('푸시 알림 제목', options) ); });

self.addEventListener('notificationclick', function(event) { event.notification.close(); event.waitUntil( clients.openWindow('https://example.com') ); });

navigator.serviceWorker.ready.then(function(registration) { if (!('pushManager' in window)) { return; } });

async function registerServiceWorker () { if (!('serviceWorker' in navigator)) return; // 이미 등록되어있는 정보 가져오기 let registration = await navigator.serviceWorker.getRegistration(); if (!registration) { // 없으면 서비스 워커 등록 registration = await navigator.serviceWorker.register('/service-worker.js'); } }

registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: VAPID_PUBLIC_KEY }).then(function(subscription) { console.log('푸시 알림 구독 성공:', subscription); // 서버에 구독 정보를 보냄 }).catch(function(err) { console.log('푸시 알림 구독 실패:', err); });