수색…


소개

따라서 웹 앱 알림을 만들고 싶다면 웹 / 모바일 앱용 Push.js 또는 SoneSignal 프레임 워크를 사용하는 것이 좋습니다.

푸시는 Javascript 알림을 사용하여 실행하는 가장 빠른 방법입니다. 공식 사양에 새로 추가 된 Notification API를 사용하면 Chrome, Safari, Firefox 및 IE 9 이상과 같은 최신 브라우저에서 사용자의 데스크톱에 알림을 푸시 할 수 있습니다.

당신은 Socket.io와 일부 백엔드 프레임 워크를 사용해야 할 것입니다.이 예제에서는 user express를 사용할 것입니다.

매개 변수

모듈 / 프레임 워크 기술
node.js / express Node.js 응용 프로그램을위한 간단한 백 엔드 프레임 워크, 매우 사용하기 쉽고 강력 함
Socket.io Socket.IO는 실시간 양방향 이벤트 기반 통신을 가능하게합니다. 모든 플랫폼, 브라우저 또는 장치에서 작동하며 안정성과 속도에 똑같이 집중합니다.
Push.js 세계에서 가장 다양한 데스크탑 알림 프레임 워크
OneSignal Apple 기기의 푸시 알림 해제 양식
중포 기지 Firebase는 고품질의 앱을 신속하게 개발하고 비즈니스를 성장시키는 데 도움이되는 Google의 모바일 플랫폼입니다.

웹 알림

먼저 Push.js 모듈을 설치 해야 합니다.

$ npm install push.js --save

또는 CDN을 통해 프런트 엔드 앱으로 가져옵니다.

<script src="./push.min.js"></script> <!-- CDN link -->

당신이 그 일을 끝내면, 당신은 잘 가야합니다. 간단한 통지를하고 싶다면 다음과 같이해야합니다 :

Push.create('Hello World!')

앱으로 Socket.io 를 설정하는 방법을 알고 있다고 가정합니다. 다음은 익스프레스가 포함 된 백엔드 앱의 코드 예제입니다.

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  
  socket.emit('pushNotification', { success: true, msg: 'hello' });

});

서버가 모두 설정되면 프런트 엔드 작업으로 넘어갈 수 있습니다. 이제 Socket.io CDN을 가져 와서이 코드를 index.html 파일에 추가하면됩니다.

<script src="../socket.io.js"></script> <!-- CDN link -->
<script>
  var socket = io.connect('http://localhost');
  socket.on('pushNotification', function (data) {
    console.log(data);
    Push.create("Hello world!", {
        body: data.msg, //this should print "hello"
        icon: '/icon.png',
        timeout: 4000,
        onClick: function () {
            window.focus();
            this.close();
        }
    });
  });
</script>

이제 알림을 표시 할 수 있어야하며 모든 Android 기기에서 사용할 수 있습니다. Firebase 클라우드 메시징을 사용하려면이 모듈에서 사용할 수 있습니다. 다음 은 Nick (작성자가 작성한 예에 대한 링크입니다. Push.js의)

사과

Apple 기기에서는이 기능이 작동하지 않는다는 점에 유의하십시오 (단, 테스트하지는 않았지만). 푸시 알림을 원할 경우 OneSignal 플러그인을 확인하십시오.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow