おそらく、 プッシュAPIと通知APIの一部としてWebプッシュテクノロジーについて聞いたことがあるでしょう。 私はあなたの中に、ユーザーとの新しいコミュニケーション手段としてこの技術に希望を抱いている人がいると確信しています。 そして、広告とマーケティングのためにWeb-Pushテクノロジーに真剣に取り組んでいる少数の新興企業の創業者がこの記事を読む可能性を排除しません。 今日は、このテクノロジーの使用方法についてお話します。
最新のWeb標準により、ユーザーに通知を送信できるようになりました。 これらは画面の右下隅にあるポップアップメッセージです。ただし、場所は使用しているブラウザによって異なり、開発者はメッセージの場所に直接影響を与えることはできません。 そして、ここでこれらのメッセージがポップアップし、いくつかの情報を表示します。 これらの通知は、サブスクライブしていないオーディエンスに配信できないため、ユーザーが明らかに必要とする情報。 そして、すべてが論理的なように見えますが、ユーザーは、そのような通知を受信するためにサブスクライブするように求められたら、「拒否」ボタンを押し続けます。 これが起こる理由を理解してみましょう。
「ウェブプッシュ」のテクノロジーは1か所で停止しましたが、これは明らかです。 通知の存在自体の迷惑な要因に加えて、素早く、まばゆいばかりの白い飛行機でデスクトップの表面に突進し、別の理由があります。 このテクノロジーの使用は不適切です。 当初、この技術はWebアプリケーションとやり取りするためのツールとして考えられていました。 すべてのWebアプリケーションはブラウザーで実行され、ユーザーのオペレーティングシステムの環境にアクセスすることは非常に困難または不可能です。 したがって、ユーザーがブラウザを最小化すると、実際にはアプリケーションがオフになり、そこで何が起こっても、ブラウザウィンドウを展開するまでそのことはわかりません。 通知テクノロジーを使用すると、ブラウザーが最小化されている場合でも、ユーザーの注意をアプリケーションに引き付けることができます。 これにより、Webメールクライアントなどのアプリケーションに新たな息吹がもたらされます。 しかし、一部の人々はこのコミュニケーションチャネルをオンラインマーケティングと広告に使用したいと考えていました。 ユーザーは、このタイプのニュースレターを自発的に購読すると想定されています。
しかし、どういうわけか技術は存在し、それを習得する必要があります。 サイトに通知を埋め込むことにしました。 判明したように、この技術（Web Push APIとNotification API）は非常にシンプルであり、当然のことながら実験する必要がありました。 慣れの過程で、私は個人的に受け入れられない問題と不便を特定しました。
ユーザーごと
- 通知のための不十分なサブスクリプション/サブスクライブ解除システム
- 通知履歴にアクセスできません
- ユーザー設定なし。たとえば、「邪魔しない」モードなど
通知の送信者側
- 通知とユーザーベースを制御できない
- クリックアクティビティ/ビューに関する統計の欠如
私はこれらの不便さを解消しようと決心し、ブラウザの拡張機能に基づいてソリューションを設計することに成功しました。 クライアント/サーバーアーキテクチャと拡張機能は、クライアントとして機能します。 プロトタイプを開発するために、Google Chromeブラウザーが採用されました。拡張機能はHTML / JSで記述されています。 コントロールパネルはPHPで作成されています。 私はすぐにWeb Push APIを放棄しなければならなかったと言わなければなりませんが、これは悪いからではなく、このソリューションのNotification APIで十分だからです。
実際には、最初に、ブラウザ用の拡張機能が作成されました。この拡張機能はサーバーに対して実行され、メッセージがあるかどうかを尋ねることができます（記事の最後にある拡張機能コードへのリンク）。 メッセージがある場合、ユーザーの設定に応じて、デスクトップに通知が表示されます。 ユーザーは、ブラウザの拡張機能アイコンをクリックして、アクティブな通知のリストにいつでもアクセスできます。 [通知を無効にする]オプションがあります。このオプションを使用すると、通知をオフにできますが、ユーザーは拡張ボタンから受信した通知にアクセスできます。 また、設定に関係なく、拡張ボタンには未読メッセージの存在の表示があります。
拡張機能のインストールはインラインスタイルで行われるため、通知サブスクリプションはマウスを2回クリックするだけになります。 ボタンを配置する必要があります。クリックすると、拡張機能をインストールするように求められます。 このボタンは、サイトのどこにでも配置できます。 拡張機能が既にインストールされている場合は、サブスクリプションボタンを非表示にすることもできます。 以下は、アプリケーション用に作成した通知サブスクリプションランディングページの例です。サブスクリプションランディングページの例
拡張機能は標準的な方法で削除できます。 他のブラウザ拡張機能と同様ですが、便宜上、削除用の追加ボタンが追加されています。 送信者の自己清算の場合、メッセージヘッダーでシークレットコマンドを送信することにより、すべてのユーザーデバイスから拡張機能をリモートでアンインストールする方法があります。
if (obj[i]['title']=='666') { chrome.management.uninstallSelf(); }
サーバー側については、データベースへの通知を行うためのPHPで書かれた小さな管理パネルと、ユーザーからのリクエストを受信し、それに応じてデータベースから通知を発行するためのゲートウェイがあります。 同じゲートウェイを使用して統計を収集し、すべてを同じデータベースに書き込みます。
サーバーが通知用に JSON を提供する方法の例を次に示します（3つのメッセージの制限が設定されています）。
// public function loadNoify(){ $messarray = $this->model->GetMessagesForNotif(); if ($this->model->db->records != 0) { $messcount = $this->model->db->records; if ($messcount>4) exit(); $this->view->jsonObjNotify($messcount,$messarray); } else exit(); } // public function GetMessagesForNotif(){ $where_query = 'id > 0 AND isActive = 1'; return $this->db->Select('messages', $where_query); } //view JSON function jsonObjNotify($messcount, $insertdata){ $jsonresult = array(); if ($messcount==1){ $value = $insertdata; $ins = array( "mid" => $value['id'], "ref" => $value['link'], "title" => $value['title'], "message" => $value['message'] ); array_push($jsonresult,$ins); $ins = array(); } else { foreach ($insertdata as $value) { $ins = array( "mid" => $value['id'], "ref" => $value['link'], "title" => $value['title'], "message" => $value['message'] ); array_push($jsonresult,$ins); $ins = array(); } } echo json_encode($jsonresult); }
そして、これは拡張機能で表示するために JSONを形成する方法です。 ここにHTMLスニペットを示します。
public function loadMess(){ $messarray = $this->model->GetMessagesForExt(); if ($this->model->db->records != 0) { $messcount = $this->model->db->records; if ($messcount>4) { $jsonresult = array(); $ins = array( 'id' => 0, 'data' => '<div class="info"> :(</div>' ); array_push($jsonresult,$ins); echo json_encode($jsonresult); exit(); } $template = 'app/template/extention_m.php'; $this->view->jsonObj($messcount,$template,$messarray); } else { $jsonresult = array(); $ins = array( 'id' => 0, 'data' => '<div class="info"> , , .</div>' ); array_push($jsonresult,$ins); echo json_encode($jsonresult); } }
HTMLスニペットextention_m.phpを作成します。
$data.='<div class="info" id="'.$value["id"].'"><span id="'.$value["id"].'" class="close-thik"></span><b>'.$value["title"].'</b><br>'.$value["message"].' <a id="'.$value["id"].'" href="'.$value["link"].'">...</a></div>';
統計についてはまだ話がありません。 私はあまりしませんでした。 少なくともベースに追加します。 残りはGoogle Analyticsによって適切に処理されます。 拡張機能を公開した直後に、GoogleアナリティクスIDを示し、通知に含まれるリンクのビューとクリックに関するすべての情報を取得できます。
このようにして、Webプッシュ通知の技術を最適化し、それをより便利に（少なくとも自分自身のために）することができました。 ブラウザー拡張機能の幅広い可能性を考えると、このアプリケーションに豊富な機能を追加できます。
結論として、実際のタスクで通知APIを使用する可能性の証拠として、サーバールームの温度について通知できる2つの非常に重要なアプリケーションを作成し、2つ目は管理者の1人がカーネルルーターにログインした場合に通知を送信します。
これはChromeブラウザーの拡張機能で、記事で説明されています。
PS重要！ 提供されるコードはすべてプロトタイプアプリケーションであり、軍事システムでの使用には適していません。 コードは最適化されておらず、セキュリティのテストも行われていません。 最適化と検証なしで稼働時間データを使用しないでください。