웹 응용 프로그램에 대한 푸시 알림을 구축하는 방법

웹 애플리케이션에서의 사용자 참여 개선 : 웹 푸시 알림에 대한 자세한 설명 이 기사는 기본 응용 프로그램과 유사한 알림 기능을 추가하여 기존 웹 응용 프로그램의 사용자 경험을 향상시키는 방법을 살펴 봅니다. 웹 푸시 알림의 개념을 심도있게 설명하고 기존 웹 애플리케이션 에이 기능을 통합하는 방법을 점차적으로 보여 주며 현재 사양 및 브라우저 지원을 다룹니다. 이 기사는 원래 Sencha에서 출판되었습니다. SitePoint를 지원하는 파트너에게 감사합니다.

코어 포인트 :

기본 사항 이해 : 웹 푸시 알림을 사용하면 웹 애플리케이션이 응용 프로그램이 비활성화되어 있더라도 사용자 장치로 직접 메시지를 보낼 수 있습니다.

서비스 작업자 등록 : 서비스 작업자는 푸시 메시지를 처리 ​​할 책임이 있으며 페이지를로드 할 때 등록해야하며 적절한 브라우저 지원 점검을 수행합니다. 사용자 구독 프로세스 : 푸시 알림 수신의 주요 단계에는 사용자 동의서 얻기, 브라우저를 통해 푸시 구독 생성 및이 데이터를 응용 프로그램 서버로 전송하는 것이 포함됩니다.

> 푸시 메시지 보내기 : 푸시 메시지를 암호화하여 HTTP 포스트 요청을 통해 보내야하며 TTL 및 긴급 성과 같은 매개 변수를 사용하여 전달 세부 정보를 관리해야합니다.

처리 메시지 및 사용자 상호 작용 : 서비스 작업자는 수신 푸시 메시지를 처리하고 알림 클릭 및 마감과 같은 사용자 상호 작용을 관리합니다.
• 수신 및 가입 만료 : 사용자가 구독을하지 않고 만료 및 갱신을 포함한 구독 라이프 사이클 이벤트를 처리 할 수있는 방법을 제공합니다.
• 웹 푸시 알림 프로토콜 웹 푸시 알림 프로토콜은 비교적 새롭습니다. 웹 응용 프로그램에 기본 응용 프로그램과 같은 기능을 제공하여 웹 응용 프로그램이 활성화되거나 브라우저에로드되지 않더라도 언제든지 서버에서 푸시 메시지를 수신 할 수 있습니다. 이를 통해 언제든지 사용자와 상호 작용할 수있어 앱을 사용하지 않더라도 앱으로 돌아갈 수 있습니다.
웹 푸시 알림의 상업적 값은 분명합니다. 사용자 참여를 증가시켜 응용 프로그램의 전반적인 값을 증가시킬 수 있습니다. 푸시 알림이 사용자에게 더 유용하고 웹 애플리케이션의 유용성을 향상시키고, 웹 애플리케이션의 유용성을 향상시키기 때문입니다. 우리에게 우리에게 더 유용하게 만듭니다.
• 웹 푸시와 웹 소켓 비교 기술적 세부 사항에 들어가기 전에 먼저 웹 푸시와 WebSockets의 차이점을 이해해 봅시다. 첫째, 웹 푸시 및 웹 소켓은 웹 응용 프로그램과 애플리케이션 서버 간의 실시간 통신을 가능하게하고 응용 프로그램 서버에서 웹 애플리케이션으로 실시간 데이터 및 업데이트를 보내도록 설계되었습니다. 다음은 차이점입니다
  WebSockets
  • 웹 페이지가로드되고 활성화 될 때만 사용하십시오. 웹 푸시 알림은 앱이 활성화, 비활성 또는 언로드 된 시점을 포함하여 언제든지, 브라우저가 활성화되거나 닫히지 않은 경우를 포함하여 언제든지 사용할 수 있습니다. 웹 푸시를 사용하여 전송 된 데이터는 암호화되어야하며 각 메시지의 크기는 제한되어 있습니다 (4KB 이하). 전송 된 메시지 수에는 제한이 있습니다 (정확한 한계 값은 브라우저에 따라 다릅니다). 일부 브라우저 (예 : Chrome)는 메시지를받을 때마다 사용자에게 알림을 표시해야 할 수도 있습니다. Websockets를 사용하는 경우 이러한 제한 사항이 없습니다. 크기의 암호화되지 않은 메시지를 보내고 필요에 따라 처리 할 수 ​​있습니다. 일반 규칙은 다음과 같습니다. 사용자가 응용 프로그램과 상호 작용할 때 WebSockets를 사용하여 웹 푸시 알림을 사용하여 사용자가 사용하는지 여부에 관계없이 즉시 수신 해야하는 긴급한 메시지를 보냅니다. 당시 귀하의 신청서.
  • 기술 개념
  • 이 기술의 기술적 세부 사항을 살펴 보겠습니다. 특별한 규칙, 참가자가있는 게임을 사용하고 이러한 세부 사항을 설명합니다. 먼저이 게임의 참가자를 "웹 푸시 알림"이라는 참가자를 설명하겠습니다.
  웹 응용 프로그램 서비스 근로자 브라우저 응용 프로그램 서버

  푸시 서버 푸시 서버는 브라우저 제조업체가 구현 한 서비스입니다. 응용 프로그램 서버에서 브라우저로 메시지를 전달해야합니다. 게임 데모 웹 푸시 알림

  를 사용하십시오 나는 게임을 사용하여 앱에 웹 푸시 알림을 추가하는 방법을 보여줍니다. 이 게임의 규칙은 월드 와이드 웹 얼라이언스와 인터넷 엔지니어링 태스크 포스에서 제공하는 여러 사양으로 정의됩니다.

  
  브라우저와 웹 애플리케이션 또는 이와 관련된 웹 애플리케이션 또는 서비스 작업자 간의 통신은 푸시 API 사양에 설명되어 있습니다.

  다양한 유형의 알림 및 알림 처리가 알림 API 사양에 설명되어 있습니다.
  응용 프로그램 서버와 푸시 서버 간의 통신은 웹 푸시 프로토콜 사양에 정의되어 있습니다.
  • 푸시 메시지 암호화 및 애플리케이션 서버 인증을 설명하는 몇 가지 추가 사양이있어 응용 프로그램 서버가 사용자에게 메시지를 보낼 수 있음을 증명할 수 있습니다.
  • 게임 라운드
  나는 게임을 4 라운드로 나누고 각 라운드의 개념과 목표를 설명합니다. 그런 다음 앱에서 각 턴을 구현하는 방법을 보여 드리겠습니다.
  • 1 라운드 : 서비스 작업자 등록 웹 푸시 알림을 사용하려면 서비스 작업자가 푸시 메시지를 처리해야하므로 첫 번째 라운드는 서비스 작업자를 등록하는 것입니다. 웹 응용 프로그램과 브라우저만이 라운드에 참여합니다. 이 라운드는 페이지가로드 될 때 발생합니다.
  웹 응용 프로그램은 서비스 작업자를 브라우저에 등록하라는 요청을 보냅니다.

  이 라운드를 구현하려면 다음 코드를 웹 애플리케이션에 추가해야합니다. 우선 브라우저가 서비스 작업자를 지원하는지 확인해야합니다. 그런 다음 브라우저가 웹 푸시 알림을 지원하는지 확인해야합니다. 브라우저 지원이 증가함에 따라이 두 확인을 추가하는 것이 항상 좋은 생각입니다.

  둘 다 지원되면 서비스 근로자에게 등록합니다. 이를 위해 Navigator.serviceWorker.register () 메소드를 호출하고 서비스 작업자 파일의 경로를 매개 변수로 전달합니다. 이 단계 후에 브라우저는 파일을 다운로드하여 서비스 작업자 환경에서 실행합니다. 서비스 작업자 파일은 표준 JavaScript 파일이지만 브라우저는 푸시를 포함한 서비스 작업자 API에 "액세스 할 수 있습니다".

  모든 것이 잘 진행되고 오류가 없으면 Register ()에 의해 반환 된 약속은 구문 분석됩니다. 어떤 유형의 오류가 발생하면, 약속이 거부되면, 우리는이 상황과 브라우저가 서비스 작업자를 지원하지 않는 상황을 처리해야합니다. register ()가 구문 분석되면 다음 턴에 사용될 ServiceWorkerRegation 객체를 반환합니다.

  if ('serviceWorker' in navigator) {
    if ('PushManager' in window) {
      navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
        // 状态初始化
      }).catch(function() {
        // 错误处理
      });
    } else {
      // 错误处理
    }
  } else {
    // 错误处理
  }

  (후속 라운드에 대한 지침은 코드 예제, 그림 및 설명을 포함하여 위에서 언급 한 것과 유사한 구조를 따릅니다. 모든 라운드에 대한 자세한 설명은 확장되지 않습니다 요약
  웹 푸시 알림 기술이 널리 사용될 준비가되었습니다. 시급하고 관련 알림을 제공하여 사용자와보다 효과적으로 통신하고 사용자를 참여시키는 데 도움이되며 일반적으로 웹 응용 프로그램이 더 좋을 수 있습니다.

  앱에서 사용해보십시오. Sencha CMD 6.5는 다음과 같은 진보적 인 웹 응용 프로그램 기능을 지원합니다. 홈 화면 배너에 추가하고 서비스 작업자 캐시를 사용하십시오. 자세한 내용은 Sencha CMD 문서를 읽거나 Sencha CMD를 포함한 115 개가 넘는 구성 요소 및 도구에 액세스 할 수있는 Sencha Ext JS의 무료 평가판을 다운로드하십시오.

  (FAQS 섹션은 비슷한 재 작성 및 연마가 필요하며 여기에서 확장되지 않습니다.)

위 내용은 웹 응용 프로그램에 대한 푸시 알림을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!