Joyber 的博客 - html
type: channel
link: https://blog.qqvbc.com/tag/html/
items: H5页面实现桌面通知（Notification）的知识点笔记
items: 隐藏/不显示 video 标签的下载按钮 controlslist="nodownload" (html5实验性功能)

H5页面实现桌面通知（Notification）的知识点笔记
type: item
date: 2021-07-15T11:52:00+08:00
description: 网站必须是https协议访问才有桌面通知的权限，http直接返回denied，并且移动端全面未支持桌面通知 参数说明（摘自张鑫旭老师的博客）：https://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/comment-page-2/#comment-414810dir 默认值是auto, 可以是ltr或rtl，有点类似direction属性。表示提示主体内容的水平书写顺序。lang 提示的语言。body 提示主体内容。字符串。会在标题的下面显示tag 字符串。标记当前通知的标签。icon 字符串。通知面板左侧那个图标地址。data 任意类型和通知相关联的数据。vibrate 通知显示时候，设备震动硬件需要的振动模式。所谓振动模式，指的是一个描述交替时间的数组，分别表示振动和不振动的毫秒数，一直交替下去。例如[200, 100, 200]表示设备振动200毫秒，然后停止100毫秒，再振动200毫秒。renotify 布尔值。新通知出现的时候是否替换之前的。如果设为true，则表示替换，相同tag属性的只会显示一个，而不会是默认的叠高楼：叠高楼silent 布尔值。通知出现的时候，是否无声。sound 字符串。音频地址。表示通知出现要播放的声音资源。noscreen 布尔值。是否不再屏幕上显示通知信息。sticky 布尔值。是否通知具有粘性，这样用户不太容易清除通知。当浏览器最小化后，点击通知让浏览器恢复显示的方法，比如聊天页面有消息后，让用户回到浏览器 notify.onclick = function () { var win = window.open(); win.close(); }有时候想监测浏览器当前标签的状态，以选择使用何种通知方式（页面通知、桌面通知、浏览器标题栏提示），如下方法可以监测页面的变化//浏览器监测标签状态，离开标签，最大最小化，都会触发这个事件，建议亲自试试以下代码 document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); console.log(document.hidden); }); //我们只需要判断 document.visibilityState 或者 document.hidden 即可知道页面是隐藏的还是显示的在必要的时候，还有一招就是浏览器标题栏提示//实际测试，在浏览器最小化或者标签非活动标签（切换到其它标签）时，交换时间间隔变长，或者失效 var titleInit = document.title var isShine = true //是否提示状态 setInterval(function() { var title = document.title; if (isShine == true) { if (/新消息/.test(title) == false) { document.title = '【你有新消息】'; } else { document.title = '【 】'; } } else { document.title = titleInit; } }, 500);notification其他细节: 摘自其它技术文章，有可能过时，仅作参考用户拒绝显示通知：一旦用户禁止网站显示通知，网站就不能再请求用户授权显示通知，需要用户去设置中更改。chrome浏览器的通知设置位置：设置>高级>内容设置>通知saafari浏览器：偏好设置>网站>通知>找到网站>修改权限/恢复默认关闭请求权限：在chorme浏览器中：当用户关闭请求权限的弹窗(右上角的叉叉)，页面还没刷新，我们可以再次向用户请求权限。页面刷新过后，浏览器默认用户拒绝。在safari浏览器下，没有关闭请求权限的选项，用户必须选择同意/拒绝。icon不显示问题：可能是网片有防盗链safari下面不能显示icon在safari下面，同一个网站(比如谷歌)，同样的代码，chorme可以正常显示icon，safari却没有icon，也没有报错。在stack overflow里面看到safari只支持body和tag选项,并不支持icon选项。tag：tag相同的通知，同时只能出现一个，老通知是否会被覆盖取决于：renotify配置和浏览器。chrome下：当通知关闭之后，上次出现过的tag在一段时间内，不能再出现，比如刷新页面再请求相同tag的通知。（在safari下正常出现）连续触发在safari和chrome下短时间内连续触发通知(不设tag，不设requireInteraction)，…

隐藏/不显示 video 标签的下载按钮 controlslist="nodownload" (html5实验性功能)
type: item
date: 2020-06-02T16:47:00+08:00
description: 文档：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsListHTMLMediaElement接口的controlsList 属性返回DOMTokenList，帮助用户在显示其自己的控件集时选择要在媒体元素上显示的控件。DOMTokenList可以设置以下三个可能值中的一个或多个：nodownload，nofullscreen和noremoteplayback（值是一组无序的空格分隔标记，这些标记是ASCII不区分大小写的）。nodownload关键字暗示的下载控制应使用用户代理自己的一套媒体元素控件时被隐藏。nofullscreen关键字暗示在使用用户代理自己的媒体元素控件集时，应隐藏全屏模式控件。noremoteplayback关键字暗示当使用用户代理自己的媒体元素控件集时，应隐藏远程播放控件。语法var domTokenList = HTMLMediaElement.controlsList;ValueA DOMTokenList.示例 规格https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist.