【Web技术】669- 现代浏览器高级API

随着技术的不断革新，现代浏览器提供了很多高级的功能用来满足开发者的需要。这些新的API在程序员的”红宝书“里未必能见到它们的身影，不过仍需要提前了解以备不时之需。

1 Beacon API

Beacon API可以向服务器发送少量的数据以实现统计等目的。同时它的性能比我们平常使用Ajax发送请求更好。当你需要发送数据但不要求有返回值的时候，都可以使用这个API。所有的数据都是在空闲时间发送的。

比如下面这个例子：

const beaconURL = "https://example.com"

function sendEvent(strEvent) {
// 由于这个API还处于实验阶段，为了照顾低版本浏览器需要进行功能检测处理。
  if (navigator.sendBeacon) {
    navigator.sendBeacon();
  }
}

window.addEventListener('load',function(e) {
  sendEvent("loadEvent");
  document.getElementById("btn1").addEventListener("click",function(){
    sendEvent("Button 1 click");
  });
});

可以通过在事件监听函数中触发发送请求事件达到统计的目的。

2 IntersectionObserver API

IntersectionObserver API是用来监视某个元素是否进入了浏览器的可视区域。因此，可以利用这个特性达到延迟加载的目的：

window.addEventListener("load", function () {
  const observer = new IntersectionObserver(function (entries) {
    console.log(entries);
  }, {
    "threshold": [0, 0.5, 1.0]
  });
});

其中threshold表示触发回调函数的临界值。比如0.5表示在可视区域内能看到一半元素的时候触发一次。因此上面的例子中[0, 0.5, 1.0]总共会在元素刚进入可视区域、进入一半和完全进入这三个阶段都触发一次回调函数。

3 浏览器通知

你可能经常在使用某个网页的时候在浏览器上看到提示框，现在利用Notification接口我们自己也能够实现这样的功能。

主要分为两步：

1).检测权限

window.addEventListener("load", () => {
  document.getElementById("btnRequest").addEventListener("click",()=>{
    Notification.requestPermission().then(() => {
       if(Notification.permission==="granted") {
   // 发送通知
   sendNotifaction("欢迎关注前端人")
       }
    })
  })
})

2).发送通知

function sendNotification(text) {
    let notification = new Notification('页面标题', {
      icon: "../image.png",
      body: text,
    });
 notification.onclick = function(evt) {
      parent.focus();
      window.focus();
      evt.target.close();
    };
   let timeObj=setTimeout(()=>{
        notification.close.bind(notification);
        clearTimeout(timeObj)
    }, 5000);
}

4使用CacheStorage API进行缓存数据

CacheStorageAPI是官方提供的另外一种用来存储数据的接口，具体定义可以参考MDN上面：

CacheStorage 接口表示 Cache 对象的存储。它提供了一个 ServiceWorker 、其它类型worker或者window 范围内可以访问到的所有命名cache的主目录（它并不是一定要和service workers一起使用，即使它是在service workers规范中定义的），并维护一份字符串名称到相应 Cache 对象的映射。

这个API使用起来也比较简单：

function getJSONData(url) {
  if ('cache' in window) {
    window.caches.open('my-data-cache').then(function(cache) {
      if (result === undefined) {
        fetch(url).then(function (result) {
          let clonedresp = result.clone();
         // 将数据存储到浏览器中去：
          cache.put(url, result);
          result.text().then(function(data) {
            console.log(data);
          });
        });
      }
    })
  }
}

5数据持久化

IndexedDB是异步的，可以让web保持响应，而不是像localStorage一样阻塞页面。同时它还可以存储多种类型数据，很容易分为多个独立的实例进行存储。

const instance1, instance2;
document.getElementById("btnMulti").addEventListener("click", function () {
  instance1 = localforage.createInstance({
    "name": "instance1"
  });
  instance2 = localforage.createInstance({
    "name": "instance2"
  });
});

document.getElementById("btnStore").addEventListener("click", function () {
  instance1.setItem("key1", "value1");
  instance2.setItem("key1", "value2");
});

不过使用IndexedDB是复杂的，可以借助第三方库localForage来简化代码操作：

npm install localforage安装完成后，可以在代码里这样应用：

localforage.getItem("test").then(value => {
    console.log(value);
}).catch(err => {
    console.log(err)
});

localforage.setItem("test", "some value").then(value => {
    console.log(value);
}).catch(err => {
    console.log(err);
});

6浏览器存储状态检测

检测浏览器内存的功能可能不太常用，但如果你是开发移动端页面，对于内存比较小的设备来说，检测功能有时候就能够派上用场：

window.addEventListener("load", () => {
  if (navigator.storage && navigator.storage.estimate) {
      navigator.storage.estimate().then(estimate => {
      console.log("The remaining space: " + estimate.quota);
      console.log("Space used:" + estimate.usage);
    });
  }
  // 检测应用数据是否是持久化的
  if (navigator.storage && navigator.storage.persisted) {
    navigator.storage.persisted().then(persisted => {
      console.log("Storage persistence: " + persisted);
    });
  }
  if (navigator.deviceMemory) {
    console.log("The device memory is: " + navigator.deviceMemory);
  }
})

最终执行结果如下：

The device memory is: 8Storage persistence: falseVM72:3 The remaining space: 244355911680VM72:4 Space used:0

识别网络状态和质量

有时候我们要根据网络状态来采取不同的业务处理，如离线加载等，这就需要能够检测到浏览器中网络连接情况。要实现这个需求，可以借助window.navigator对象：

const isOnline = window.navigator.onLine;
if (window.navigator.conneciton) {
 const connection = navigator.connection;
   console.log(connection);
}

这是个只读对象，其中提供了很多很浏览器特性相关的属性，利用connection这个属性就可以检测到浏览器连接状态。

downlink: 1.05

effectiveType: "3g"

onchange: null

rtt: 300

saveData: false

而借助onLine属性我们就可以知道此时网络是否可用。

7全屏显示页面

开发视频页面的时候，经常需要和全屏事件打交道，此时你可以借助浏览器自身的这个特性对其操作：

function enterFullscreen(ele) {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  }
} 

function exitFullscreen(ele) {
  if (ele.requestFullscreen) {
    ele.exitFullscreen();
  }
} 

8:full-screen

样式方面，和操作滚动条样式类似，对应的浏览器也提供了:full-screen这样的伪元素选择器：

:full-screen button {
  background: red;
}

:-webkit-full-screen button {
  background: red;
}

:-moz-full-screen button {
  background: red;
}

:-ms-fullscreen button {
  backgorund: red;
}

9自定义CSS

CSS Houdini是现代CSS提供的一个高级API,由于开放了底层接口，我们借助它实现一些更加高级的特性。

比如接下来这个例子，我将实现一个自定义的属性samplepainter。

新建一个叫做csspaint_start.js的文件：

if (typeof registerPaint !== "undefined") {
  class SampleCSSPaint {
    static get inputProperties() {
      return ['--cross-thickness', '--cross-color']
    }
    
    paint(ctx, size, props) {
      let width = props.get('--cross-thickness');
      let color = props.get('--cross-color').toString();
      
      ctx.lineWidth = width;
      ctx.strokeStyle = color;
       
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.lineTo(size.width, size.height);
      ctx.stroke();

      ctx.beginPath();

      ctx.stroke();
    }
  }
    
  registerPaint('samplepainter', SampleCSSPaint);
}

然后将我们刚才写好的模块注册到启动脚本main.js中去：

window.addEventListener("load", function () {
  // 检测浏览器是否支持paintWorklet
  if ('paintWorklet' in CSS) {
    console.log("paintWorklet supported")
    CSS.paintWorklet.addModule("csspaint_start.js");
  } else {
    console.log("paintWorklet not supported")
  }
});

接着我们就可以在css中使用自定义的属性进行操作了：

#demo {
  background-image: paint(samplepainter);
  --cross-thickness: 2;
  --cross-color: red;
}