2. 程式人生 > >H5桌面訊息通知Notification

H5桌面訊息通知Notification

阿新 • • 發佈：2018-12-26

H5桌面訊息通知Notification

程式碼很簡單,直接複製即可看到效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html5桌面通知</title>
    </head>
    <body>
        <input type="button" value="開啟桌面通知" onclick="showDeskTopNotice('通知','HTML5桌面訊息'
 
);">
        <script>
            function showDeskTopNotice(title,msg){
                var Notification = window.Notification || window.mozNotification || window.webkitNotification;
                if(Notification){
                    Notification.requestPermission(function(status){
                        //status預設值'default'等同於拒絕 'denied' 意味著使用者不想要通知 'granted' 意味著使用者同意啟用通知
 

                        if("granted" != status){
                            return;
                        }else{
                            var tag = "sds"+Math.random();
                            var notify = new Notification(
                                title,
                                {
 

                                    dir:'auto',
                                    lang:'zh-CN',
                                    tag:tag,//例項化的notification的id
                                    icon:'https://admin.hms.xin/group1/M00/00/01/rB_YCFsY0OeAX6Q8AAAQvnJ6aNc109.ico',//通知的縮圖,//icon 支援ico、png、jpg、jpeg格式
                                    body:msg //通知的具體內容
                                }
                            );
                            notify.onclick=function(){
                                //如果通知訊息被點選,通知視窗將被啟用
                                window.focus();
                            },
                            notify.onerror = function () {
                                console.log("HTML5桌面訊息出錯！！！");
                            };
                            notify.onshow = function () {
                                /*setTimeout(function(){
                                    notify.close();
                                },2000)*/
                            };
                            notify.onclose = function () {
                                console.log("HTML5桌面訊息關閉！！！");
                            };
                        }
                    });
                }else{
                    console.log("您的瀏覽器不支援桌面訊息");
                }
            };
        </script>
    </body>
</html>

相關推薦

H5桌面訊息通知Notification

H5桌面訊息通知Notification 程式碼很簡單,直接複製即可看到效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

android通知欄的訊息通知(Notification)

轉載請註明出處： 在開發中經常會用到推送給使用者通知、訊息等的情況，今天就跟大家一起來學習推送訊息時通知欄的通知Notification。 通知欄訊息通知的使用步驟 一般可以分為以下步驟： 1. 首先需要一個NotificationManag

h5桌面通知Notification

內容 xls 震動 list span 清除 證書 保持活動 nload H5中的桌面通知Notification 　　前言: 對於一個前段開發者,逛網頁總會留意一些新奇的功能,對於上班總會用到Teambition的我,總是能收到Notification...所以今天就來研

瀏覽器桌面通知Notification實踐

連接 click 特定 static 樣式 alt admin HR nlog 一言不合就上圖： 最近常常在瀏覽器看到這樣的消息推送，還有QQ.com的推送，現在我對這個不了解，不知道叫消息自動推送對不對，這個時chrome瀏覽器的截圖，出現在右下角

Web Notification訊息通知的使用

若沒有效果，請開啟瀏覽器的訊息通知許可權。  <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator"

android藍芽聊天開發（2）圖文混排+Notification訊息通知

使用listView，繼承BaseAdapter，實現聊天介面：，執行圖： layout_list_item.xml單個item條目的佈局，即圖片，聊天內容，時間的佈局： <?xml version="1.0" encoding="utf-8"?> <Relat

【API使用系列】Notification訊息通知專題

1 NSNotificationCenter機制1.1 原理1.1.1 不移除通知掛機原因分析@implementation MRCObject- (id)init{    if (self = [super init]) {        [[NSNotificationC

Chrome瀏覽器擴充套件開發系列之十：桌面通知Notification

Desktop Notification也稱為Web Notification，是在Web頁面之外，以彈出桌面對話方塊的形式通知使用者發生了某事件。Web Notification於2015.9.10成為W3C推薦標準，網址https://www.w3.org/TR/no

訊息通知之Notification與PendingIntent

Notification-----狀態列資訊通知 一.簡意： （1）訊息通知：當某些應用有訊息時，在手機最上方的狀態列會有一條通知 二，基本用法： （1）獲取服務：通過getSystemService來獲取NotificationManager服務 Notificatio

android 某些三星手機上不顯示通知Notification和訊息Toast

    近日在做專案時，測試組的同事提出一個bug，就是在一臺三星手機上，點選某個圖片，本來應該彈出Toast，提示開始下載，並且在訊息欄有下載進度的通知的，可是這個手機上麼有彈出Toast，訊息欄也沒有出現通知，後來經過查資料知道有些三星手機預設禁用了顯示通知那一項，而不

Android學習筆記 五四 通知Notification 上

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android softap連線斷開訊息通知機制（Android O）

版權宣告：本文為博主原創文章，部落格地址：https://blog.csdn.net/h784707460/article/details/79788344，未經博主允許不得轉載。 基於使用者需求、功耗優化等，Softap功能常常會在原生Android基礎上做一些定製，比如：STA的接

使用 MVVMLight 訊息通知

原文: 使用 MVVMLight 訊息通知 歡迎閱讀我的MVVMLight教程系列文章《關於 MVVMLight 設計模式系列》 在文章的其實我們就說了，MVVMLight的精華就是訊息通知機制，設計的非常不錯。這個東西在MVVMLight可以說是用的及其的頻繁，當 ViewModel請求View要有些改

訊息通知Notificatio在8.0上不顯示，適配Android8.0

public class NotificationUtil { private Context aContext; private NotificationManager notificationManager; private static class Notifi

微信小程式-公告滾動訊息通知

寫在前面：　 　　這次我主要想總結一下微信小程式實現上下滾動訊息提醒，主要是利用swiper元件來實現，swiper元件在小程式中是滑塊檢視容器。 　　我們通過vertical屬性（預設為false,實現預設左右滾動）設定為true來實現上下滾動。 　 （需要注意的是：只要

FC 8.2 關於通知Notification

通知，既可以在活動裡建立，也可以在廣播接收器裡建立，也可以在服務裡建立。（一般只有在程式進入到後臺的時候我們才需要使用通知，所以在活動裡建立通知的場景比較少） 建立通知： 需要一個NotificationManager對通知進行管理，呼叫getSystemService()獲取，這個方

JAVA 桌面訊息窗體實現

下面是一段實現桌面訊息視窗的程式碼，希望對大家有幫助 package com.technology.lanxj.frame; import java.awt.BorderLayout; import java.awt.Dimension; import java.awt.Toolkit; im

自定義訊息通知、手機震動、提示音

Android中自定義訊息通知、獲取手機震動、提示音，在此做下記錄 package com.wjy.project.railway.activity; import android.annotation.TargetApi; import android.app.Notification;

一個大學訊息通知系統

GitHub地址：https://github.com/whirlys/ntim 歡迎 star，fork，pr，完善它 一個個人完成的不成熟的學生課程設計作品，存在非常多需要改善的地方，僅供參考，Netty聊天部分主要修改自 qiqiim-server （題目源於

Android---訊息通知Notifycation

程式碼： public class MainActivity extends AppCompatActivity { private final int NOTIFY_ID = 0x123; //通知的ID @Override protected