HTML5 が通知 API デスクトップ通知機能を実装_html5 チュートリアル スキル
従来のデスクトップ通知は div として記述し、ページの右下隅に配置すると自動的にポップアップし、メッセージを取得できます。ポーリングやその他の方法でユーザーにプッシュします。この方法の欠点の 1 つは、JD.com を使用して買い物をするときに、Renren にニュースがプッシュされていることを知りませんが、現在のページを Renren に切り替えるまでニュースがプッシュされていることを知るまで待たなければならないことです。 。このメッセージ プッシュの方法はページの生存に基づいていますが、そのような戦略が必要です。どのページを見ていても、メッセージがある限り、それは私にプッシュされるべきです。これが webkitNotification が望んでいる問題です。解決する。通知によって生成されたメッセージは特定のページには添付されず、ブラウザーにのみ添付されます。
デスクトップ通知を生成する通常のプロセス
まず、デスクトップ通知がどのように生成されるかを見てみましょう:
1. ブラウザーが通知をサポートしているかどうかを確認します。
2. ブラウザの通知権限を確認します(通知が許可されているかどうか)
3. 権限が不足している場合は、ブラウザの通知権限を取得します
4. メッセージ通知を表示します
>注：最初の点については、若干の説明が必要です。通知はまだ標準化されていないため、現時点では chrome19 と safari6 のみをサポートしています。Firefox26 もサポートしているという情報がありますが、私の Firefox27 のテストの結果は次のとおりです。それはサポートできません。
HTML5 のデスクトップ通知については誰もがよく知っていると思います。一般的なアプリケーションには Web バージョンの WeChat が含まれますが、使用する前にデスクトップ通知機能を設定する必要があります。
クライアントプログラムを使用してこのような機能を実装することは難しくありません。従来の Web バージョンのデスクトップ通知の場合、div を作成してページの右下隅に配置すると、自動的にポップアップし、ポーリングやその他の方法でメッセージを取得してユーザーにプッシュできます。この方法の欠点の 1 つは、淘宝網を使用して買い物をするときに、Weibo にメッセージがプッシュされていることに気づかないことですが、メッセージがプッシュされていることがわかるには、現在のページを Sina Weibo に切り替えるまで待たなければならないことです。私に。このメッセージ プッシュの方法はページの生存に基づいていますが、そのような戦略が必要です。どのページを見ていても、メッセージがある限り、それは私にプッシュされるべきです。これが webkitNotification が望んでいる問題です。解決する。
通知はまだ標準化されていないため、w3cschool などの Web サイトでは学習できません。ただし、現在の主流ブラウザのほとんどは通知をサポートしています。 html5 のデスクトップ通知レンダリングは次のとおりです:
- >
- <html>
- <頭>
- <メタ charset="utf- 8">
- <タイトル>html5 デスクトップ通知 タイトル>
- 頭>
- <ボディ>
- <入力 type="ボタン" 値=「デスクトップ通知をオンにする」 onclick ="show Notice();">
- <スクリプト>
- 関数 show Notice(){
- Notification.requestPermission(function(ステータス){
- //ステータスのデフォルト値 'default' は拒否と同等です。 'denied' はユーザーが通知を望まないことを意味します。 'granted' はユーザーが通知を有効にすることに同意することを意味します
- if("許可" != ステータス)
- 戻る
- var notify = new Notice("メッセージ",{
- dir:'auto',
- lang:'zh-CN'、
- tag:'sds',//インスタンス化された通知の ID
- //アイコンは ico、png、jpg、jpeg 形式をサポートしています
- icon:'http://www.xttblog.com/icons/favicon.ico',//通知のサムネイル画像
- body:'html5 デスクトップ通知' //通知の具体的な内容
- });
- notify.onclick=関数(){
- //通知メッセージをクリックすると、通知ウィンドウがアクティブになります
- window.focus();
- }
- });
- }
- スクリプト>
- ボディ>
- html>
上記の内容は、編集者が共有したNotification APIのデスクトップ通知機能のHTML5実装です。皆様のお役に立てれば幸いです。
原文: http://www.xttblog.com/?p=249
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7366
15
1628
14
1354
52
1266
25
1214
29
PHP およびマンティコア検索開発ガイド: 検索 API をすばやく作成する
Aug 07, 2023 pm 06:05 PM
PHP および ManticoreSearch 開発ガイド: 検索 API をすばやく作成する 検索は、最新の Web アプリケーションに不可欠な機能の 1 つです。電子商取引 Web サイト、ソーシャル メディア プラットフォーム、ニュース ポータルのいずれであっても、ユーザーが興味のあるコンテンツを見つけられるように、効率的かつ正確な検索機能を提供する必要があります。 ManticoreSearch は、優れたパフォーマンスを備えた全文検索エンジンとして、優れた検索 API を作成するための強力なツールを提供します。この記事ではその方法を説明します
PHP プロジェクトで API インターフェイスを呼び出してデータをクロールおよび処理するにはどうすればよいですか?
Sep 05, 2023 am 08:41 AM
PHP プロジェクトで API インターフェイスを呼び出してデータをクロールおよび処理するにはどうすればよいですか? 1. はじめに PHP プロジェクトでは、多くの場合、他の Web サイトからデータをクロールし、これらのデータを処理する必要があります。多くの Web サイトでは API インターフェイスが提供されており、これらのインターフェイスを呼び出すことでデータを取得できます。この記事では、PHP を使用して API インターフェイスを呼び出し、データをクロールおよび処理する方法を紹介します。 2. API インターフェースの URL とパラメーターを取得する 開始する前に、ターゲット API インターフェースの URL と必要なパラメーターを取得する必要があります。
React API 呼び出しガイド: バックエンド API とデータをやり取りおよび転送する方法
Sep 26, 2023 am 10:19 AM
ReactAPI 呼び出しガイド: バックエンド API とやり取りしてデータを転送する方法 概要: 最新の Web 開発では、バックエンド API とやり取りしてデータを転送することは一般的なニーズです。 React は、人気のあるフロントエンド フレームワークとして、このプロセスを簡素化するための強力なツールと機能をいくつか提供します。この記事では、React を使用して基本的な GET リクエストや POST リクエストなどのバックエンド API を呼び出す方法を紹介し、具体的なコード例を示します。必要な依存関係をインストールします。まず、Axi がプロジェクトにインストールされていることを確認します。
Oracle API統合戦略分析: システム間のシームレスな通信の実現
Mar 07, 2024 pm 10:09 PM
OracleAPI統合戦略分析: システム間のシームレスな通信を実現するには、特定のコード・サンプルが必要です。今日のデジタル時代では、社内の企業システムは相互に通信してデータを共有する必要があり、OracleAPIは、システム間のシームレスな通信を実現するための重要なツールの1つです。システム。この記事では、OracleAPIの基本概念と原則から始まり、API統合戦略について説明し、最後に読者がOracleAPIをよりよく理解して適用できるように具体的なコード例を示します。 1. 基本的な Oracle API
Python を使用して API データを CSV 形式で保存する
Aug 31, 2023 pm 09:09 PM
データ駆動型のアプリケーションと分析の世界では、API (アプリケーション プログラミング インターフェイス) がさまざまなソースからデータを取得する際に重要な役割を果たします。 API データを操作する場合、多くの場合、アクセスや操作が簡単な形式でデータを保存する必要があります。そのような形式の 1 つは CSV (カンマ区切り値) で、これを使用すると表形式のデータを効率的に編成して保存できます。この記事では、強力なプログラミング言語 Python を使用して API データを CSV 形式で保存するプロセスについて説明します。このガイドで概説されている手順に従うことで、API からデータを取得し、関連情報を抽出し、さらなる分析と処理のためにそれを CSV ファイルに保存する方法を学びます。 Python を使用した API データ処理の世界に飛び込み、CSV 形式の可能性を解き放ってみましょう
Oracle API使用ガイド: データ・インタフェース・テクノロジの探求
Mar 07, 2024 am 11:12 AM
Oracle は世界的に有名なデータベース管理システム プロバイダーであり、その API (アプリケーション プログラミング インターフェイス) は、開発者が Oracle データベースと簡単に対話して統合するのに役立つ強力なツールです。この記事では、Oracle API 使用ガイドを詳しく掘り下げ、開発プロセス中にデータ インターフェイス テクノロジを利用する方法を読者に示し、具体的なコード例を示します。 1.オラクル
Laravel を使用した RESTful API 開発: 最新の Web サービスの構築
Aug 13, 2023 pm 01:00 PM
Laravel による RESTful API 開発: 最新の Web サービスの構築 インターネットの急速な発展に伴い、Web サービスの需要は日に日に増加しています。最新の Web サービス アーキテクチャとして、RESTfulAPI は軽量で柔軟性があり、拡張が容易であるため、Web 開発で広く使用されています。この記事では、Laravel フレームワークを使用して最新の RESTful API を構築する方法を紹介します。 LaravelはPHP言語です
Laravel APIのエラー問題に対処する方法
Mar 06, 2024 pm 05:18 PM
タイトル: Laravel API エラーの問題に対処する方法、具体的なコード例が必要です Laravel を開発していると、API エラーが頻繁に発生します。これらのエラーは、プログラム コードのロジック エラー、データベース クエリの問題、外部 API リクエストの失敗など、さまざまな理由で発生する可能性があります。これらのエラー レポートをどのように処理するかは重要な問題であり、この記事では、特定のコード例を使用して、Laravel API エラー レポートを効果的に処理する方法を示します。 1. Laravelでのエラー処理
