개시하다

Web Notifications는 브라우저에서 알림 기능을 수행하는 데 사용되는 사양입니다.
이번에 이거 한번 해봤어요.

웹 서버(nginx)

어쨌든 웹 서버가 필요하기 때문에 설치합니다.
맥북에는 애초부터 아파치가 있었지만 쓰고 싶지 않아 따로 설치해야 했다.
내 맥북에 Docker for Mac가 설치되어 있어서 간단하게 만들 수 있다.
다음 명령을 사용하여nginx의 용기를 만듭니다.

$ docker run -d -p 80:80 --name webserver nginx
Unable to find image 'nginx:latest' locally
latest: Pulling from library/nginx
6d827a3ef358: Pull complete 
b556b18c7952: Pull complete 
03558b976e24: Pull complete 
9abee7e1ef9d: Pull complete 
Digest: sha256:52f84ace6ea43f2f58937e5f9fc562e99ad6876e82b99d171916c1ece587c188
Status: Downloaded newer image for nginx:latest
e2fdc7b02c011813ae1f64e6b0ac7d6904908543e5210d4962a51ebb8772b34f
$

방문 후 Welcome 화면이 표시되면 OK.

다만, 이렇게 되면 문서 처리가 매우 번거롭다
docker의 Volume 기능을 사용하여 호스트의 디렉토리
nginx의 Doctument Root에 설치합니다.
4

용기를 멈추면 삭제합니다

$ docker stop webserver
webserver
$ docker rm webserver
webserver
$ 

Volume이 컨테이너를 다시 시작하도록 지정합니다.(현재 Doctoment Root으로 지정)

$ docker run -d -p 80:80 -v $PWD:/usr/share/nginx/html --name webserver nginx
78d4d793320f5659bd1b038a067e865a913a04f015a7bd30fd9cdce2c2f53157
$

현재 적합한 index.제작하여 브라우저에서 확인합니다
다음부터는 다음 명령을 사용하여 시작/중지합니다.

$ docker start webserver
webserver
$ docker stop webserver
webserver
$

알림 - Notifications API

Notifications API라는 Javascript API를 사용하도록 공지합니다.
Notifications API에 알림을 표시하려면 먼저 사용자의 허가를 받아야 합니다.
허락하지 않으면 당연히 통지를 표시하지 않을 것이다.

알림 표시 허용

Notification.RequestPermission()을 호출하면 위 대화 상자가 표시됩니다.
이미 허가/거절한 경우 대화상자가 표시되지 않고 즉시 호출을 호출하기 때문에 현재 상태에 신경 쓰지 않아도 됩니다. 호출도 괜찮습니다.
javascript

  // ブラウザが通知をサポートしているか確認する
  if (!('Notification' in window)) {
    alert('未対応のブラウザです');
  }
  else {
    // 許可を求める
    Notification.requestPermission()
      .then((permission) => {
        if (permission == 'granted') {
          // 許可
        } else if (permission == 'denied') {
          // 拒否
        } else if (permission == 'default') {
          // 無視
        }
      });
  }

일단 수락하거나 거부하면 브라우저에서 설정을 복원하지 않으면 대화상자를 다시 표시할 수 없습니다.
Chrome의 경우 주소 표시줄 왼쪽에 있는 빨간색 원을 클릭하면 알림 설정을 변경할 수 있습니다.

알림 표시

통지에는 각양각색의 내용이 포함될 수 있다.
아래 기재의 일부분.
항목
설명
title
알림 창의 위쪽에 표시됩니다.
body
알림 본문에 제목 아래에 표시됩니다.
icon
알림에 표시되는 아이콘의 URL입니다.
tag
통지 표식.같은 탭을 지정하면 알림이 바뀝니다.
data
알림과 연관된 모든 데이터.
타이틀을 제외하고는 모두 옵션입니다.
알림을 표시하는 것은 매우 간단합니다. 제목과 옵션을 지정해서 Notification 실례를 생성하기만 하면 됩니다.
javascript

    var n = new Notification(
      title,
      {
        body: '本文です',
        icon: 'img/xxx.png',
        tag: '',
        data: {
          xxx: '任意のデータ'
        }
      }
    );

각양각색의 브라우저로 표시해 보았지만, 조금씩 다르다.
행을 바꾸거나 아이콘을 표시하지 않을 수 없습니다.(^^;
■ Chrome

■ Firefox

■ Safari

■ Edge

■ Vivaldi

시간을 지정하다

브라우저
제목 없음
있다
Chrome
최대 3개, 1개를 닫으면 다음 알림을 표시합니다
만약 같은 태그를 지정했다면 통지는 잘 바뀌었을 것이다.
Firefox
알림 후에 계속 표시됩니다.Mac는 겹쳐서 보이기 때문에 하나만 보일 것 같습니다.Windows가 잘 표시됩니다.
만약 같은 태그를 지정했다면 통지는 잘 바뀌었을 것이다.
Safari
알림 후에 계속 표시됩니다.Mac는 겹쳐서 보이기 때문에 하나만 보일 것 같습니다.
만약 같은 태그를 지정했다면 통지는 잘 바뀌었을 것이다.
Edge
하나를 닫으면 다음 알림이 표시됩니다.
없는 동작과 같은 동작을 했다.
Vivaldi
알림 후에 계속 표시됩니다.Mac는 겹쳐서 보이기 때문에 하나만 보일 것 같습니다.Windows가 잘 표시됩니다.
tag를 지정하면 두 번째로 표시되지 않습니다.

알림 닫기

표시된 알림이 조금(4초 정도) 지나면 자동으로 꺼지지만, 동작이 다른 브라우저가 있어 요약해봤다.
브라우저
자동 종료 전 초
Chrome
20초
Firefox
4초
Safari
4초
Edge
6초
Vivaldi
4초 Windows 버전은 20초입니다.
아래의 사이트에는 좋은 정보가 있습니다.
https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications
Firefox와 Safari는 조금(4초 정도)이 지나면 자동으로 알림을 닫습니다.이것도 운영체제 단계에서 진행된다.다른 한편, 크롬 등 동작이 다른 브라우저가 있다.Notification은 이전 함수 끝에서 알림을 닫아서 모든 브라우저가 4초 후에 알림을 닫는지 확인합니다.close 함수를 포함하는 setTimeout () 함수를 놓습니다.bind () 를 사용하여 close () 를 알림과 연결해서 호출하는 것을 주의하십시오.
알림 표시된 코드에 4초 후 자동으로 닫히는 처리를 추가합니다.
javascript

    var n = new Notification(
      title,
      {
        body: '本文です',
        icon: 'img/xxx.png',
        tag: '',
        data: {
          xxx: '任意のデータ'
        }
      }
    );
    // 確実に通知を閉じる
    setTimeout(n.close.bind(n), 5000);

총결산

쉽게 실현할 수 있기 때문에 기회가 된다면 한번 써보고 싶어요.
다만, 과도하게 사용하지 않도록 주의해야 한다.