Push API / Notifications API푸시알림 기능에 대해 자세히 알아보기 전에, 알림 기능에서 자주 쓰이는 두 API에 대해 살펴보겠습니다. Push APIPush API는 server에서 service worker로 알림을 보내기 위해 사용하는 API입니다.브라우저가 서버로부터 푸시 메시지를 수신할 수 있는 기능을 제공합니다.브라우저(웹앱)의 활성 여부와 관계 없이 푸시 메시지를 받을 수 있다는 장점이 있습니다.서비스 워커가 활성화되면, Push API의 PushManager.subscribe() 메서드를 사용하여 푸시 알림을 구독할 수 있습니다. Notification APINotification API는 브라우저가 사용자에게 알림배너(UI)를 띄우기 위해 사용하는 API입니다.serv..

서비스워커란?정의특정 출처(사이트)의 하나 혹은 그 이상의 페이지를 제어하는 스크립트이벤트 기반 워커로서 JavaScript로 작성된 파일기능서비스 워커는 자신이 제어하는 페이지에서 발생하는 이벤트를 수신할 수 있다.웹에서 네트워크 요청과 같은 이벤트를 가로채어 수정할 수 있고, 이를 다시 페이지로 돌려보낼 수 있다.또한, 서비스에서 사용하는 리소스를 캐싱할 수 있다. 서비스워커 사용법1. 서비스워커 만들기// app.jsif ("serviceWorker" in navigator) { navigator.serviceWorker .register("/sw.js") .then(function (registration) { console.log("Service Worker registe..

글 작성 목적이번 프로젝트에서 PWA를 사용했는데, 완성까지의 시간이 촉박하여 제대로 알아보지 못하고 적용하게 되었습니다. 이로 인해 PWA가 동작하는 서비스워커 환경에서 추가적인 이슈들이 발생했습니다.그래서 이번 일을 기회로 삼아 PWA란 무엇인지, 서비스워커란 무엇인지에 대해 정리하고 넘어가고자 합니다. 그래서, PWA가 뭔데?PWA는 Progressive Web App의 약자로, 웹과 네이티브 앱 기능의 장점을 뽑아 만든 웹 앱입니다. 그럼 기존 웹 앱과 네이티브 앱의 기능은 어떤게 있는지 먼저 알아야겠죠. 1. 웹 앱 (Web App)구동 방식이 앱처럼 보이는, 웹 브라우저를 통해 실행 가능한 애플리케이션입니다.장점 ✅ 링크(URL)을 통해 간단하게 접근할 수 있고, 별도의 설치 과정이 필요없습..