티스토리 뷰

[ 공지 ]

프로그레시브 웹 앱의 전반적인 내용에 대해 더 자세하게 배울 수 있는 도서가 출간되었습니다!

 

현재 블로그에 업로드된 PWA 강좌보다 더 다양하고 자세한 내용으로 구성되어있으며,

하나의 SNS 웹 앱을 개발해나가는 방식으로 실습을 진행합니다.

 

(도서 소개 및 실습 미리보기)

https://geundung.dev/106

 

[PWA] SNS 앱 예제로 배우는 프로그레시브 웹 앱 출간!

안녕하세요~!! 이번에 프로그레시브 웹 앱(PWA)을 주제로 한 "SNS 앱 예제로 배우는 프로그레시브 웹 앱" 을 출간하게 되어 간략히 소개하려고 합니다! 🎉 본 블로그에도 프로그레시브 웹 앱에 대�

geundung.dev

 

 

 

SNS 앱 예제로 배우는 프로그레시브 웹 앱

 

(구매 링크 / 2020.07.31 출간)

[YES24]

[교보문고]

[알라딘]

[인터파크도서]

 

 

프로그레시브 웹 앱의 기본적인 내용부터 시작하여, 서비스 워커, 오프라인 캐싱, 백그라운드 동기화 및 푸시 알림까지

상세한 설명을 통해 프로그레시브 웹 앱에 대해 더 다가갈 수 있을 것입니다.

 

 


 

 

안녕하세요~

 

 

오랜만에 진행하는 PWA 강좌인것 같네요

이번 강좌에서는 Push 기능을 구현하여 웹 앱에서 푸시 알림을 받을 수 있도록 진행할 예정입니다!

 

 

소스코드는 지난 강좌에 이어서 진행할 예정이지만,

추가된 코드가 있기 때문에 제공하는 코드에서부터 시작하시는것을 추천드립니다.

 

혹시 소스코드가 필요하시다면 아래 링크에서 다운로드 가능합니다.

https://github.com/leegeunhyeok/pwa-example

(다운로드 방법은 첫 번째 강좌 참조)

 

 

ch5 폴더의 소스코드로 시작하시면 됩니다!

 

 

[1. 푸시 & 풀]

 

 

먼저 푸시 알림에 대해 진행하기 전에 어떤 방식으로 푸시 알림을 주고 받는지 간단하게 짚고 진행하도록 하겠습니다!

 

 

 

먼저 Pull은 클라이언트가 서버로 데이터를 요청한 후 서버로부터 데이터를 직접 가져오는 방식입니다.

웹 페이지와 서버를 예로 들자면, 웹 페이지에서 XMLHTTPRequest(ajax, axios 등) 요청을 보내고

직접 데이터를 받아오는 상황을 생각해볼 수 있습니다.

 

풀 방식은 사용자(클라이언트)가 직접 데이터를 당겨오는 방식으로 이해하시면 될 것 같습니다.

 

 

 

 

 

이와 반대로 Push는 서버에서 클라이언트로 정보를 보내주는 방식입니다.

 

클라이언트가 데이터를 요청하지 않아도 전송 요청이 중앙 서버에서 시작되는 정보 전달방식입니다.

스마트폰의 푸시 알람 등 다양한 알람 서비스가 모두 서버에서 클라이언트로 정보를 보내는

푸시 방식으로 구현되었다고 볼 수 있습니다.

 

 

 

실제 애플리케이션 서버는 기존과 동일하게 주요 로직을 처리하고,

실제 푸시알림을 보내는 서버는 다른 중개서버를 통해 알림을 전송합니다.

 

주로 구글의 FCM (또는 GCM), 애플의 APNs 등의 클라우드 메시징 서비스를 사용하며

직접 푸시 서버를 구축할 수도 있지만 다양한 이슈가 있기 때문에

대부분 제공되고 있는 클라우드 메시징 서비스를 사용합니다.

 

 

애플리케이션 서버와 푸시 서버가 각각 분리되어있는 구조이며

애플리케이션 서버는 푸시 알림에 대한 리소스 자원에 대해 자유롭기 때문에 부담이 적으며 본 기능에 집중할 수 있다는 장점이 있습니다.

 

푸시 알림을 보내야 하는 경우 (예: 댓글 알림, 새로운 글 알림), 애플리케이션 서버에서 클라우드 메시징 서비스의 서버로 사용자 등록 정보(특정 사용자)와 푸시 알림 메시지 내용을 전달하기만 하면 그 이후의 푸시 알림 전송과정은 클라우드 메시징 서비스가 알아서 처리한 후 사용자에게 푸시 알림을 전달합니다.

 

 

간단한 상황을 가정하여 알아보도록 합시다.

(1)

먼저 A라는 서비스 사용자가 B유저를 팔로우 하기 위해 버튼을 눌러 액션을 진행했습니다.

버튼을 누르면 팔로우 데이터를 애플리케이션 서버로 전송하게 됩니다.

 

(2)

애플리케이션 서버에서는 팔로우 정보를 받고 내부적인 로직을 거쳐 데이터베이스 또는 기타 작업을 진행합니다.

(푸시 기능이 없는 서비스라면 여기서 과정이 마무리 됩니다)

A사용자가 B유저를 팔로우 했기 때문에 B유저에게 팔로우 사실을 푸시 알림으로 알리려고 합니다.

애플리케이션 서버에서는 클라우드 메시징 서비스의 서버로 푸시 알림을 요청합니다.

 

(3)

푸시 알림을 요청할 때 서비스 인증 키, 푸시 알림 메시지 내용과 어떤 유저에게 푸시알림을 요청할지에 대한 등록정보를 함께 클라우드 메시징 서비스로 전송합니다.

 

여기서 등록정보는 사용자가 알림 기능을 구독(사용)할 때

클라우드 메시징 서비스에게 등록을 요청하게 되는데 이때 받아오는 정보입니다.

등록되지 않은 사용자는 푸시 알림을 받을 수 없습니다.

 

(4)

클라우드 메시징 서비스에서 서비스 인증 키, 푸시 알림 대상의 등록정보를 확인하여

푸시 알림을 사용자에게 전달합니다.

 

클라이언트에서 푸시 정보를 받고 스마트폰, PC등 다양한 기기에서

푸시 알림을 사용자에게 전달합니다.

 

 

 

 

간단하게 설명하면 위와 같은 순서의 프로세스를 거치게 되며,

사용자 입장에서는 푸시 알림으로 인해 우리의 애플리케이션에 재참여할 수 있게 유도할 수 있습니다.


[2. 클라우드 메시징 서비스]

 

PWA 푸시 강좌는 구글의 FCM을 사용하여 진행할 예정입니다.

FCM은 Firebase Cloud Messaging의 약자로 다양한 플랫폼으로 푸시 알림을 전송할 수 있는 서비스입니다.

 

기존에는 GCM (Google Cloud Messaging)을 많이 사용했는데

FCM으로 기능이 통합되고, 다양한 기능이 추가되었기 때문에 FCM으로 진행하도록 하겠습니다.

 

 

클라우드 메시징 서비스는 아래와 같은 과정을 거쳐 사용자에게 푸시 알림 기능을 제공합니다.

(1)

사용자가 웹 앱에 접속하여 알림을 구독할 경우 클라우드 메시징 서비스로 등록을 요청합니다.

 

(2)

요청을 받은 클라우드 메시징 서비스는 해당 유저의 등록 정보를 제공합니다.

 

(3)

유저는 클라우드 메시징 서비스로부터 받은 등록 정보를 애플리케이션 서버로 전송하여

추후 애플리케이션 서버가 나에게 알림을 보낼 수 있도록 합니다.

(알림을 받을 유저의 등록 정보가 필요하기 때문)

 

 

 

(A)

특정 이벤트(팔로우, 새 댓글 등)로 인해 애플리케이션 서버가 특정 유저에게 푸시 알림을 보내야 하는 경우

알림을 보낼 대상 유저의 등록정보와 푸시 메시지 내용을 클라우드 메시징 서비스로 전달합니다.

 

(B)

애플리케이션 서버로부터 수신한 정보를 확인하며 등록된 유저인 경우 푸시 알림을 보내고, 등록되지 않은 정보인 경우 애플리케이션 서버에게 이를 알립니다.

 

 

 

 

PWA 푸시 강좌의 최종 목적지는 위 그림의 클라이언트애플리케이션 서버를 직접 구현하고 FCM와 연동하여 푸시 메시지 기능을 사용할 수 있도록 할 예정입니다!

 

 

먼저 FCM과 PWA를 연동하기 전에 기본적인 푸시 기능 구현 및 테스트를 진행하고

클라우드 메시징 서비스와 애플리케이션 서버를 구현할 예정입니다.

 


[3. 푸시 알림 구독]

 

푸시 알림을 사용자가 구독해야 푸시 알림을 받을 수 있기 때문에

먼저 구독에 대한 로직을 구현하도록 하겠습니다.

 

ch5 디렉토리를 Simple Server를 통해 실행시킨 후 브라우저에서 접속하면 아래와 같이 보여질겁니다.

(이미지 갯수는 localStorage 데이터에 따라 다를 수 있음)

 

상단에 Subscribe! 버튼이 추가되어있으며 해당 버튼은

알림 구독하기, 구독 취소하기와 같은 액션을 위해 사용되는 버튼입니다.

 

HTML 코드를 확인해보시면 subscribe ID가 부여되어있으니 참고하시길 바랍니다!

 

 

 

 

 

개발을 시작하기에 앞서 현재 상황으로는 우리의 애플리케이션 서버가 없기 때문에

구글의 애플리케이션 서버를 임시로 사용하여 진행하도록 하겠습니다.

 

https://web-push-codelab.glitch.me

 

Push Companion

This site is here to make it easy to get going with sending a push message, but it's obviously not helpful for sending push messages from your site. To send push messages from your own server, use one of the libraries available here.

web-push-codelab.glitch.me

 

 

위 링크에 접속하면 공개 키와 비공개 키가 생성되는데 여기서 공개 키를 복사하여 소스코드로 붙여넣기 합니다.

 

여기서 생성된 공개키/개인키 쌍은 웹 푸시 프로토콜에서 인증하기 위해 사용되는

VAPID(자발적 애플리케이션 서버 식별, Voluntary Application Server Identification)키 입니다.

 

 

자세한 설명은 생략하지만, 푸시 서비스와 사용자 그리고 푸시를 트리거하는 웹 서버의 유효성을 검사(인증)하고,

기타 문제가 발생한 경우 관리자에게 연락하는 수단을 제공하기 위해 사요합니다.

 

 

 

scripts/app.js의 4행에 붙여넣기합니다.

<YOUR_KEY> 부분을 지우고 복사한 공개키를 붙여넣어주세요

 

isSubcribed는 구독 상태를 저장하는 상태 변수입니다.

swRegist는 서비스 워커가 등록되었을 경우 반환되는 서비스워커 등록 객체입니다.

 

 

소스코드 아래쪽을 확인해보면 구현되지 않은 함수들이 있습니다.

주요 기능들은 강좌를 진행하며 직접 구현할 예정입니다.

 

 

 

먼저 initPush 함수를 구현해봅시다.

initPush함수는 푸시 기능에 대한 초기화 함수입니다.

 

유저의 푸시 구독 상태, 알림 기능 활성화 상태 등 기본적인 상태를 확인하는 함수입니다.

 

위와 같이 코드를 작성합니다.

 

 

먼저 #subcribe 버튼에 클릭 이벤트를 등록하는 모습을 확인하실 수 있습니다.

 

유저가 알림을 구독한 상태라면 구독 취소하고, 구독하지 않았다면

알림을 받아볼 수 있도록 구독하는 로직으로 구현되어있습니다.

subcribe 함수는 현재 비어있기 때문에 버튼을 눌러도 아무런 반응이 없습니다.

 

 

아래의 이 코드는 기존에 푸시 알림을 구독한 정보를 가져옵니다.

 

만약 유저가 이미 구독한 상태라면 구독 정보가 resolve되어 전달됩니다.

구독되지 않은 상태라면 null이 반환되기 때문에 구독 상태를 판단할 수 있게 됩니다.

 

구독 정보를 확인하여 isSubscribed 값을 변경하고 updateSubscription 함수로 구독 정보를 전달합니다.

updateSubscription 역시 비어있는 함수이며 추후 구독 정보를 애플리케이션 서버로 전달하기 위한 로직을 구현할 예정입니다.

 

updateButton 함수는 알림 권한 및 구독 상태에 따라 버튼의 텍스트와 활성화/비활성화 여부를 변경할 함수이며 곧 구현할 함수입니다!

 

 

 

 

초기화 함수에서 알림 구독 로직을 처리할 subcribe 함수를 구현해봅시다.

 

 

urlB64ToUint8Array 함수를 통해 공개키 문자열을 Uint8Array 타입으로 변환하는 코드를 확인하실 수 있습니다.

(urlB64ToUint8Array 함수는 app.js 코드 상단에 구현되어있음)

 

변환된 애플리케이션 서버 코드는 applicationServerKey 값으로 지정해주면 되며

 

userVisibleOnly 프로퍼티는 푸시가 전송될 때마다 알림을 표시할지 결정하는 값 입니다.

작성 시점에서는 이 값이 필수이고 반드시 true여야 합니다.

 

구독하지 않은 처음 사용자인 경우 새로 등록하여 구독정보를 받아옵니다.

 

구독정보를 받고 해당 정보는 initPush와 동일하게

updateSubscription를 통해 애플리케이션 서버로 전송하고 버튼 상태를 업데이트합니다.

 

구독 정보를 받아온 경우 구독을 정상적으로 한 상황이므로 isSubscribed의 값을 true로 변경합니다.


[4. 버튼 상태 갱신]

 

앞서 진행한 과정 중 pushManager.subscribe 및 pushManager.getSubscription을 통해

구독 상태를 판단할 수 있음을 확인했습니다.

 

구독 상태를 판단하고 isSubscribed 변수의 상태값을 변경할 수 있도록 구현했는데요,

이제 이 isSubscribed 값을 확인하여 버튼의 상태 메시지를 변경할 수 있도록 updateButton 함수를 구현해봅시다.

 

 

구독 액션을 위해 미리 구성해둔 #subscribe 버튼의 Element를 가져온 후 해당 버튼의 텍스트를 바꾸려고 합니다.

 

isSubscribed 상태에 따라 푸시 알림 활성화/비활성화 텍스트가 표현되도록 구현되었습니다.

 


[5. 구독 정보 전송]

 

구독 정보를 서버로 전송하는 함수인 updateSubscription을 구현해봅시다.

 

현재 애플리케이션 서버를 구현하지 않았으므로 서버로 전송하지 않고,

구독 정보를 웹 화면에 표현하도록 구현할 예정입니다.

 

 

간단하게 구성했는데요 인자로 받아온 구독 정보가 존재한다면

해당 구독 정보를 문자열로 반환하여 subscription_detail 영역에 텍스트로 보여주고,

구독 정보가 없다면 해당 subscription_detail영역을 숨기도록 구현되어 있습니다.

 

 

 

마지막으로 initPush 함수를 호출하도록 코드를 추가해줍니다.

// TODO: Push 기능 초기화 부분에 initPush 함수를 호출하도록 작성해주세요!

 

 


[6. 푸시 알림 받기]

 

푸시 알림을 받기 위해 서비스워커 소스코드를 추가해줍니다.

(service-worker.js)

 

event를 통해 푸시 데이터를 받아올 수 있습니다.

받아온 데이터를 통해 푸시 알림을 구성하고, showNotification을 통해 푸시 알림을 생성할 수 있습니다.

 

showNotification은 Promise가 반환되며 waitUntil을 통해 Push 이벤트를 연장시켜야 합니다.

 

서비스워커의 푸시 이벤트 핸들러는 데이터를 받고, 보여주기만 하면 되기 때문에 복잡하지 않습니다.

 

 

 

 

브라우저에서 캐시와 서비스워커를 제거하거나 서비스워커 소스코드 상단의 _version과 cacheName 값을 변경하여 새로 작성한 코드가 캐싱되고 등록될 수 있도록 수정해주세요!!

 

 

웹 페이지를 다시 로드하면 상단의 "Subscribe!" 버튼이

"Enable Push Messaging" 텍스트로 변경됨을 확인하실 수 있습니다.

 

updateButton으로 구현한 로직이 잘 동작하고 있네요.

 

 

 

푸시 메시지 활성화 버튼을 누르면 브라우저에서 알림 권한을 사용자에게 물어봅니다.

허용을 눌러줍니다.

 

 

권한을 허용하면 등록 정보를 받아오게 되고, subscription_detail 영역에 표현됩니다.

 

보여지는 구독 정보는 추후에 애플리케이션 서버로 전송하게 될 예정이고,

구독 정보를 통해 서버에서 지금 웹 앱을 실행하고 있는 기기에 푸시 알림을 보낼 수 있습니다.

 

 

푸시 알림을 확인하기 위해 구독정보를 복사하여 https://web-push-codelab.glitch.me 페이지 하단에 붙여넣습니다.

(아까 생성한 키 값이 변경되었다면 소스코드의 키 값도 다시 변경해주셔야 합니다.)

Text to Send 부분에는 푸시 메시지로 받을 데이터를 작성해주세요

 

그리고 SEND PUSH MESSAGE 버튼을 누르면 우리의 웹 앱으로 푸시 메시지를 보내줍니다!

 

 

 

짠!

 

드디어 웹에서 푸시 알림을 받았습니다!

 

 

 

 

사실 매우 간단한 푸시 테스트인 경우 개발자 도구를 통해서도 가능합니다.

(app.js에 구현했던 코드 전혀 없이)

 

Application > Service Workers > Push에 메시지 입력후 Push 버튼

개발자 도구를 통해 진행하는 테스트의 경우 서비스 워커의 Push 이벤트에 구현된 부분만

결과물로 확인할 수 있기 때문에

알림 구독, 구독 취소, 권한 상태 등에 대한 결과는 확인할 수 없습니다.

(간단히 푸시 알림만 확인할 때 사용하는 기능입니다)

 

 

 

지금은 애플리케이션 서버는 구글 코드랩의 테스트 서버로 빌려 사용하고 있지만

이후 강좌에서는 직접 애플리케이션 서버를 구축하여 진행할 예정입니다.

 

 

페이지를 새로 고침해도 여전히 구독 정보가 남아있기 때문에

구독을 취소하지 않는 이상 구독 정보는 그대로 유지됩니다.

 

 

웹 앱의 Disable Push Messaging 버튼을 눌러보면 구독이 취소되어야 하는데 아직 아무런 반응이 없습니다.

또한 브라우저에서 알림 권한을 거부했을 경우의 처리도 되어있지 않은 상황입니다.

 

크롬의 경우 상단의 i 버튼을 눌러 권한을 변경할 수 있습니다.

 

알림 권한을 "차단" 으로 변경하고 페이지를 새로고침할 경우

Enable Push Messaging 버튼을 눌러도 아무 반응이 없습니다.

 

유저가 직접 알림을 차단(비활성화가 아닌 차단)한 경우 버튼을 비활성화 하고 유저에게 차단된 기능임을 알려야 합니다.

 

 

 

 

다음 강좌에서는

푸시 알림을 클릭했을 때의 이벤트 처리, 알림 구독 취소, 브라우저 알림 권한 확인에 대한 부분을 알아보고 구현하도록 하겠습니다.

 

 

감사합니다!

댓글
  • 프로필사진 pwa 안녕하세요.
    pwa 예제를 통해서 따라하고 있는데,
    pc로 localhost에서는 잘 동작하는데
    모바일로 192.168.~~로 접속하면 동작이 안해서 보니
    매니페스트랑 서비스워커 파일을 못불러오더라구요..
    설명글 찾아보니 https에서만 동작한다고도 하는데,
    localhost도 마찬가지로 http거든요
    simple server에서도 127.0.0.1과 localhost만 있고..
    프로젝트 새로파서 톰켓으로 연결해도 마찬가지네요
    도와주십쇼ㅜㅜ
    2019.09.04 14:15
  • 프로필사진 pwa 셀프 답변입니다.
    찾아보니 https 환경에서만 작동하는데,
    localhost는 기본 http이지만
    개발용으로 localhost는 http에서도 작동하도록 되어있더군요.
    따라서 192.168~ 인 외부 아이피는 해당하지 않아서 작동하지 않는거 였습니다 ㅜㅜ
    2019.09.04 15:39
  • 프로필사진 BlogIcon 이근둥 아아 첫 강좌때 이 부분을 짚고가야했는데 미흡했던 부분이 있네요.. PWA 서비스워커는 개발 및 디버깅을 위한 로컬호스트와 HTTPS에서만 작동합니다 2019.09.04 19:37 신고
  • 프로필사진 xianming713@gmail.com 똑같이 따라 했는데 나는 왜 Subscribe바튼이 Enable push messaging으로 조차 바뀌지 않을가요?
    updatebutton()으로 구현한 로직이 작동이 안되는지 모르겠네요~
    version과 cacheName도 달리했는데도...
    이유를 알고싶습니다.
    이자 다시 해봤는데 역시 안됩니다.
    console에 An unknown error occurred when fetching the script.
    이런 글자가 나오고 debug를 해봤는데 updateButton에는 걸리지 않습니다.
    제가 뭘 잘못햇는지 가루쳐주세요.
    2020.01.04 22:58
  • 프로필사진 BlogIcon 이근둥 코드를 확인할 수 없어서 정확한 답변을 드리긴 어렵지만 서비스 워커 코드를 한 번 확인해주세요

    문제가 없다면 동일한 클라이언트(브라우저 탭)를 모두 닫았다가 다시 탭을 새로 열어서 확인해주세요
    2020.01.06 20:56 신고
  • 프로필사진 hslbi 하단
    // TODO: Push 기능 초기화
    아래에

    initPush();

    를 추가하시면 될 것 같네요.
    2020.03.25 19:14
  • 프로필사진 xianming713@gmail.com PWA를 배우는 구석은 다 뒤져봤는데 여기만한데가 없습니다.
    그런데 PWA배우기가 만만하지 않다는데 확실합니까?
    저는 pwa를 배우고 싶은데 어떻게 해야하는지 잘 좀 부탁드립니다.
    2020.01.07 14:49
  • 프로필사진 BlogIcon 이근둥 좋은 평가 감사드립니다. PWA은 현재에도 발전하고 있는 기술이며 새로운 기술 사양을 활용하기 때문에 비교적 배우기 어려울 수 있습니다. (어렵다기보단, 상대적으로 레퍼런스 자료가 풍부하지 않습니다)

    처음 프로그레시브 웹 앱을 배우시는 경우에는 본 블로그 게시물을 확인하거나 구글의 코드랩 실습을 추천드립니다.

    이후 더 상세한 정보를 확인하고싶으시면 MDN 웹 문서, w3 사양 등의 신뢰성있는 문서를 확인하시면 됩니다.

    서비스 워커의 경우 https://serviceworke.rs에서 다양한 활용법도 확인해보실 수 있습니다
    2020.01.07 16:44 신고
  • 프로필사진 xianming713@gmail.com 친절한 답글에 너무 감사합니다.
    한가지 물어봐도 되겠는지...
    혹 wekan를 windows에 설치하는 방법을 알고 계시는지,알고 있으면 좀 도와주시면 감사하겠습니다.
    2020.01.08 23:12
  • 프로필사진 BlogIcon 이근둥 죄송합니다, wekan에 대해 알고있는게 없어서 답변드리긴 어려울 것 같습니다 ㅜ 2020.01.08 23:28 신고
  • 프로필사진 xianming713@gmail.com 친절한 답글에 감사드리는 바입니다. 2020.01.09 00:17
  • 프로필사진 지나가던 링크된 원본 코드에 오타가 있습니다.
    script/app.js의 상단에 let isSubcribed = false 를 let isSubscribed = false; 로 바꿔 주셔야 합니다.
    2020.04.13 07:36
  • 프로필사진 BlogIcon 이근둥 감사합니다! 추후에 강좌 리뉴얼 시 확인하여 업데이트 하도록 하겠습니다 :) 2020.04.15 16:53 신고
  • 프로필사진 초보개발자 개발자 도구 콘솔에는 푸시 알림이 성공적으로 전송되었다고 나오는데 오른쪽 아래에 트레이 메세지가 출력되지 않는데 어떤 이유인지 여쭤볼 수 있을까요?ㅜㅜ 2020.04.20 17:05
  • 프로필사진 BlogIcon 이근둥 운영체제의 방해금지 모드나 크롬 자체의 알림을 비활성화했는지 확인해보시겠어요?

    위 요인에 아무런 문제가 없다면, 아래의 항목을 확인해보고 알려주세요!

    1. 웹 페이지의 알림 권한 확인 (허용)
    2. 구독 정보 확인
    3. 개발자 도구에서 푸시 알림 전송해보기
    2020.04.20 17:23 신고
  • 프로필사진 초보개발자 친절한 답변 감사드립니다 덕분에 해결했습니다!! 2020.04.20 17:33
  • 프로필사진 감사합니다 덕분에 Push 알림이 작동 하는걸 눈으로 확인했습니다! 2020.05.08 16:21
  • 프로필사진 BlogIcon 이근둥 감사합니다 :) 2020.05.08 16:25 신고
  • 프로필사진 dev 브라우저를 종료한 상태에서도 푸시를 받을 수 있나요? 2020.07.25 02:29
  • 프로필사진 BlogIcon 이근둥 네, 서비스 워커는 브라우저의 백그라운드에서 동작하기 때문에 일반적인 네이티브 앱처럼 언제든지 알림을 받을 수 있습니다 2020.07.28 02:30 신고
  • 프로필사진 fs 아이폰에서도 작동할까요? 여러모로 찾아보고 있는데, 아이폰에선 안된다고 많이 그래서. 직접 구현해봐도 아이폰에선 안먹히더라구요. 방법이 있는지 궁금합니다. 2020.08.01 03:35
  • 프로필사진 BlogIcon 이근둥 아쉽게도, 현재 애플 기기의 사파리 브라우저(14 버전 기준)에선 푸시 알림 기능을 지원하지 않습니다..

    맥 같은 경우에는 사파리 외의 기타 브라우저(크롬, 파이어폭스 등)를 사용하면 푸시 기능을 사용할 수 있지만, iOS의 브라우저는 모두 웹킷 기반(사파리 엔진)으로 통일되어있기 때문에 현재로썬 아이폰/아이패드의 브라우저에서 푸시 알림 기능은 사용할 수 없습니다.
    2020.08.03 13:31 신고
  • 프로필사진 석동현 안녕하세요 ~ nodeJS랑 리액트로 만든 앱에 적용하고싶은데,
    기존 서버에 적용하는 강의는 혹시 계획 없으신가요 ?? ㅎㅅㅎ 아니면 책에 관련된 내용이 있을지요 ㅎㅎ
    잘보고갑니다!!
    2021.03.23 10:59
  • 프로필사진 영블 안녕하세요. 좋은 글때문에 잘 쓰고있는데 다 잘되는데 service-worker 에서 self.addEventListener('push', event =>{
    }. 이부분이 동작이 아무것도 없습니다. 해당 web-push-codelab.glitch.me 에서 준걸로 serverkey도 잘받아지고 버튼 누르면 disable push messaging으로 뜨면서 해당 구독정보도 떠서 그걸 web-push-codelab에 붙여서 메세지 보내기 하면 메세지도 안오고 service-worker.js에서 'push' 이벤트 console.log로 찍히는것도 없는데 혹시 왜 그런지 알수있나요?
    2022.01.06 20:08
댓글쓰기 폼