如何实现html5页面,自动提示添加到主屏幕

如何实现html5页面,自动提示添加到主屏幕,第1张

1、首先,打开手机safari浏览器,进入浏览器界面。

2、进入主界面后,搜索需要添加到主屏幕的网页。

3、在网页所在的页面,点击下方转发的图标,如图。

4、在d出的选框,下滑,找到并点击【添加到主屏幕】。

5、出现的页面,点击右上角的【添加】即可。

使用 HTML5 的 Notification API的方法:

1、申请权限

出于安全考虑,要发送桌面消息,需要先申请用户授权。Notification对象提供了一个静态的方法——requestPermission(),它接收一个回调函数作为参数,并把返回值传递给回调函数作为参数:

Notification.requestPermission(function(status){

if(Notification.permission !== status){

Notification.permission = status

}

})

返回值为字符串,有以下三个值:

default

granted

denied

默认为default,也就是需要询问,表现和denied一样。

2、创建消息

用户授权以后,就可以通过下面方式创建一条桌面提醒了:

var n = new Notification(title, options)

options为字典,传入Notification对象的属性

3、包含属性

Notification对象有如下几个只读属性:

dir(文字方向,经测试都不支持)

lang(语言)

body(消息体)

tag(标签)

icon(icon地址)

这几个属性都可以在创建消息的时候,作为option传入Notification构造函数。提一下tag属性,在有很多消息的时候,这个属性就非常有用,它会用拥有相同tag的最新的消息取代之前的消息,只显示一条最新的消息。比如在一个聊天室系统中,同时和几个人在聊天的时候,就可以以人名为tag显示不同人的最新消息。

4、定义事件

Notification对象有四个事件,分别是

onshow()

onclick()

onclose()

onerror()

分别在消息显示、被点击、被关闭和出错的时候被触发。通常情况下,只需要处理点击事件就够了,比如点击消息后跳转到某一特定的页面。

这四个事件的使用可以网上搜索


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6213604.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-18
下一篇 2023-03-18

发表评论

登录后才能评论

评论列表(0条)

保存