现代浏览器高级API

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

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");
  });
});


可以通过在事件监听函数中触发发送请求事件达到统计的目的。
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]总共会在元素刚进入可视区域、进入一半和完全进入这三个阶段都触发一次回调函数。
浏览器通知
你可能经常在使用某个网页的时候在浏览器上看到提示框，现在利用Notification接口我们自己也能够实现这样的功能。
主要分为两步：
检测权限
window.addEventListener("load", () => {
  document.getElementById("btnRequest").addEventListener("click", () => {
    Notification.requestPermission().then(() => {
 if (Notification.permission === “granted”) {
			// 发送通知
			sendNotifaction("hello world")
 }
    })
  })
})

发送通知
function sendNotification(text) {
    let notification = new Notification('Page Title', {
      icon: ‘../image.png’,
      body: text,
    });
    
	notification.onclick = function() {
      parent.focus();
      window.focus(); //just in case, older browsers
      evt.target.close();
      // do somthing
    };
    setTimeout(notification.close.bind(notification), 5000);
}

使用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);
   });
 });
      }
    })
  }
}

数据持久化
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);
});

浏览器存储状态检测
检测浏览器内存的功能可能不太常用，但如果你是开发移动端页面，对于内存比较小的设备来说，检测功能有时候就能够派上用场：
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: 8
Storage persistence: false
VM72:3 The remaining space: 244355911680
VM72: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属性我们就可以知道此时网络是否可用。
全屏显示页面
开发视频页面的时候，经常需要和全屏事件打交道，此时你可以借助浏览器自身的这个特性对其操作：
function enterFullscreen(ele) {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  }
  
  if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
  }
  
  if (ele.mozRequestFullscreen) {
    ele.mozRequestFullscreen();
  }
  
  if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
  }
} 

function exitFullscreen(ele) {
  if (ele.requestFullscreen) {
    ele.exitFullscreen();
  }
  
  if (ele.webkitExitFullscreen) {
    ele.webkitExitFullscreen();
  }
  
  if (ele.mozCancelFullscreen) {
    ele.mozCancelFullscreen();
  }
  
  if (ele.msExitFullscreen) {
    ele.msExitFullscreen();
  }
} 

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

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

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

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

自定义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;
}

参考资料
https://www.lynda.com/Javascript-tutorials/Javascript-Modern-Browser-APIs/784304-2.html
https://developer.mozilla.org/en-US/docs/Web/API/notification
https://hackernoon.com/why-and-how-to-implement-web-notification-api-4eb795c5b05d
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage
https://www.w3.org/TR/beacon
https://putsreq.com
https://css-tricks.com/the-css-paint-api/
https://storage.spec.whatwg.org

现代浏览器高级API

JavaScript相关栏目本月热门文章