【金秋打卡】第22天 从函数到函数式编程之路
标签:
JavaScript
课程名称:破解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,例如是否在线、是否允许位置获取、投屏等。对自己说一句,加油😀~
坚持打卡,坚持学习!明天见💪~
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦