iPhone 및 iPad의 웹 푸시

iOS 및 iPadOS 16.4 이상을 사용하는 iPhone 및 iPad 사용자는 웹사이트를 홈 화면에 추가한 후 해당 웹사이트에서 웹 푸시 알림을 받을 수 있습니다.

iPhone 및 iPad에서 웹 푸시가 작동하는 경우

iOS 및 iPadOS의 웹 푸시는 홈 화면 아이콘으로 연 웹사이트에서만 작동합니다. 일반 Safari 탭에서는 브라우저가 푸시를 전혀 제공하지 않으므로 Web SDK는 푸시 없이 초기화되고 방문자는 구독할 수 없습니다.

알림을 받으려면 사용자에게 다음이 필요합니다.

iOS 또는 iPadOS 16.4 이상을 실행하는 iPhone 또는 iPad.
홈 화면에 추가하고 해당 아이콘으로 연 웹사이트.
사이트에서 탭한 것에 대한 응답으로 허용된 알림.

웹사이트에 필요한 사항

데스크톱 브라우저와 동일한 방식으로 Web SDK를 통합한 다음 웹 앱 매니페스트를 추가합니다.

웹 푸시 SDK 3.0에 따라 SDK와 서비스 워커를 통합합니다. 사이트에 이미 자체 서비스 워커가 있다면 프로그레시브 웹 앱 지원을 따르세요.

display를 standalone 또는 fullscreen으로 설정한 웹 앱 매니페스트를 추가하고 모든 페이지에서 연결합니다.

{
  "name": "Example Store",
  "short_name": "Store",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

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

사용자의 탭에 대한 응답으로 알림 권한을 요청합니다. iOS 및 iPadOS는 사용자의 직접적인 동작에 대한 응답으로만 권한 대화 상자를 표시하므로 구독 위젯 또는 Pushwoosh.subscribe()를 호출하는 버튼을 사용하세요.
```
<button onclick="Pushwoosh.subscribe()">Get notifications</button>
```

Pushwoosh에서 iPhone 및 iPad 구독자를 찾는 방법

Pushwoosh는 iPhone 및 iPad 웹 구독자를 Chrome 플랫폼으로 등록하므로 통계에 별도로 표시되지 않으며, 기기를 확실하게 식별하는 기본 태그도 없습니다.

이러한 구독자를 타겟팅하려면 웹사이트에서 자체 태그를 설정하세요.

사이트가 태그를 보내기 전에 Control Panel에서 사용자 지정 태그를 생성합니다. 예를 들어 Web App Platform이라는 이름의 String 태그를 만듭니다. 기본적으로 선택되어 있는 사용자별 체크박스를 선택 해제합니다. 이렇게 하면 기기별로 저장되는 일반 태그가 생성됩니다.

이 단계를 건너뛰면 setTags가 태그를 사용자별 태그로 자동 생성합니다. 이 태그의 값은 동일한 User ID를 가진 모든 기기가 공유하므로, 사이트가 registerUser를 호출하면 사용자의 데스크톱 브라우저에도 ios 값이 설정되고 이 태그로 iPhone 및 iPad 구독자를 타겟팅한 메시지를 받게 됩니다.

사이트가 iPhone 또는 iPad의 홈 화면에서 실행될 때 태그를 설정합니다.

Pushwoosh.push((api) => {
  // iPadOS Safari reports a Mac user agent, so a touch screen marks an iPad
  const isIos = /iPhone|iPad/.test(navigator.userAgent)
    || (/Macintosh/.test(navigator.userAgent) && navigator.maxTouchPoints > 1);
  const isIosHomeScreen = isIos && (window.navigator.standalone === true
    || window.matchMedia('(display-mode: standalone)').matches);

  if (isIosHomeScreen) {
    api.setTags({ 'Web App Platform': 'ios' });
  }
});

테스트용 iPhone 또는 iPad에서 구독합니다.
사용자 탐색기에서 해당 기기의 태그 값을 확인합니다. setTags는 Pushwoosh가 값을 저장하지 않은 경우에도 성공을 반환합니다. 예를 들어 계정에서 태그 자동 생성이 꺼져 있는 경우입니다. 따라서 코드만으로는 값이 저장되었는지 확인할 수 없습니다.
이 태그를 기준으로 세그먼트를 구축하여 iPhone 및 iPad 구독자에게만 메시지를 보냅니다.