웹 알림 API를 사용하여 동적 메시지를 표시합니다

웹 알림 API : 브라우저 제한에서 웹 사이트 알림을 만듭니다 우리는 좋아하는 웹 사이트 나 애플리케이션에서 모바일 알림에 익숙하지만 이제 브라우저가 알림을 직접 푸시하는 것이 더 일반적입니다. 예를 들어, Facebook은 새로운 친구 요청이 있거나 귀하가 참여하는 게시물에 대한 의견을 보내면 언급 된 대화에서 알림을 보냅니다.

프론트 엔드 개발자로서, 브라우저 알림을 사용하여 많은 정보 흐름을 처리하지 않는 웹 사이트에 서비스를 제공하는 방법이 궁금합니다. 웹 사이트에 대한 방문자의 관심을 기반으로 관련 브라우저 알림을 추가하는 방법은 무엇입니까?

이 기사에서는 새로운 버전의 프레임 워크가 출시 될 때마다 방문자에게 경고하기 위해 간결한 CSS 웹 사이트에서 알림 시스템을 구현하는 방법을 보여줍니다. LocalStorage 및 Browser Notification API를 사용하여이를 달성하는 방법을 보여 드리겠습니다.

알림 API 기본 사항 우선, 방문자의 브라우저가 알림을 지원하는지 여부를 결정해야합니다. 이 튜토리얼의 대부분의 작업은 알림 개체에 의해 수행됩니다.

현재 브라우저가 알림을 지원하는지 여부 만 결정합니다. 확인 후 방문자에게 권한 요청을 표시 할 수 있는지 알아야합니다.

우리는 권한 속성의 출력을 변수에 저장합니다. 허가가 부여되거나 거부되면 아무것도 반환되지 않습니다. 이전에 권한을 요청하지 않은 경우, 우리는 RequestPermission 메소드를 사용하여 권한을 요청합니다.

브라우저의 위 이미지와 유사한 프롬프트가 표시됩니다.

이제 권한을 요청 했으므로 권한이 허용되면 알림이 표시되도록 코드를 수정하겠습니다.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

간단하지만 효과적인 기능이 있습니다.

우리는 여기에서 requestPermission () 메소드의 약속 기반 구문을 사용하여 권한이 부여 된 후 알림을 표시합니다. 알림 생성자를 사용하여 알림을 표시합니다. 이 생성자는 알림 제목에 대한 두 가지 인수와 다른 하나는 옵션을 사용합니다. 전달할 수있는 전체 옵션 목록은 문서 링크를 참조하십시오.

스토리지 프레임 워크 버전 위에서 언급 한 는 LocalStorage를 사용하여 알림 표시를 돕습니다. LocalStorage 사용은 영구 클라이언트 정보를 JavaScript에 저장하는 권장 방법입니다. 현재 버전의 프레임 워크 (예 : 1.0.0)를 포함하는 ConciseVersion이라는 로컬 스터리지 키를 만들 것입니다. 그런 다음이 키를 사용하여 새 버전의 프레임 워크를 확인할 수 있습니다.

최신 버전의 프레임 워크를 사용하여 ConciseVersion 키의 값을 업데이트하는 방법은 무엇입니까? 누군가가 웹 사이트를 방문 할 때 현재 버전을 설정하는 방법이 필요합니다. 또한 새 버전이 해제되면 값을 업데이트해야합니다. ConciseVersion 값이 변경 될 때마다 새로운 버전의 프레임 워크를 발표하기 위해 방문자에게 알림을 표시해야합니다.

우리는 페이지에 숨겨진 요소를 추가 하여이 문제를 해결합니다. 이 요소에는 JS-CurrentVersion이라는 클래스가 있으며 프레임 워크의 현재 버전 만 포함됩니다. 이 요소는 DOM에 존재하므로 JavaScript를 사용하여 쉽게 상호 작용할 수 있습니다.

이 숨겨진 요소는 Framework 버전을 ConciseVersion 키에 저장하는 데 사용됩니다. 또한 새 버전의 프레임 워크가 게시 될 때이 요소를 사용하여 키를 업데이트합니다.

우리는 소량의 CSS를 사용 하여이 요소를 숨길 수 있습니다.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

참고 :이 요소에는 의미있는 것이 포함되어 있지 않기 때문에 스크린 리더는이 요소에 액세스 할 필요가 없습니다. 그렇기 때문에 Aria-Hidden 속성을 True로 설정하고 디스플레이를 사용합니다. 요소를 숨기는 방법으로 없음. 숨겨진 컨텐츠에 대한 자세한 내용은이 Webaim 기사를 참조하십시오.

이제 우리는이 요소를 얻고 JavaScript로 상호 작용할 수 있습니다. 방금 만든 숨겨진 요소 내부의 텍스트를 반환하려면 함수를 작성해야합니다.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

이 기능은 텍스트 콘텐츠 속성을 사용하여 .js-currentversion 요소의 내용을 저장합니다. ConciseVersion LocalStorage 키의 내용을 저장하기 위해 다른 변수를 추가해 봅시다.

이제 변수에 최신 버전의 프레임 워크가 있으며 LocalStorage 키를 변수에 저장합니다. 사용 가능한 새로운 버전의 프레임 워크가 있는지 확인하기 위해 논리를 추가해야합니다.

먼저 ConciseVersion 키가 존재하는지 확인합니다. 존재하지 않으면 첫 방문이 될 수 있으므로 사용자에게 알림을 표시합니다. 키가 존재하면 값 (CurrentVersion 변수에 저장)이 현재 버전의 값 (최신 버전 변수에 저장)보다 큰지 확인합니다. 프레임 워크의 최신 버전이 방문자가 본 마지막 버전보다 크면 새 버전이 출시되었음을 알고 있습니다.

참고 : Semver-Compare 라이브러리를 사용하여 두 버전 문자열 비교를 처리합니다.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification
      .requestPermission()
      .then(function() {
        var notification = new Notification("Hello, world!");
      });
  }
})();

이 사실을 알면 방문자에게 알림을 표시하고 컨 컨트리 버전 키를 적절하게 업데이트 할 것입니다.

<span class="js-currentVersion" aria-hidden="true">3.4.0</span>

이 기능을 사용하려면 다음 권한 코드를 수정해야합니다.

이를 통해 사용자가 권한을 부여했거나 권한을 부여한 경우 알림을 표시 할 수 있습니다.

표시 알림

지금까지, 우리는 정보가 많이 포함되지 않은 간단한 알림 만 보여주었습니다. 브라우저 알림을 동적으로 만들고 알림의 다양한 측면을 제어 할 수있는 함수를 작성해 봅시다.

이 기능에는 신체 텍스트, 아이콘, 제목 및 선택적 링크 및 알림 기간에 대한 매개 변수가 있습니다. 내부적으로, 우리는 알림 신체 텍스트와 아이콘을 저장하는 옵션 객체를 만듭니다. 또한 알림 제목과 옵션 객체를 전달하는 알림 객체의 새 인스턴스를 만듭니다.

다음, 알림에 링크하려면 onclick 핸들러를 추가합니다. Settimeout ()을 사용하여 지정된 시간 후에 알림을 끄십시오. 이 함수가 호출 될 때 시간이 지정되지 않은 경우 기본 5 초가 사용됩니다.

(function() {
  if ("Notification" in window) {
    // 代码在此处
  }
})();

이제, 더 많은 정보에 대한 알림을 사용자에게 표시하려면 Checkversion ()을 수정합시다.

우리는 displayNotification 함수를 사용하여 설명, 이미지, 제목 및 알림에 대한 링크를 제공합니다.

(function() {
  if ("Notification" in window) {
    var permission = Notification.permission;

    if (permission === "denied" || permission === "granted") {
      return;
    }

    Notification.requestPermission();
  }
})();

참고 : ES6 템플릿 리터럴을 사용하여 텍스트에 표현을 포함시킵니다.

전체 코드 및 테스트 다음은이 튜토리얼에 작성된 완전한 코드입니다.

(CodePen 링크 또는 전체 코드 블록을 여기에 삽입해야합니다)

이 코드를 실행하면 브라우저에서 다음 알림을 생성해야합니다.

테스트를 수행하려면 브라우저의 알림 권한에 익숙해야합니다. 다음은 Chrome, Safari, Firefox 및 Microsoft Edge에서 알림 관리에 대한 빠른 참조입니다. 또한 개발자 콘솔을 사용하여 쉬운 테스트를 위해 LocalStorage 값을 삭제하고 수정하는 데 익숙해야합니다.

스크립트를 한 번 실행하고 JS-CurrentVersion HTML 요소의 값을 스크립트로 변경하여 차이를 확인하여 예제를 테스트 할 수 있습니다. 동일한 버전으로 다시 실행하여 불필요한 알림을받지 않음을 확인할 수도 있습니다.

한 걸음 더 나아가

이것은 동적 브라우저 알림이 필요한 모든 것입니다! 보다 유연한 브라우저 알림을 찾고 있다면 Service Worker API를 이해하는 것이 좋습니다. Service Worker는 푸시 알림에 응답하는 데 사용될 수 있으므로 사용자는 현재 웹 사이트를 방문하는지 여부에 관계없이 알림을받을 수 있으므로보다시기 적절한 업데이트가 가능합니다.

브라우저 알림 API FAQ

브라우저 알림 API는 무엇이며 어떻게 작동합니까?

브라우저 알림 API를 사용하면 웹 애플리케이션이 사용자에게 시스템 알림을 표시 할 수 있습니다. 이러한 알림은 모바일 장치에 대한 푸시 알림과 유사하며 웹 페이지에 초점을 맞추지 않더라도 표시 할 수 있습니다. API는 알림을 표시하도록 사용자 권한을 요청하여 작동합니다. 허가가 얻어지면 웹 응용 프로그램은 알림 개체를 사용하여 알림을 작성하고 표시 할 수 있습니다.

표시 권한을 표시 할 알림을 요청하는 방법은 무엇입니까? 권한을 요청하려면 altification.requestPermission () 메소드를 사용할 수 있습니다. 이 방법은 사용자에게 알림을 표시 할 수 있는지 묻는 대화 상자를 보여줍니다. 이 방법은 약속을 반환하여 권한 상태로 해결되며, 이는 "부여", "거부"또는 "기본값"을받을 수 있습니다.

알림을 작성하고 표시하는 방법은 무엇입니까?

일단 허가가 얻어지면 알림 생성자를 사용하여 알림을 작성하고 표시 할 수 있습니다. 이 생성자는 두 가지 매개 변수, 즉 알림 제목과 옵션 객체를 수용합니다. 옵션 객체에는 본문 (알림 텍스트), 아이콘 (표시 할 아이콘) 및 태그 (알림의 식별자)와 같은 속성이 포함될 수 있습니다.

웹 페이지에 초점이 맞지 않더라도 알림을 표시 할 수 있습니까?

예, 브라우저 알림 API를 사용하면 웹 페이지에 초점이 맞지 않더라도 알림을 표시 할 수 있습니다. 이는 응용 프로그램을 적극적으로 사용하지 않더라도 중요한 이벤트를 사용자에게 알리는 웹 애플리케이션에 매우 유용합니다.

알림에 대한 클릭 이벤트를 처리하는 방법은 무엇입니까?

알림 객체에 이벤트 리스너를 추가하여 알림에 대한 클릭 이벤트를 처리 할 수 ​​있습니다. 사용자가 알림을 클릭하면 이벤트 리스너 기능이 호출됩니다.

프로그래밍 방식으로 알림을 끄질 수 있습니까?

예, 알림 개체에서 Close () 메소드를 호출하여 프로그래밍 방식으로 알림을 사용할 수 있습니다. 이것은 잠시 후 알림을 자동으로 끄려면 유용합니다.

모든 브라우저가 브라우저 알림을 지원합니까?

대부분의 최신 브라우저는 Chrome, Firefox, Safari 및 Edge를 포함한 브라우저 알림을 지원합니다. 그러나 지원은 이러한 브라우저의 다양한 버전마다 다를 수 있으며 일부 이전 브라우저는 알림을 전혀 지원하지 않을 수 있습니다.

알림 모양을 사용자 정의 할 수 있습니까?

알림의 모양은 운영 체제 및 브라우저에 크게 의존합니다. 그러나 제목, 본문 및 아이콘과 같은 알림 생성자에게 전달 된 옵션 개체를 사용하여 알림의 특정 측면을 사용자 정의 할 수 있습니다.

사용자가 알림 표시 권한을 부여했는지 확인하는 방법은 무엇입니까?

알림에 액세스하여 현재 권한 상태를 확인할 수 있습니다. 이 속성은 사용자가 권한을 거부 한 경우 "거부 된"경우 "부여"및 권한 요청에 응답하지 않은 경우 "기본값"입니다.

내 작업자 스크립트에서 브라우저 알림 API를 사용할 수 있습니까?

예, 브라우저 알림 API는 작업자 스크립트에서 사용할 수 있습니다. 이를 통해 메인 페이지에 초점이 맞지 않더라도 백그라운드 작업에서 알림을 표시 할 수 있습니다.

위 내용은 웹 알림 API를 사용하여 동적 메시지를 표시합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!