Skip to content

Safari 모바일 웹 푸시(iOS 및 iPadOS)

Safari v16.4는 모바일 웹 푸시를 지원하므로 이제 iOS 및 iPadOS에서 푸시 알림을 통해 모바일 사용자의 참여를 다시 유도할 수 있습니다.

이 문서에서는 Safari용 모바일 푸시를 설정하는 데 필요한 단계를 안내합니다.

통합 단계

먼저 표준 웹 푸시 통합 가이드를 읽고 따릅니다 다음 단계는 iOS 및 iPadOS 지원을 위해 Safari에서 웹 푸시를 지원하는 경우에만 필요합니다.

1단계: 매니페스트 파일 만들기

웹 애플리케이션 매니페스트는 웹사이트가 사용자의 홈 화면에 설치될 때 표시되는 방식을 제어하는 JSON 파일입니다.

예를 들어 앱 스위처에서 사용하는 배경 테마 색상과 아이콘, 기본 앱과 비슷하게 전체 화면으로 렌더링할지, 앱을 가로 또는 세로 모드로 열지 여부를 설정할 수 있습니다.

웹사이트의 루트 디렉터리에 다음과 같은 필수 필드를 사용하여 manifest.json 파일을 새로 만듭니다.

1
2
3
4
5
6
7
8
9

{
  "name": "your app name",
  "short_name": "your app name",
  "display": "fullscreen",
  "icons": [{
    "src": "favicon.ico",
    "sizes": "128x128",
  }]
}

지원되는 전체 필드 목록은 여기에서 확인할 수 있습니다.

웹사이트의 <head> 요소에 매니페스트 파일이 호스팅되는 위치를 가리키는 다음 <link> 태그를 추가합니다.

1

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

3단계: 서비스 종사자 추가

웹 푸시 통합 가이드에 설명된 대로 웹사이트에 Braze 서비스 워커 라이브러리를 가져오는 서비스 워커 파일이 있어야 합니다.

4단계: 홈 화면에 추가

Chrome 및 Firefox와 같은 주요 브라우저와 달리 Safari iOS/iPadOS에서는 웹사이트가 사용자의 홈 화면에 추가되지 않은 경우 푸시 권한을 요청할 수 없습니다.

홈 화면에 추가 기능을 사용하면 사용자가 웹사이트를 북마크에 추가하여 귀사의 아이콘을 소중한 홈 화면 공간에 추가할 수 있습니다.

웹사이트를 북마크하고 홈 화면에 저장하는 옵션을 보여주는 iPhone

5단계: 기본 푸시 프롬프트 표시

앱이 홈 화면에 추가되면 이제 사용자가 버튼을 클릭하는 등의 작업을 수행할 때 푸시 권한을 요청할 수 있습니다. requestPushPermission 메서드를 사용하거나 노코드 푸시 프라이머 인앱 메시지를 사용하여 수행할 수 있습니다.

알림을 '허용' 또는 '허용하지 않음'으로 설정할지 묻는 푸시 메시지

예를 들어, 다음과 같습니다.

1
2
3
4
5
6
7
8
9

import { requestPushPermission } from "@braze/web-sdk";

button.onclick = function(){
    requestPushPermission(() => {
        console.log(`User accepted push prompt`);
    }, (temporary) => {
        console.log(`User ${temporary ? "temporarily dismissed" : "permanently denied"} push prompt`);
    });
};

다음 단계

그런 다음 테스트 메시지를 보내 통합을 검증합니다. 통합이 완료되면 코드가 없는 푸시 프라이머 메시지를 사용하여 푸시 옵트인율을 최적화할 수 있습니다.

Github   GitHub 에서 이 페이지를 편집합니다.
이 페이지가 얼마나 도움이 되었나요?
New Stuff!