예정된 푸시 알림 생성

타임 푸시 알림 : 웹 애플리케이션의 새로운 기능

"타임"은 핵심입니다. 꽤 새로운 기능입니다! 푸시 알림이 예약되면 (예를 들어,“약물 시간이 증가”또는“3 시간 안에 탑승 할 것”) 오프라인 상태이더라도 알림을 사용자에게 표시 할 수 있습니다. 이는 푸시 알림이 과거에 온라인에 있어야하는 푸시 알림 제한을 향상시킵니다.

그렇다면 시간 알림은 어떻게 작동합니까? 우리는 네 가지 주요 부분에 중점을 둘 것입니다.

• 서비스 작업자 스레드 등록
• 타임 푸시 푸시 알림을 추가 및 삭제합니다
• 작업 버튼으로 푸시 알림을 향상시킵니다
• 서비스 작업자 스레드에서 푸시 알림 처리

배경 지식

푸시 알림은 웹 사이트 사용자에게 중요한 이벤트가 발생했으며 (웹) 응용 프로그램을 다시 열어야 할 수도 있음을 알리는 좋은 방법입니다. 알림 API (푸시 API 및 HTTP 네트워크 푸시 프로토콜 결합)를 사용하면 네트워크는 서버에서 애플리케이션으로 푸시 알림을 보내고 장치에 표시하는 쉬운 방법이됩니다.

당신은 이런 종류의 진화를 보았을 것입니다. 예를 들어, 웹 사이트에서 알림을 수락하라는 메시지가 얼마나 자주 나타나나요? 브라우저 공급 업체는 이미 이러한 성가심을 줄이기위한 솔루션을 찾기 위해 고군분투하고 있지만 (Firefox 및 Chrome은 모두 계획을 설명했습니다) Chrome 80은 새로운 알림 트리거 API의 소스 코드 시험을 시작하여 서버 푸시가 아닌 다른 이벤트에 의해 트리거 된 알림을 만들 수 있습니다. 그러나 현재 시간 기반 트리거는 우리가 보유한 유일한 지원 이벤트입니다. 그러나 지리적 위치 기반 트리거와 같은 다른 이벤트가 이미 계획에 있습니다.

JavaScript에서 이벤트를 예약하는 것은 매우 쉽지만 문제가 있습니다. 푸시 알림 시나리오에서는 알림을 표시하려는 정확한 순간에 응용 프로그램이 실행 중인지 확인할 수 없습니다. 이것은 우리가 응용 프로그램 계층에서 일정을 잡을 수 없다는 것을 의미합니다. 대신 서비스 작업자 스레드 레벨에서 작동해야합니다. 새로운 API가 시작되는 곳입니다.

알림 트리거 API는 초기 피드백 단계에 있습니다. Chrome에서 #enable-experimental-web-platform-features 플래그를 활성화하거나 소스 코드 시험에 응용 프로그램을 등록해야합니다.

또한 Service Worker Thread API에는 HTTPS를 통한 안전한 연결이 필요합니다. 따라서 컴퓨터에서 시도하면 HTTPS를 통해 제공되는지 확인해야합니다.

설정

매우 기본적인 설정을 만들었습니다. Application.js 파일, index.html 파일 및 Service-Worker.js 파일 및 일부 이미지 리소스가 있습니다.

 <code>/project-folder ├── index.html ├── application.js ├── service-worker.js └── assets ├─ badge.png └── icon.png</code>

GitHub에서 기본 알림 트리거 API 데모의 전체 예를 찾을 수 있습니다.

서비스 작업자 스레드 등록

먼저 서비스 작업자 스레드를 등록해야합니다. 현재 등록 성공 만 기록합니다.

 // Service-Worker.js
// 설치 이벤트 자체를 듣습니다.

 if (네비게이터의 'ServiceWorker') {
    navigator.serviceworker.register ( '/service-worker.js');
}

푸시 알림을 설정합니다

응용 프로그램에서는 알림을 표시하기 위해 사용자 권한을 요청해야합니다. 거기서부터 서비스 작업자 스레드 등록을 받고 해당 범위에 대한 새로운 알림을 등록합니다. 지금까지 새로운 것은 없습니다.

멋진 부분은 새로운 쇼 트리거 속성입니다. 이를 통해 알림 표시 조건을 정의 할 수 있습니다. 현재 타임 스탬프를 수락하는 새로운 타임 스탬프 트리거를 추가하려고합니다. 그리고 모든 것이 장치에서 직접 발생하므로 오프라인에서도 작동합니다.

 // application.js
document.querySelector ( '#notification-button'). onclick = async () => {
  const reg = await navigator.serviceworker.getRegistration ();
  notification.requestPermission ().
    if (허가! == '부여') {
      경고 ( '푸시 알림을 허용해야 함);
    } 또 다른 {
      const timestamp = new date (). gettime () 5 * 1000; // 이제 5000 밀리 초의 reg.hownotification을 추가합니다.
        '데모 푸시 알림',
        {
          태그 : 타임 스탬프, // 고유 ID
          BODY : 'Hello, World', // 푸시 알림의 내용 ShowTrigger : new TimestampTrigger (timestamp), // 푸시 알림 시간 설정 데이터 : {
            URL : window.location.href, // 현재 URL을 알림으로 전달},
          배지 : './assets/badge.png',
          아이콘 : './assets/icon.png',
        }
      );
    }
  });
};

처리 알림

이제 지정된 타임 스탬프에 알림을 표시해야합니다. 그러나 이제 우리는 그것과 상호 작용할 수있는 방법이 필요하며, 여기서 서비스 작업자 스레드 Notification Click 및 NotificationClose 이벤트가 필요한 곳입니다.

두 이벤트 모두 관련 상호 작용을 듣고 서비스 작업자 스레드의 잠재력을 최대한 활용할 수 있습니다. 예를 들어 새 창을 열 수 있습니다.

 // Service-Worker.js
self.addeventListener ( 'notificationClick', event => {
  event.waituntil (self.clients.openwindow ( '/'));
});

이것은 매우 간단한 예입니다. 그러나 서비스 작업자 스레드의 기능을 사용하면 더 많은 일을 할 수 있습니다. 필요한 창이 이미 열려 있는지 확인하고 새 창이 열리지 않은 경우에만 개방됩니다.

 // Service-Worker.js
self.addeventListener ( 'notificationClick', event => {
  event.waituntil (self.clients.matchall ().
    if (clients.length) {// 하나 이상의 탭이 클라이언트를 가지고 있는지 확인합니다 [0] .focus ()가 열렸습니다.
    } 또 다른 {
      self.clients.openwindow ( '/');
    }
  });
});

알림 작업

사용자와의 상호 작용을 용이하게하는 또 다른 좋은 방법은 사전 정의 된 작업을 알림에 추가하는 것입니다. 예를 들어, 알림을 닫거나 앱을 열는지 여부를 선택할 수 있습니다.

 // application.js
reg.hownotification (
  '데모 푸시 알림',
  {
    태그 : 타임 스탬프, // 고유 ID
    BODY : 'Hello, World', // 푸시 알림의 내용 ShowTrigger : new TimestampTrigger (timestamp), // 푸시 알림 시간 설정 데이터 : {
      URL : window.location.href, // 현재 URL을 알림으로 전달},
    배지 : './assets/badge.png',
    아이콘 : './assets/icon.png',
    행동 : [
      {
        행동 : '오픈',
        제목 : '오픈 앱'
      },
      {
        조치 : '닫기',
        제목 : '클로즈 알림',
      }
    ]]
  }
);

이제 서비스 작업자 스레드에서 이러한 알림을 사용합니다.

 // Service-Worker.js
self.addeventListener ( 'notificationClick', event => {
  if (event.action === 'close') {
    event.notification.close ();
  } 또 다른 {
    self.clients.openwindow ( '/');
  }
});

푸시 알림을 취소하십시오

보류중인 알림도 취소 할 수 있습니다. 이 경우 서비스 작업자 스레드에서 보류중인 모든 알림을 얻은 다음 장치로 전송되기 전에 닫아야합니다.

 // application.js
document.querySelector ( '#notification-cancel'). onclick = async () => {
  const reg = await navigator.serviceworker.getRegistration ();
  const 알림 = reg.getNotifications ({{
    포함 : True
  });
  알림 .foreach (notification => notification.close ());
  Alert (`$ {kalifications.length} 알림이 취소되었습니다.);
};

의사소통

마지막 단계는 서비스 작업자 스레드 클라이언트의 PostMessage 메소드를 사용하여 응용 프로그램과 서비스 작업자 스레드 간의 통신을 설정하는 것입니다. 이미 활성화 된 탭 푸시 알림 클릭 이벤트가 발생했음을 알리고 싶다고 가정 해 봅시다.

 // Service-Worker.js
self.addeventListener ( 'notificationClick', event => {
  event.waituntil (self.clients.matchall ().
    if (clients.length) {// 하나 이상의 탭이 클라이언트를 가지고 있는지 확인합니다 [0] .focus ()가 열렸습니다.
      클라이언트 [0] .postMessage ( '푸시 알림 클릭!');
    } 또 다른 {
      self.clients.openwindow ( '/');
    }
  });
});

 // application.js
navigator.serviceworker.addeventListener ( 'message', event => console.log (event.data));

요약

알림 API는 웹 애플리케이션의 모바일 경험을 향상시키는 매우 강력한 기능입니다. 알림 트리거 API의 출현으로 인해 매우 중요한 개선을 받았습니다. API는 여전히 개발 중이므로 이제는 시도해보고 개발자에게 피드백을 제공하기 가장 좋은시기입니다.

VUE 또는 React를 사용하는 경우 나만의 진행성 웹 응용 프로그램 데모를 확인하는 것이 좋습니다. 다음과 같이 VUE 및 React의 알림 트리거 API를 사용하여 문서화 된 예제가 포함되어 있습니다.

위 내용은 예정된 푸시 알림 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!