自动监测接口变化并发送通知

之前有网友提出，想要用代码监控一个接口，定时访问它，如果接口返回值发生某些变化就提醒用户。

于是，我写了个简单的脚本。

脚本编写时，考虑的是放在目标网站的控制台来执行。之所以这样做，是因为如果放在页面外部执行，往往需要补环境，费时费力。

核心代码

// 变量声明&定时器
let _timer = null;
let _subjects = [];
_timer = setInterval(() => {
    getData()
}, 60000);

// 接口访问
function getData () {
    return fetch("https://mail.126.com/xxxx", {
        "xxx": {},
      }).then((res) => {
        res.text().then((str) => {
            str = (str || '').replace(/\n/g, '')
            let subjects = str.match(/('subject':'.*?',)/g)
            if (_subjects.length === 0) {
                _subjects = subjects
            } else if (subjects[0] !== _subjects[0]) {
                notificationHandler();
            }
        })
    }).catch(err => {
        console.log('err:', err)
    });
}

// 发送通知
function notificationHandler () {
    let notification;
    if (window.Notification && Notification.permission === 'granted') {
        notification = new Notification('收到新邮件啦', {
            dir: 'ltr',
            body: `收到新邮件啦，快去看看吧`
        });
    } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(function(permission) {
            if (permission === 'granted') {
                notification = new Notification('收到新邮件啦', {
                    dir: 'ltr',
                    body: `收到新邮件啦，快去看看吧`
                });
            }
        });
    }
    if (notification) {
        notification.onclick = () => {
            window.focus();
        };
    }
}

上述代码中的相关逻辑是以邮箱收件箱为例。

将代码放到控制台执行后，每隔1分钟访问一次接口，当响应内容有变化时，会向用户发送系统通知；当用户点击通知面板时，系统就会将焦点给到受监控的网页，方便用户对网页进行查看。

注意事项

1）要求浏览器支持Notification这个API，这个API对应的就是系统右下角的通知功能，目前主流浏览器都是支持的。

2）在控制台运行代码前，需要用户已经授权浏览器可以使用Notification权限，如果不知道是否允许，可以在控制台执行代码：

Notification.requestPermission().then(function(permission) {console.log(permission)})

返回值为 granted 说明是已授权的；

如果不是，那么浏览器会弹出提示询问我们是否允许；

如果权限是denied，而且看不到弹窗，那么可以重启浏览器再做尝试。