WEB API 接口

说明

列举一些不常用的 Web API 接口

参考

1. 震动API (Vibration)

大多数现代移动设备包括振动硬件，允许通过接口触发设备震动，如果设备不支持则没有反馈

    // 单次震动，参数为代表震动时长的数字
    window.navigator.vibrate(200);
    // 多次震动，参数为交替震动和停止的时长的数组
    window.navigator.vibrate([200, 100, 300]); // 表示震动 200 ms ,停止 100ms 后再震动 300ms
    // 停止震动，设置参数为 0 或者 空白数组 即可取消震动
    window.navigator.vibrate([200, 100, 400, 100, 1000]);

    setTimeout(function () {
        window.navigator.vibrate(0);
    }, 400)

2. 通知API（Notifications）

允许网页或者应用程序在系统级别发送在页面外部显示的通知，这样即使应用程序空闲或者在后台，Web应用程序也会想用户发送信息

    // 查看用户是否允许通知，相同的域名只要获取一次权限，只有用户允许才能使用通知API
    console.log(Notification.permission); 
    /*
        default: 默认，未选择
        granted: 允许通知
        denied: 用户拒绝
    */

    // 向用户请求权限，当用户状态为 default 也就是没有选择是否接收的时候可以使用
    Notification.requestPermission().then(function (status) {
        if (status === 'granted') {
            console.log('允许通知');
        } else if (status === 'denied') {
            console.log('拒绝通知');
        }
    })

    // 向用户推送通知，需要有权限后才行
    const title = '通知标题';
    const options = {
        body: '通知的内容',
        tag: 'noti', // 代表通知的一个识别标签，相同tag时只会打开同一个通知窗口
        icon: 'https://xxx.png', // 通知图标 
        image: 'https://xxx.png', // 通知图像
        data: { // 关联与此通知的数据
            link: 'https://xxx.com'
        },
        requireInteraction: true // true 不自动关闭通知 false 自动关闭
    };
    const n = new Notification(title, options);

    n.addEventListener('show', function () { // 当通知被显示给用户时触发
        console.log('show');
    });
    n.addEventListener('click', function (e) { // 当用户点击通知时触发
        console.log('click');
        const link = e.currentTarget.data.link; // 得到 data 中数据
        window.open(link, '_blank');
    })
    n.addEventListener('close', function () { // 当通知被关闭时触发
        console.log('close');
    })
    n.addEventListener('error', function () { // 当通知发生错误的时候触发
        console.log('error');
    })

注意： Chrome 62 及以上版本，Notification API不支持 http；PC 尚可，移动端基本不支持

参考 HTML5 桌面通知：Notification API

3. 地理位置API（Geolocation）

允许通过应用程序提供当前浏览器所在位置，需要提前请求用户许可，最新版本的浏览器还要求网址是‘安全的’（https），否则不能获取地理位置信息

    // 判断是否可以使用
        if (!navigator.geolocation) {
        console.log('不支持定位');
    } else {
        console.log('支持定位');
        // 获取当前定位 getCurrentPosition, 返回的是一个低精度结果
        navigator.geolocation.getCurrentPosition(function (position) {
            console.log(position.coords);
            /*
                 coords: {
                     latitude: 纬度，
                     longitude: 经度，
                     altitude: 海拔高度,
                     accuracy: 精度
                 }
            */
        })
        // 监视定位，可以响应定位数据发生的变更，回调函数会被调用多次
        const successWatch = function (position) {
              console.log(position);
        }
        const errorWatch = function (err) {
              console.log(err);
        }
        const watchOptions = {
               enableHighAccuracy: true, // 是否要求高精度的地理位置信息
               maximumAge: 30000,  // 缓存的有效时间限制
               timeout: 27000 // 超时限制
        };
        const watchID = navigator.geolocation.watchPosition(successWatch, errorWatch, watchOptions);

        // 停止监听用户位置
        navigator.geolocation.clearWatch(watchID);
    }

注： 新版本的浏览器，出于安全考虑，在非 https 环境禁止使用

4. 全屏API（Fullscreen）

控制全屏显示，让一个 Element 节点占满整个屏幕，不同浏览器使用需要加上前缀

    const box = document.querySelector('#box');

    // 判断文档是否可以切换到全屏状态
    const fullscreenEnabled =
          document.fullscreenEnabled ||
          document.mozFullScreenEnabled ||
          document.webkitFullscreenEnabled ||
          document.msFullscreenEnabled;

    if (fullscreenEnabled) {
        box.onclick = function () {
          // 查找是否有处于全屏状态的节点
            const fullscreenElement =
                document.fullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement;

            if (!fullscreenElement) {
                launchFullscreen(box);
            } else {
                exitFullscreen();
            }

        }
    }
    // 使某一个节点全屏显示
    function launchFullscreen(element) {
        if(element.requestFullscreen) {
            element.requestFullscreen();
        } else if(element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if(element.msRequestFullscreen){
            element.msRequestFullscreen();
        } else if(element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();
        }
    }

    // 取消全屏
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    }

放大一个节点时，Firefox和Chrome在行为上略有不同, Firefox自动为该节点增加一条CSS规则，将该元素放大至全屏状态，width: 100%; height: 100%，而Chrome则是将该节点放在屏幕的中央，保持原来大小，其他部分变黑。为了让Chrome的行为与Firefox保持一致，可以自定义一条CSS规则。来源

    #box{
        width: 300px;
        height: 300px;
        border: 1px solid green;
        background: #969696;
        &:-webkit-full-screen{
            width: 100%;
            height: 100%;
        }
    }

注意：如下给 ‘flot’ 设置绝对定位后，如果使 ‘box’ 全屏显示，那么’flot’ 会被覆盖而显示不出

this is box

flot