Web Front-end
H5 Tutorial
HTML5 implements Notification API desktop notification function _html5 tutorial skills
HTML5 implements Notification API desktop notification function _html5 tutorial skills
Traditional desktop notifications can be written as a div and placed in the lower right corner of the page to automatically pop up, and get messages through polling and other methods. Push to users. One disadvantage of this method is that when I use JD.com to shop, I don’t know that Renren has news pushed to me, but I have to wait until I switch the current page to Renren to know that there is news. Pushed. This method of message push is based on page survival, but we need such a strategy: no matter which page you are looking at, as long as there is a message, it should be pushed to me. This is the problem that webkitNotification wants to solve. The message generated by Notification is not attached to a certain page, only to the browser.
The normal process of generating a desktop notification
Let’s first take a look at how a desktop notification is generated:
1. Check whether the browser supports Notification
2. Check the browser’s notification permissions (whether notifications are allowed)
3. If the permissions are insufficient, obtain the browser’s notification permissions
4. Create message notifications
5. Display message notifications
NOTE : Regarding the first point, some explanation is needed. Notification has not been standardized yet, so it currently only supports chrome19 and safari6. There is information on the Internet that Firefox26 also supports it, but the results of my Firefox27 test are that it cannot be supported.
I believe everyone is familiar with desktop notifications of HTML5. Common applications include the web version of WeChat, which requires setting up the desktop notification function before they can be used.
It is not difficult to implement such a function using a client program. For the traditional web version of desktop notifications, you can write a div and place it in the lower right corner of the page to automatically pop up, and obtain messages through polling and other methods and push them to the user. One disadvantage of this method is that when I use Taobao to shop, I don’t know that there are messages pushed to me on Weibo, but I have to wait until I switch the current page to Sina Weibo to know that there are messages pushed to me. . This method of message push is based on page survival, but we need such a strategy: no matter which page you are looking at, as long as there is a message, it should be pushed to me. This is the problem that webkitNotification wants to solve.
Notification is not standardized yet, so you can’t learn it on websites such as w3cschool. However, most current mainstream browsers support Notification. The desktop notification rendering of html5 is as follows:
The code is as follows:
- >
- <html>
- <head>
- <meta charset="utf- 8">
- <title>html5 desktop notification title>
- head>
- <body>
- <input type="button" value="Turn on desktop notifications" onclick ="showNotice();">
- <script>
- function showNotice(){
- Notification.requestPermission(function(status){
- //The default value of status 'default' is equivalent to rejection 'denied' means the user does not want notifications 'granted' means the user agrees to enable notifications
- if("granted" != status)
- return;
- var notify = new Notification("Message",{
- dir:'auto',
- lang:'zh-CN',
- tag:'sds',//The id of the instantiated notification
- //icon supports ico, png, jpg, jpeg formats
- icon:'http://www.xttblog.com/icons/favicon.ico',//Thumbnail image of notification
- body:'html5 desktop notification' //The specific content of the notification
- });
- notify.onclick=function(){
- //If the notification message is clicked, the notification window will be activated
- window.focus();
- }
- });
- }
- script>
- body>
- html>
The above content is the HTML5 implementation of Notification API desktop notification function shared by the editor. I hope it will be helpful to everyone!
Original text: http://www.xttblog.com/?p=249
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1423
52
1318
25
1269
29
1248
24
PHP and Manticore Search Development Guide: Quickly Create a Search API
Aug 07, 2023 pm 06:05 PM
PHP and ManticoreSearch Development Guide: Quickly Create a Search API Search is one of the indispensable features in modern web applications. Whether it is an e-commerce website, social media platform or news portal, it needs to provide an efficient and accurate search function to help users find the content they are interested in. As a full-text search engine with excellent performance, ManticoreSearch provides us with a powerful tool to create excellent search APIs. This article will show you how to
How to crawl and process data by calling API interface in PHP project?
Sep 05, 2023 am 08:41 AM
How to crawl and process data by calling API interface in PHP project? 1. Introduction In PHP projects, we often need to crawl data from other websites and process these data. Many websites provide API interfaces, and we can obtain data by calling these interfaces. This article will introduce how to use PHP to call the API interface to crawl and process data. 2. Obtain the URL and parameters of the API interface. Before starting, we need to obtain the URL of the target API interface and the required parameters.
Oracle API Usage Guide: Exploring Data Interface Technology
Mar 07, 2024 am 11:12 AM
Oracle is a world-renowned database management system provider, and its API (Application Programming Interface) is a powerful tool that helps developers easily interact and integrate with Oracle databases. In this article, we will delve into the Oracle API usage guide, show readers how to utilize data interface technology during the development process, and provide specific code examples. 1.Oracle
Oracle API integration strategy analysis: achieving seamless communication between systems
Mar 07, 2024 pm 10:09 PM
OracleAPI integration strategy analysis: To achieve seamless communication between systems, specific code examples are required. In today's digital era, internal enterprise systems need to communicate with each other and share data, and OracleAPI is one of the important tools to help achieve seamless communication between systems. This article will start with the basic concepts and principles of OracleAPI, explore API integration strategies, and finally give specific code examples to help readers better understand and apply OracleAPI. 1. Basic Oracle API
React API Call Guide: How to interact and transfer data with the backend API
Sep 26, 2023 am 10:19 AM
ReactAPI Call Guide: How to interact with and transfer data to the backend API Overview: In modern web development, interacting with and transferring data to the backend API is a common need. React, as a popular front-end framework, provides some powerful tools and features to simplify this process. This article will introduce how to use React to call the backend API, including basic GET and POST requests, and provide specific code examples. Install the required dependencies: First, make sure Axi is installed in the project
Development suggestions: How to use the ThinkPHP framework for API development
Nov 22, 2023 pm 05:18 PM
Development suggestions: How to use the ThinkPHP framework for API development. With the continuous development of the Internet, the importance of API (Application Programming Interface) has become increasingly prominent. API is a bridge for communication between different applications. It can realize data sharing, function calling and other operations, and provides developers with a relatively simple and fast development method. As an excellent PHP development framework, the ThinkPHP framework is efficient, scalable and easy to use.
How to deal with Laravel API error problems
Mar 06, 2024 pm 05:18 PM
Title: How to deal with Laravel API error problems, specific code examples are needed. When developing Laravel, API errors are often encountered. These errors may come from various reasons such as program code logic errors, database query problems, or external API request failures. How to handle these error reports is a key issue. This article will use specific code examples to demonstrate how to effectively handle Laravel API error reports. 1. Error handling in Laravel
Save API data to CSV format using Python
Aug 31, 2023 pm 09:09 PM
In the world of data-driven applications and analytics, APIs (Application Programming Interfaces) play a vital role in retrieving data from various sources. When working with API data, you often need to store the data in a format that is easy to access and manipulate. One such format is CSV (Comma Separated Values), which allows tabular data to be organized and stored efficiently. This article will explore the process of saving API data to CSV format using the powerful programming language Python. By following the steps outlined in this guide, we will learn how to retrieve data from the API, extract relevant information, and store it in a CSV file for further analysis and processing. Let’s dive into the world of API data processing with Python and unlock the potential of the CSV format
