手记

【金秋打卡】第22天 从函数到函数式编程之路

课程名称:破解JavaScript高级玩法
课程章节:第8章 被我们忽视的BOM
主讲老师:Cloud

课程内容:

今天学习的内容包括:
8-4 navigator, 可不止步于设备识别——navigator中各种属性和API详解。

课程收获:

本节知识一览
  • userAgent:当前浏览器的用户代理字符串
  • onLine:网络在线状态
  • clipboard:返回剪切板对象
  • cookieEnabled:检查是否启用cookie
  • mediaDevices:获取媒体信息设备
  • serviceWorker:返回关联文件的ServiceWorkerContainer对象
  • storage:返回StorageManager对象,用于访问浏览器的整体存储能力
  • sendBeacon:可靠的数据上传
  • mediaSession:返回MediaSession对象,共享媒体信息
  • connection:设备网络信息
  • permissions:返回权限对象
navigator.userAgent 妙用
  • 获取userAgent:window.navigator.userAgent // ‘Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36’
  • 识别是否是微信内置浏览器:
function isWx(){
	var ua = window.navigator.userAgent.toLowerCase()
	return ua.match(/MicroMessenger/i) === "micromessenger"
}
navigator.userAgent 妙用
  • 解析 userAgent :ua-parser-js
navigator.onLine(在线状态)
  • 定义:返回浏览器的在线状态,ture || false
  • 使用:结合document.ononline 与 document.onoffline 网络变化
navigator.clipboard(剪切板)
  • 定义:返回剪切板对象
  • 注意:必须是安全上下文(local,https,wss)
  • 注意:window.isSecureContext 检测安全上下文
navigator.cookieEnabled(cookie)
  • 定义:返回当前页面是否启用了cookie
navigator.serviceWorker(Service Worker)
  • 定义:返回关联文件的ServiceWorkerContainer 对象,提供对 ServiceWorker的注册,删除,升级和通信访问
  • 注意:只能在安全上下文使用
Service Worker应用场景
  • 后台数据同步
  • 集中处理计算成本高的数据更新
  • 性能增强,用于预获取用户需要的资源
判断是否支持-navigator.serviceWorker
if("serviceWorker" in navigator){
	// Supported
}
navigator.mediaDevices (媒体设备)
  • 定义:返回一个MdeiaDevices对象,用户获取媒体信息设备。
  • 应用场景:H5调用摄像头识别二维码,共享屏幕等
navigator.storage (存储)
  • 定义:返回StorageManager 对象,用于访问浏览器的整体存储能力。
  • 注意:必须安全上下文
  • 应用:获取storage 的存储大小以及可分配大小
navigator.mediaDevices (媒体设备)
  • 定义:返回一个MdeiaDevices对象,用户获取媒体信息设备。
  • 应用场景:H5调用摄像头识别二维码,共享屏幕等
navigator.storage (存储)
  • 定义:返回StorageManager 对象,用于访问浏览器的整体存储能力。
  • 注意:必须安全上下文
  • 应用:获取storage 的存储大小以及可分配大小
navigator.storage.estimate().then(function(estimate){
    console.log("总量:",estimate.quota);
    console.log("使用:",estimate.usage);
})
navigator.sendBeacon (上报数据)
  • 作用:通过httpPost 将少量的数据异步传输到web服务器。
  • 应用:它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题
navigator.connection(网络信息)-实验
  • 定义:返回一个 NetworkInformation 对象,该对象包含网络信息
  • 应用:获取当前用户的宽带信息,如网络类型,下载速度等
navigator.mediaSession(共享媒体信息)-实验
  • 定义:返回一个MediaSeeion对象,用来与浏览器共享媒体信息。比如播放状态,标题,封面等
  • 应用: 通知栏自定义媒体信息
navigator.permissions(权限对象)-实验
  • 定义:返回一个Permissions 对象
  • 应用:获取权限信息

今天 学习了 navigator, 可不止步于设备识别。了解到了navigator的各种API,例如是否在线、是否允许位置获取、投屏等。对自己说一句,加油😀~

坚持打卡,坚持学习!明天见💪~


0人推荐
随时随地看视频
慕课网APP