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

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

코어 포인트 :

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

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

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

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

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

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

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

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

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

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

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

  <code class="language-javascript">if ('serviceWorker' in navigator) {
    if ('PushManager' in window) {
      navigator.serviceWorker.register('ServiceWorker.js').then(function(registration) {
        // 状态初始化
      }).catch(function() {
        // 错误处理
      });
    } else {
      // 错误处理
    }
  } else {
    // 错误处理
  }</code>

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

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

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

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