【金秋打卡】第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，例如是否在线、是否允许位置获取、投屏等。对自己说一句，加油😀~

坚持打卡，坚持学习！明天见💪~
​
​

​