Webプッシュ通知。それは何ですか、そしてなぜですか？ HTML5通知はシンプルです。GMailWebプッシュ通知のように、1行で通知を作成します

人生の真実はこれです：

ウェブサイトへのトラフィックを得るのは本当に難しいです。

しかし、あなたはさらに悪いことを知っていますか？

あなたのサイトを訪れた訪問者の90％は二度と戻ってこないでしょう。

独占ボーナス：磁気テキストを作成するためのチェックリストをダウンロードするには、ここをクリックしてください。このチェックリストに従って書かれた記事は、磁石のように読者の注意を引くでしょう（クリックしてダウンロード).

もちろん、それは残念です...あなたはその開発に信じられないほどのエネルギーを費やしていますが、最も価値のある資産である訪問者は、彼らが見つけた同じ日にあなたのことを忘れます。

しかし、絶望しないでください、解決策があります：

あなたのサイトにインストールする ブラウザのプッシュ通知.

ポイントは次のとおりです。

サイトのプッシュ通知を使用すると、訪問者と連絡を取ることができます。

一部のブログでは、プッシュ通知の導入により、繰り返しアクセスが数倍に増加しました。

そして簡単に言えば、それは電子メールのニュースレターの良い代替手段です。

この記事では、次のことを学びます。

プッシュ通知の利点は何ですか
この比較的新しいテクノロジーは価値がありますか？
最高のプッシュ通知サービスのリスト
プッシュをサイトに接続する方法

しかし、最初に、小さな例...

Extraは、中東で最大の小売業者の1つです。

プッシュ通知の助けを借りて、彼らはモバイルユーザーへの売り上げを2倍に増やすことができました。

これがすべてだと思うなら、あなたは深く誤解されています。

また、リピート購入のシェアが4倍になりました（!!!）。

その結果、Extraのマーケターは、プッシュ通知を最も効果的な顧客維持ツールとして認識しました。

Webサイトのプッシュ通知とは何ですか？

Webサイトのプッシュ通知が何であるかまだわかりませんか？

すべてが非常に簡単です：

Webリソースにアクセスすると、次のポップアップウィンドウが表示される場合があります。

プッシュ通知を受信するリクエストの例

ユーザーが同意した場合は、新しい記事や新製品などに関する通知を送信できます。

画面の右隅にメッセージが表示されます。この場合、ブラウザを最小化するか、閉じることもできます。

プッシュ通知の例：

プッシュ通知をサポートするブラウザ

Safariは、ブラウザでプッシュ通知テクノロジーをサポートした最初の製品です。その後、2015年4月にChromeバージョン42に実装されました。

そして最後に、2016年の初めに、Firefoxブラウザバージョン44でプッシュ通知がサポートされるようになりました。

すでに現時点ですべてのブラウザの75％以上プッシュ通知の送信をサポートします。

ユーザーがプッシュ通知をサブスクライブする必要がある理由

まず、ユーザーがプッシュ通知をサブスクライブするときに得られるメリットについて説明します。

1.コンビニエンスファースト

あなたが2と2として理解すべきこと：

人々は最高のサービスを提供するサイトから購入します。同じことが読者の忠誠心にも当てはまります。

しかし、サイトをユーザーフレンドリーにする方法は？

答えは明らかです：

プッシュ通知付き。

私があなたのサイトの定期的な更新を購読したとしましょう...

あなたからのメールを見越して、メールボックスを開かなければならないことがよくあります。

プッシュ通知の場合、すべてがはるかに簡単です。

OneSignal

その後、管理領域の左側の列にOneSignalPushセクションが表示されます。

その後のセットアップは、ステップで完全に説明されていますが、英語で説明されています。したがって、必要なすべての手順を簡単に説明します。

[構成]セクションに移動する必要があるウィンドウが表示されます。

スクリーンショットに示されているようにすべてを実行する必要があり、その結果、プロジェクト番号とAPIキーを受け取ります。

[設定]セクションの[Googleプロジェクト番号]フィールドにプロジェクト番号を入力します。 APIキーを保存する必要があります（引き続き必要です）。

同じ場所で、GoogleプロジェクトのAPIキーと、サイトにSSL証明書が存在することを指定します。

サイトがhttpにある場合、何も変更しません。 httpsの場合は、対応するチェックボックスをオンにします。

なぜこれが必要なのですか？

事実、プッシュ通知はhttpsサイトでのみサポートされています。ただし、OneSignalサービスは、サブドメインを作成することで問題を解決します。

Webサイトのアドレスをサブドメインとして使用できます。たとえば、サイトの代わりに-私はsite4business.onesignal.comを実行しました

[サイトの変更]サブセクションでは、プッシュ通知の実装の種類について説明します。 Safariプッシュサブセクションでは、すべてが前の手順と同様です。

最後に、[構成]セクションでサブスクライブボタンの場所とそのテキストを変更できます。

httpの場合、通知のサブスクリプションはボタンを使用した場合にのみ利用可能であることに注意してください。デザインは自由に変更できます。

また、ポップアップウィンドウはhttpsサイトでのみ使用できます。

プッシュクルー

まず、PushCrewプラグインをインストールします。

その後、サービスのWebサイトでアカウントを作成します。

最後に、[デスクトップ用にカスタマイズ]セクションで、ポップアップの外観をカスタマイズできます。

これがサービスの完全なリストです、プッシュ通知を実装する機能を提供します。

新しいサイトにアクセスすると、ブラウザの左上隅に小さなウィンドウが表示され、特定の通知を配信する許可を求めることがあります。

ユーザーがそのような通知の受信を一度承認した場合、後でコンピューターまたはモバイルデバイスのタスク領域で、新しい出版物がこれらのサイトに表示されたことを示すメッセージとともに小さなウィンドウの外観を定期的に観察します。

これらはいわゆるプッシュ通知であり、Webプッシュでもあります。これはインターネットマーケター向けの最新のツールです。そして、関心のあるイベントに遅れないようにしたいユーザーに通知するための最も便利な手段。

プッシュ通知とは何ですか？

プッシュ通知は、通常のコンピューターまたは携帯電話の画面に表示され、重要なイベントや更新について通知する短いポップアップ通知です。

ユーザーが受信したプッシュ通知をクリックすると、サイトニュースがすぐにウィンドウに開き、ユーザーはネットワークに投稿されたばかりの情報をいち早く知ることができます。また、有用な情報を持っている最初のユーザーの中にいることが重要な場合もあります。

米。 1.プッシュ通知はどのように見えるか

サイトプッシュ通知はサイト所有者によって有効にされ、ユーザーはブラウザー設定を介してプッシュ通知を管理できます。ウェブマスターがサイトでプッシュを有効にしていない場合、ユーザーはそれらを使用したり、構成したりする機会がありません（または必要ありません）。

新鮮な情報を配信する他の方法と比較したプッシュ通知の利点は何ですか？デスクトップブラウザのGoogleChrome、Mozilla Firefoxなどでこのようなツールを管理するにはどうすればよいですか？以下のこれらの質問を考えてみましょう。

プッシュ通知の利点

所有者、つまりWebマスターのサイトにプッシュ通知を実装することの利点は明らかです。事実、ユーザーに90％のメッセージ配信を提供し、ほぼ50％の配信を提供できる通知手段はほとんどありません。

しかし、このサイトまたはそのサイトの読者にはどのようなメリットがありますか？

一部のユーザー向けのプッシュ通知は、電子メールでサイトの更新をサブスクライブするよりも便利な場合があります。異なるサイトからのメッセージはメールボックスに蓄積されず、個人的な通信へのアクセスを複雑にしません。

現時点でユーザーがニュースを読む時間がない場合は、プッシュ通知をクリックすることで、ブラウザウィンドウでページを開き、都合のよいときにページを離れることができます。または、PocketやReadabilityなどの怠惰な読書サービスに送信します。

電子メールでサイトニュースを購読することの欠点の1つは、ユーザーのメールボックスに新しい記事に関する手紙が蓄積されることです。プッシュ通知を使用すると、メールがオーバーフローすることはありません。

サイトのハッキングからの保護が不十分な場合、サイトサブスクライバーのデータベースが、このデータベースを最初に編成した詐欺師の手に渡る可能性があります（いわゆるスパム攻撃）。次に、このデータベースのすべての電子メール所有者は、そのような不正なスパム電子メールを受信します。この点でプッシュ通知を使用すると、ユーザーはより安全に保護されると考えられています。関心のあるサイトの作成者を除いて、誰がそのようなサイトで何かをハッキングしても、ユーザーの邪魔をすることはできません。

プッシュ通知とRSSフィード

スパム保護の観点から、Webプッシュは、特定のサイトで公開された最新の情報を配信する別の手段であるRSSフィードに似ています。後者は、RSSサブスクリプションが発行されたサイトの公開に関するメッセージの履歴を保持するという点でも勝ちます。ポップアップ通知は数秒後に永久に消えます。

ただし、ニュース配信にRSSフィードを使用するには、ユーザーが独立したアクションを実行する必要があります。ユーザーは各サイトでサブスクリプションボタンを見つけ（標準の場所はありません）、RSSリーダーにチャネルアドレスを入力する必要があります。ユーザーがブラウザにそのようなリーダーを持っていない場合でも、たとえば、拡張機能をインストールしたり、Webサービスを選択したり、適切なプログラムを使用したりして、個別に整理する必要があります。

プッシュ通知自体がポップアップし、サブスクライブを提案します。その実装は、ほとんどすべての最新のブラウザーの標準機能によって提供されます。

GoogleChromeでプッシュ通知を設定する

Google Chromeと同じBlinkエンジンで構築されたブラウザ（たとえば）でのポップアップ通知の実装は、ユーザーが選択する必要のない完全にオープンなサブスクリプション形式をユーザーに提供します。

Google Chromeのプッシュリクエストには、次の2つの機能ボタンが含まれています。

「許可」してメッセージ配信を承認し（図2の1）、
「ブロック」して、ブロックされたサイトのリストにサイトを追加します（図2の2）。

後者の場合、そのようなサイトへのその後のアクセスではリクエストは表示されなくなります。

3番目のオプションがあります。リクエストウィンドウで十字をクリックすると、決定を延期できます（図3の3）。サイトはブロックされません。しばらくすると、Chromeウィンドウの左上隅にそのようなリクエストが再び表示されます。

米。 2.GoogleChromeでのプッシュ通知リクエストの外観

Mozillaでプッシュ通知を設定する

Mozilla Firefox（および同じGeckoエンジンに基づく他のブラウザー）では、Webプッシュ配信要求フォームはGoogle Chromeよりも賢く、むしろユーザーが特定の選択をする傾向があります。

「通知を許可」ボタン（図3の1）は、色表示で強調されています。
別の方法として、「今はしない」という遅延決定ボタン（図3の2）とは対照的です。

「許可しない」通知ブロックボタン（図3の4）は小さく、「今はしない」ボタン（図3の3）の内側に隠れています。

米。 3.MozilleFirefoxでのプッシュ通知リクエストはどのように表示されますか

許可およびブロックされたプッシュ通知は、ブラウザプロファイルと同期されません。新しいオペレーティングシステムをインストールした後、別のコンピューターに切り替えるとき、およびアンインストール中に残りのブラウザーをクリーンアップしてブラウザー自体を再インストールした後でも、最初からやり直す必要があります-サイトの要求に再度応答し、アクセス許可のベースを形成し、通知を最初からプッシュします。

Webプッシュの購読を解除してブロックする

過剰な量のポップアップメッセージは、時間の経過とともにユーザーに迷惑をかける可能性があります。さらに、私たちの利益は変わる可能性があります。

このような場合、無関係なサイトから退会したり、ブラウザによるプッシュ通知の配信を完全に無効にしたりするにはどうすればよいですか？それどころか、プロンプトが表示されたときに誤ってブロックされたサイトのブロックを解除するにはどうすればよいでしょうか。

Webサイト 15.12.2017

良い一日、親愛なる訪問者。

新しい素材の登場やその他のイベントに関するサイトからの即時通知、何が良いでしょうか？！このテクノロジーは、モバイルテクノロジーの世界から生まれました。当初、インスタント通知は多くのモバイルアプリケーションにすぎませんでしたが、時間の経過とともに、「機能」がブラウザー（モバイル、次にデスクトップ）に導入されました。

アラートはサイトへの訪問者数を増やし、電子メールサブスクリプションよりも効果的です。それらの。ユーザーがサイトにアクセスし、サイトからの通知をオンにするリクエストを承認した場合、ほとんどの場合、ユーザーに通知が表示されます。このため、従来の電子メールメールの場合のように、余分なジェスチャーを行う必要はありません。リスト。

Webプッシュ通知は、安全なプロトコル（https）を使用して動作するサイトにのみ統合できることにすぐに注意したいと思います。これはテクノロジの要件です。

Webプッシュとは

ユーザーがインスタントメッセージングサービスを備えたサイトにアクセスすると、そのサイトが通知の送信許可を要求していることを示す微妙なメッセージが表示されます。この通知のデザインは、使用しているブラウザによって異なります。

この画像は、デスクトップブラウザのGoogleChromeとMozillaFirefoxのサイトからの通知をサブスクライブする提案の例を示しています。

これは、バージョン63.0.3239.107までのChromeforAndroidモバイルブラウザで同じリクエストがどのように表示されたかを示しています。

その後、Googleモバイルブラウザの開発者は、クエリ出力へのアプローチを改訂し、より積極的にしました。今後は、ユーザーが選択するまでコンテンツを上書きします。

これが訪問者を苛立たせる可能性があることに気づき、OneSignalは次のことを行いました。Androidモバイルブラウザ用のGoogle Chromeからサイトにアクセスすると、サブスクライブの許可を求めるポップアップウィンドウが表示されます（リクエストテキストは構成可能です）。ユーザーが同意すると、ブラウザでアラートを有効にするための標準プロンプトがすでに表示されています。
これは、Androidモバイルブラウザ用のGoogle Chromeにのみ適用されます。他のすべてのブラウザでは、通知サブスクリプションリクエストを表示するためのアルゴリズムは変更されていません。

ユーザーが通知の受信に同意すると、「ウェルカム」通知を設定できます。これは、新しいサイトの資料に関する通知を購読していることを意味します。そして、それらが表示されると、対応する通知によって通知されます。

ご覧のとおり、モバイルブラウザーでは、アラートは通知バーに表示されることがよくありますが、デスクトップ（コンピューター）ブラウザーでは、アラートは右下隅にポップアップ表示されます。

アラート自体もカスタマイズ可能です。アラートをクリックすると、画像、タイトル、メッセージテキストを設定し、特定のページを開くことができます。

Webプッシュをサイトに接続する方法

Web Pushは、プラグインなどをインストールするだけではほとんど実装できないサービスであることを理解しておく必要があります。したがって、対応するサードパーティのサービスを使用します。この場合、OneSignalサービスについて説明します。これを利用して、上記の機能をサイトに提供します。なぜ彼なのか？それは完全に無料なので、ユーザーに広告やその他のものを送信しません。

サイトのWebプッシュがOneSignalサービスを使用して実装されていることをユーザーが知っている可能性はほとんどありません。これは紛れもない利点です。

その欠点は何ですか？それらもご利用いただけます。このサービスのインターフェースは英語であり、そこからアラートを生成してサブスクライブしているユーザーに送信する場合は、それに慣れる必要があります。

WordPressに統合するための公式プラグインがありますが、私はまったく好きではありませんでした。そのサイズは6.5メガバイトで、かなりの量です...それはすでに私がそれを使用することを止めました。

サービスWebサイトで詳細に説明されている統合ガイド（英語）を読んで、WebPushを「ハンドル」を使用してサイトに統合しました。

そして、私はサービスの個人アカウントを通じてメッセージを自分で作成します。

この統合方法（プラグインなし）についてお話ししたいと思います。説明されている統合方法を使用すると、WordPressサイトだけでなく、他のエンジン、または静的なhtmlページで構成される機能をWebプッシュに付与できることに注意してください。本当に用途の広い選択肢です！

最初のステップは、OneSignalサービスのWebサイトにアクセスして登録することです。これを行うには、リンクをクリックします ログインする表示されたウィンドウで、リンクをクリックします サインアップ、下部にあります。そこで、メールアドレス、パスワード、会社名、または組織名（いずれかを入力）を入力し、利用規約に同意する必要があります。 Google、Facebook、Githubアカウントをお持ちの場合は、登録を加速することもできます。
個人アカウントを登録して入力すると、サービスの機能をリストしたウェルカムメッセージが表示されます。
最後のウィンドウをクリックしたら、そこにあるボタンをクリックします 新しいアプリを追加する.
開いたウィンドウで、サイトの名前などの名前を入力し、ボタンをクリックします作成.
その後、あなたの目はあなたが碑文のあるボタンをクリックする必要があるウィンドウを見るでしょう ウェブサイトプッシュキーを押します次.
次のウィンドウで、ラベルの付いたボタンをクリックします GoogleChromeとMozillaFirefox、次にを押します次.
注：ボタンもあります アップルサファリ、そしてあなたは自然な質問があるかもしれません：このブラウザはどうですか？心配しないでください。次のステップの1つで追加します。
次のウィンドウで、サイトのアドレスとそのロゴを入力するように求められます（オプションで、後で追加できます）。ロゴ自体は、png形式で192 x 192ピクセルの解像度である必要があり、そのファイルはホスティング自体に配置されている必要があります。データ入力後、キーを押してください 保存する.
その結果、ウィンドウが開き、サービスの統合方法をオプションから選択する必要があります。ボタンをクリックする必要があります。 ウェブサイトプッシュ、を押します次.
ウィンドウ内の情報が変更され、 あなたのAppID。このウィンドウは閉じないでください。後で必要になります。それでは、サービスコードをサイトに統合することに移りましょう。
コードをサイトに統合するには、このアーカイブをダウンロードする必要があります（アーカイブは公式サイトからダウンロードされます）。統合を成功させるために必要なファイルが含まれています。アーカイブにはフォルダが含まれています OneSignalSDKFiles、および3つのファイルが含まれています。
- マニフェスト.json
- OneSignalSDKWorker.js
- OneSignalSDKUpdaterWorker.js
これらのファイルを解凍します。
次に、テキストエディタでファイルを開く必要があります。 マニフェスト.jsonキャプションを編集します OneSignalの例あなたのサイトの名前で。ここに厳密な要件はありません。サイトの名前とそのスローガンを入力できます。
次に、これらのファイルをサイトのルートにアップロードして、ブラウザバーにアドレスを入力した場合にこれらのファイルを使用できるようにします。
https://sitename.ru/manifest.json
https://sitename.ru/OneSignalSDKWorker.js
https://sitename.ru/OneSignalSDKUpdaterWorker.js
しかし、それだけではありません。次に、コードをサイトテンプレートに直接追加する必要があります。これがWordPressの場合は、フォルダーに移動します（ \ wp-content \ themes \<папка с названием темы> ）使用しているテーマがどこにあり、そこでファイルを見つけます header.php。このファイルを開いて編集し、タグの間のどこかに書き込みます … 次のコード：

場所を忘れないでください ここにアプリIDを入力してくださいケースで割り当てられたコードを入力し、手順9で強調表示されたウィンドウに表示されます。
タイトルとメッセージは、購読時の「ウェルカム」メッセージに責任があります。これらの行のテキストを好みに合わせて変更できます。
また、actionMessage、acceptButtonText、cancelButtonTextパラメーターは、サブスクリプションリクエストテキストを担当します。サブスクリプションリクエストテキストは、Androidモバイルブラウザー用のGoogle Chromeに表示され、他の場所には表示されません。
ファイルを保存します header.php入力したコードで。
次に、Webサイトを開きます。インスタント通知をサブスクライブするように求めるアラートが表示されます。この申し出に同意します。
注：このリクエストは1回だけ表示されることに注意してください。そして、あなたがそれに同意した場合、後でそれは表示されませんが、自動サブスクリプションが実行されます。ブラウザの履歴をクリアしても効果はありません。
私は、サイトへの統合を実験して、テクノロジーのそのような機能に自分で遭遇しました。したがって、リクエストが表示されない場合は、「アラームを鳴らして」何かが機能していないと考えるべきではありません。以前にサイトにアクセスしたことのない別のブラウザからアクセスしてみてください。
おめでとうございます-あなたはあなたのサイトからのアラートの最初の購読者です:-)しかしそれだけではありません。
ここで、サイトへのコードの統合に進むために残したウィンドウに戻り、その中のボタンをクリックします 購読ユーザーを確認する。その結果、ボタンの下にメッセージがポップアップ表示されます。緑色の場合は、すべてうまくいきました。右下隅にあるボタンをクリックしてください。 終わり.
Web Pushは、Google Chromeブラウザー、Chromiumコードに基づくもの（Opera、Yandex Browserなど）、およびMozilla Firefoxで動作（サブスクライブ、受信）します。
AppleSafariブラウザ（Appleブラウザのデスクトップバージョン）でWebプッシュを機能させる機能を有効にする必要があります（モバイルではなく、iOSはWebプッシュテクノロジをサポートしていません）。
Apple Safariのサポートを有効にするには、次の手順を実行します。
OneSignalアカウントの左側のメニューで、リンクをクリックします アプリの設定、開いたメニューで、ボタンをクリックします 構成、設定、ポイントの反対側にあります アップルサファリ.
開いたウィンドウで、サイトの名前とそのURLアドレスを入力します。オプションで、アラートに表示されるサイトのロゴをアップロードできます。これを行うには、チェックボックスをオンにします 自分の通知アイコンをアップロードしたいグラフィックファイルをアップロードします。ロゴの要件は、256 x 256ピクセル、png形式の解像度です。必要なことをすべて行ったら、ボタンをクリックします 保存する.
ページにリダイレクトされます アプリの設定、しかし碑文の下で アップルサファリ強調表示されます ウェブID.
以前にファイルに挿入したコードにコピーして貼り付ける必要があります header.php：
SistNotification：true、safari_web_id： ""、welcomeNotification：（ "title"： "Notification .. ..
SistNotification：true、safari_web_id："ここにAppleSafariIDを入力してください"、welcomeNotification :( "title"："通知...
変更を保存します。

すべて、統合、セットアップが完了しました。不明な点がある場合は、質問をして、このサイトでのコードの入力方法をよく理解してください。このサイトの唯一の例外はコード行です

いわゆる「フッター」に移動しました（ページのソースコードでは、下部に表示されます）。

Webプッシュを生成してサブスクライバーに送信する方法

コードと統合を理解しました。今では、メーリングリストを作成するのは小さなことです。

これを行うには、左側のメニューのリンクをクリックします 新しいメッセージ.
そこで、ウィザードが私たちを待っています。その助けを借りて、メーリングリストを作成します。
[送信]ページでは、デフォルトで全員がすでに選択されています（ みんなに送る）。クリック次.
メッセージは次のページに入力されます。碑文に注意を払わない英語入力フォームの前に、指定した言語ごとにマルチメーリングリストを作成するだけです。不要な場合は、お気軽にタイトルを入力してください（ タイトル）とメッセージ（ メッセージ）を押して次.
このページでは、アラートをクリックしたときに開くアイコン、画像、およびリンクを指定するように求められます。
アイコン（ アイコン-テキストの横に表示されるサムネイル）は、Google Chrome、Mozilla Firefox（およびChromiumベースのブラウザ）、全体像（画像）Chromeのみ、バージョン56からのみ。Safariブラウザの場合、アイコンを指定する方法はありません。着信通知には、Webプッシュをサイトに接続する手順のステップ16でアップロードされたアイコンが常に表示されます。これは、Safariブラウザでのプッシュ通知サポートの実装です。
全体像の入力は無視できます（画像）、アイコンの指定に限定（ アイコン).
フィールドについてもっと言う 有効期間–このオプションは、メッセージの存続期間を担当します。デフォルトでは3日です。この間、スマートフォン/ブラウザがインターネットにアクセスできない場合、メッセージはまったく配信されません。
このギャップを増やすことは理にかなっています。このしきい値を128日に増やします（ 11111111 フィールドで）。増やすには、数字の入力を開始するだけで、設定されたしきい値がリアルタイムで表示されます。
すべてのデータを入力したら、をクリックします次.
次のページは、いつ送信するかを示しています。デフォルトでは、送信は即時ですが、オプションを使用して試すことができます インテリジェント配信（推奨）–特定のユーザーに関連する可能性が最も高い時間にメッセージを送信する（タイムゾーンやその他の要因によって異なります） .
続けるにはクリック確認.
その結果、メッセージの送信、その内容、サブスクライバーの数などに関する一般的な要約情報を含むページが表示されます。ボタンを押して送信を確認します。 メッセージを送る.

そして、統計ページに移動します。ここでは、送信されたメッセージの総数、目標に到達したメッセージ、サブスクライバーがメッセージをクリックした回数などを確認できます。とても便利で視覚的です。

左側のメニューでアイテムを選択できることは注目に値します テンプレート通常のメーリングリストを作成するたびに繰り返し情報を入力しないように、メーリングテンプレートを作成します。

概要

この資料では、Webプッシュの利点、サイトに即時通知サービスをインストールするプロセス、およびOneSignalの完全無料サービスの例を使用したその使用法について詳しく説明しました。

質問がある場合は、コメントですべての微妙なニュアンスを明確にすることができます。

寄付サイトサイト（寄付はYandex Moneyサービスを通じて収集されます）

プッシュ通知をオフにする方法-この質問は、インターネット上の多くのサイトにログインした後にブラウザに通知が表示される一部のユーザーを心配しています。プッシュテクノロジーは、プロバイダー（この場合はサイト）からこのサイトのユーザーにインターネット上の情報を配信するように設計されています。

サイトのプッシュ通知は、主に新しい記事のリリースについて、ニュースについてWebサイトの訪問者に通知するために必要です。この場合、訪問者はタイムリーにサイトから通知を受け取り、すぐにニュースを読むことができます。

サイトに代わって通知は、ユーザーのコンピューターへの通知の配信を整理するサードパーティのサービスを使用して送信されます。

コンピューターのプッシュ通知とは何ですか？サイト訪問者がこのリソースからのメッセージの受信に同意した場合、このWebサイトのニュースに関する通知がユーザーのデスクトップに表示されることがあります。

プッシュ通知のしくみ

通知送信機能が有効になっているサイトにアクセスすると、毎回通知の表示を許可するリクエストが表示され、「許可」または「ブロック」ボタンをクリックすることが提案されます。ボタンの名前は異なる場合がありますが、意味はどこでも同じです。

プッシュ通知リクエストウィンドウは小さく、サイトの閲覧を妨げないため、サイト訪問者はこのポップアップを無視できます。

このサイトから通知を送信するサービスによって、このようなウィンドウの外観は異なります。

[許可]ボタンをクリックすると、コンピューターでプッシュメッセージを受信することに同意したことになります。

ユーザーのコンピューターのデスクトップの通知領域に、このWebサイトのニュースに関する通知が表示されます。通常、これは新しい記事のリリースに関するメッセージです。一部のサイトは、アラートを送信する機能を悪用し、連続してすべてについて通知し、場合によっては不要な情報を送信します。

プッシュ通知を受信した後、ユーザーはサイトにアクセスして記事を読むか、このメッセージを無視して通知を閉じることができます。サイトからのこのような通知は、通知領域に表示され、短時間で自動的に閉じるため、実際にはコンピューターでの作業に支障をきたすことはありません。

このウェブサイトに再度アクセスしたときに、このサイトからアラートを送信する許可の要求が表示されないようにするには、[ブロック]ボタンをクリックします。

特定のサイトからすでにプッシュメッセージを受信している場合、ユーザーは自分のブラウザーで自分でプッシュ通知を無効にすることができます。このブラウザーでは、コンピューターでの通知の受信が許可されています。

アラートを受信した後にプッシュ通知を削除する方法

多くの通知では、通知を送信するサービスの設定に応じて、開いたメッセージのウィンドウで直接プッシュ通知を無効にすることができます。

これを行うには、設定アイコン（歯車）をクリックしてから、[サイトからの通知をオフにする]を選択します。

その後、このサイトからの通知はコンピュータに表示されなくなります。

GoogleChromeでプッシュ通知を無効にする方法

Google Chromeブラウザの設定を入力し、マウスホイールを下にスクロールして、[詳細設定]リンクをクリックします。

「プライバシーとセキュリティ」セクションで、「サイト設定」ボタンをクリックします。開いた[サイト設定]ウィンドウで、[通知]セクションを見つけます。

ここでは、サイトからのアラートの受信を設定できます。デフォルトでは、「送信前に許可を求める（推奨）」が選択されています。

Google Chromeブラウザでプッシュ通知を削除するには、[サイトに通知を表示しない]オプションを有効にします。

特定のサイトからアラートを受信しないようにするには、[ブロック]パラメーターの反対側にある[追加]ボタンをクリックします。

「サイトの追加」ウィンドウで、サイトのアドレスを入力し、「追加」ボタンをクリックします。

プッシュメッセージの受信を設定するには、[許可]オプションの反対側にある[追加]ボタンをクリックします。

開いたウィンドウで、GoogleChromeブラウザで通知を受信できるサイトのリストに目的のサイトを追加します。

Mozilla Firefoxでプッシュメッセージを無効にする方法（1つの方法）

Mozilla Firefoxブラウザ設定を入力し、「プライバシーとセキュリティ」セクションを開きます。 [権限]オプションで、[通知]オプションに移動します。

Firefoxが再起動するまで通知をオフにするの横にあるチェックボックスをオンにします。その後、Mozilla Firefoxブラウザが無効になるまで、プッシュ通知は表示されません。

アラートを管理するには、[設定...]ボタンをクリックします。 [オプション-通知を表示するためのアクセス許可]ウィンドウには、通知が許可またはブロックされているサイトのリストがあります。

サイトの横に「ブロック」ステータスがある場合、このサイトからの通知の送信要求を以前にブロックしたため、このサイトからの通知はコンピューターに表示されません。

ステータス「許可」がサイトアドレスの横にある場合、このサイトからの通知がPCに表示されます。

[Webサイトの削除]ボタンを使用してリストから任意のサイトを削除するか、[すべてのWebサイトの削除]ボタンをクリックしてリストからすべてのサイトを削除できます。

その後、リモートサイトからの新しい通知はコンピュータのデスクトップに表示されなくなります。このサイトに再度アクセスするときは、アラートの受信要求を拒否してください。

このリストにリストされているサイト以外のサイトからの新しいメッセージの受信をブロックするには、[通知を送信するための新しいリクエストをブロックする]チェックボックスをオンにします。

通知を受信する順序の構成を完了するには、[変更を保存]ボタンをクリックします。

Mozilla Firefoxでプッシュ通知を削除する方法（2つの方法）

Mozilla Firefoxブラウザで通知を完全に無効にするには、非表示のブラウザ設定を入力する必要があります。

アドレスバーに次の式を入力します： "about：config"（引用符なし）。開いたウィンドウで、「リスクを受け入れます！」ボタンをクリックします。

新しいウィンドウで、[検索]フィールドに式「dom.webnotifications.enabled」（引用符なし）を入力し、「Enter」キーを押します。

この設定のデフォルトは「true」です。行を選択して右クリックし、コンテキストメニューから[切り替え]を選択します。パラメータの値が「false」に変わります。

Yandex.Browserでプッシュ通知を無効にする方法

Yandexブラウザの設定を入力し、[サイト]タブに移動します。

[サイト]セクションで、[通知の送信リクエスト]オプションに移動します。ここでのアクションには3つのオプションがあります。

送信リクエストを表示します（推奨）。
送信要求を表示しません。
通知を自動的にサブスクライブします。

プッシュメッセージを受信する手順を規制する目的のオプションを選択します。 Yandex Browserですべてのプッシュ通知を完全に無効にするには、[送信要求を表示しない]オプションを選択します。

個々の通知の受信を構成する必要がある場合は、[他のサイト]リンクをクリックしてください。次に、[通知の送信]ウィンドウで、ブロックするプッシュ通知と許可するプッシュ通知を選択します。

[許可]または[禁止]タブを開き、[追加]ボタンを使用して、適切なセクションにサイトへのリンクを追加します。

Operaでプッシュ通知をオフにする方法

Operaブラウザメニューに入り、「設定」コンテキストメニュー項目をクリックします。次に、「詳細」セクションを選択し、「セキュリティ」をクリックします。

[プライバシーとセキュリティ]セクションで、[コンテンツ設定]オプションを選択します。「通知」オプションを見つけます。

[通知]ウィンドウで、[送信前に許可を求める（推奨）]オプションがデフォルトで有効になっています。

ここで、サイトを「ブロック」または「許可」セクションに追加する必要があります。

MicrosoftEdgeでプッシュ通知を無効にする方法

MicrosoftEdgeブラウザー設定にサインインします。「オプション」を選択します。「オプション」ウィンドウで、「詳細オプションの表示」をクリックします。「詳細オプション」ウィンドウで「通知」を選択し、「管理」ボタンをクリックします。

[通知の管理]ウィンドウには、通知を表示する許可を要求するサイトが表示されます。特定のサイトの権限を変更できます。

記事の結論

ユーザーは、コンピューターのデスクトップで受信するブラウザーでプッシュ（プッシュ）通知を個別に無効にして、特定のWebサイトから通知を送信できるようにすることができます。

確かに、少なくとも一度はGoogle Mailを使用したすべての人が、次のような通知を見ました。

Gmailの通知

これらの通知はHTML5通知と呼ばれ、別のタブに切り替えたり、ブラウザーを完全に最小化した場合でも表示されます。

この記事を読んだ後、あなたはあなたのサイトに対して同じ通知をすることができるでしょう。コードはシンプルでクロスプラットフォームであり、通知を直接送信するのに必要なJavaScriptは1行だけです。

また、記事の最後には、詳細に立ち入ることなく通知の送信を開始できる既製の機能があります。

caniuse.comによると、このような通知（HTML5通知）はChrome、Firefox（35以降）、Opera（27以降）、Safari（7.1以降）のブラウザで機能するようになりました。 Internet Explorerは、通知をインターネットでサポートしていません。モバイルプラットフォームを検討する場合、HTML5通知を部分的にサポートしているのはAndroidブラウザのみです。

通知を直接送信する前に、許可を得る必要があります。
これは、Notification.requestPermission（）メソッドを使用して実行できます。

Notification.requestPermission（function（permission）（//パーミッション変数にはリクエストの結果が含まれますconsole.log（ "パーミッションリクエストの結果："、permission）;））;

メソッドを実行した後、許可要求の結果は許可変数に格納されます。

説明付きのさまざまな意味は次のとおりです。

デフォルト-権利を取得するための要求は送信されませんでした。
付与-ユーザーは通知の表示を許可されています。
拒否-ユーザーは通知の表示を拒否しました。

権利を受け取ったら、通知の送信に直接進むことができます。
これは非常に簡単に、1行で実行されます。

Var通知=新しい通知（タイトル、オプション）;

タイトル-通知タイトル、

options（オプション）には次のオプションがあります。

body-通知本文（メインテキスト）。ブラウザやオペレーティングシステムによって切り捨てが異なります（たとえば、Win 8.1のChromeでは、最大長は200文字です）。
dir-通知の表示方向。auto、ltr（左から右）、rtl（右から左）のいずれかになります。
lang-通知言語;
タグ-別の通知に置き換えたり、削除したりするために使用できる一意の通知識別子。
icon-通知に表示される画像のURL（推奨される40×40ピクセルの解像度）。

パラメータを設定して通知を送信してみましょう。

Var Notification = new Notification（ "電球をねじ込むのに何人のTYUプログラマーが必要ですか？"、（body： "Only you！"、dir： "auto"、icon： "icon.jpg"））;

上記のコードを実行した結果

通知には、onclick、onshow、onerror、oncloseイベントハンドラーメソッドもあります。

関数clickFunc（）（alert（ "ユーザーが通知をクリックしました"）;）notification.onclick = clickFunc;

結果：

クリックすると

すべてのための1つの機能

次に、すべてを1つの関数に収集し、いくつかのエラーチェックを追加します。

Function sendNotification（title、options）（//ブラウザがHTML5通知をサポートしているかどうかを確認if（！（ "Notification" in window））（alert（ "ブラウザはHTML通知をサポートしていないため、更新する必要があります。"）;） //通知を送信する権限があるかどうかを確認しますelseif（Notification.permission === "granted"）（//権限がある場合は、通知を送信しますvar Notification = new Notification（title、options）; function clickFunc（）（alert（ "ユーザーが通知をクリックしました"）;）notification.onclick = clickFunc;）//権限がない場合は、他の権限を取得してみてくださいif（Notification.permission！== "denied"）（Notification.requestPermission（ function（permission）（//権利が正常に受信された場合、通知を送信しますif（permission === "granted"）（var notification = new Notification（title、options）;）else（alert（"通知を拒否しました" ）; //ユーザーは通知を表示するリクエストを拒否しました））））））else（//ユーザーは以前に通知を表示するリクエストを拒否しました//この時点でできますが、彼に迷惑をかけることはありません。ユーザーの決定を尊重します。）。

権利要求やブラウザのサポートに気を取られることなく、通知を簡単に送信できる優れた機能が追加されました。

SendNotification（ "Bring back Linus！"、（body： "Testing HTML5 Notifications"、icon： "icon.jpg"、dir： "auto"））;

さまざまなブラウザで関数を実行した結果：

Webプッシュ通知。 それは何ですか、そしてなぜですか？ HTML5通知はシンプルです。GMailWebプッシュ通知のように、1行で通知を作成します