iOS 웹 푸시 소개 및 동작 원리

애플은 iOS 16.4 버전부터 웹 푸시 공식 지원을 발표했습니다. 모바일 앱 없이 푸시 발송이 가능한 웹 푸시를 이제 iOS에서도 사용할 수 있어 매우 유용하지만 아직 몇 가지 제약사항도 있습니다.

본 가이드에서는 iOS 웹 푸시 구현을 위한 요구사항 및 동작 원리에 대해 설명드리겠습니다.

요구사항

플레어레인은 iOS 웹 푸시를 100% 지원하며, 웹사이트는 아래 조건을 모두 만족해야합니다.

플레어레인 웹 푸시 SDK 연동
manifest.json 파일 생성 및 적용
'홈 화면에 추가'를 통해 추가된 웹앱을 통해 접속

연동 순서

1. 플레어레인 웹 푸시 SDK 연동

플레어레인 SDK를 통해 매우 쉽게 웹 푸시를 구현할 수 있습니다. 아래 가이드를 참고하여 플레어레인 프로젝트를 생성하고 웹 푸시를 연동합니다.

Web SDK

2. manifest.json 파일 생성 및 적용

Web APP Manifest 파일은 웹사이트를 웹앱으로 만들기 위해 앱 이름, 아이콘 등을 정의하는 JSON 형태의 파일입니다.

파일은 최소한 아래 값들을 모두 포함해야합니다. 우리 서비스에 맞게 이름이나 아이콘 등 적절하게 변경하여 파일을 생성하고 업로드합니다.

manifest.json

{
    "name": "플레어레인",
    "icons": [{
        "src": "/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    }],
    "display": "fullscreen"
}

웹사이트의 <head> 태그 안에 업로드한 파일을 연결할 수 있도록 다음과 같은 코드를 삽입합니다.

index.html

<link rel="manifest" href="/manifest.json" />

3. 홈 화면에 추가된 웹앱을 통해 접속

위 두 가지 조건을 모두 만족한 사이트에 대해 유저는 '홈 화면에 추가'를 클릭하여 유저의 기기에 웹앱을 추가해야합니다. 이렇게 추가된 웹앱을 통해 다시 접속했을 때 알림 허용을 요청하게 됩니다.

iOS Safari 공유 메뉴에서 홈 화면에 추가 옵션 선택 화면

4. 웹 푸시 구독

전 단계에서 추가된 홈 화면의 웹앱을 통해 다시 접속하면 자동으로 알림 권한을 묻는 팝업이 노출됩니다.

홈 화면 웹앱 실행 후 iOS 알림 권한 요청 팝업 화면