PWAでwebプッシュ通知を作る (3) - ブラウザのデバッグ機能を使用してプッシュ通知を受け取る

はじめに

watanabeです。 前回の記事でWebページをPWA化しましたが、今回の記事ではプッシュ通知を受け取りその処理をする部分を実装します。

プッシュ通知のAPIについて

一番初めの記事で、バッググラウンドで動くService Workerによりwebページでプッシュ通知が実現できることに触れましたが、 Service Workerが提供している以下のAPIを使用します。

• Push API…サーバからメッセージを受け取る
• Notification API…プッシュ通知をユーザに対して表示する

※細かい仕様は以下のページで確認できます。

• プッシュ通知 API - Web API インターフェイス | MDN
• Notifications API を使用する - WebAPI | MDN

実装する

前回PWA化した招き猫のwebページで プッシュ通知を受け取れるように以下の手順で実装していきます。

1. ユーザの許可を得る部分
2. プッシュ通知を受け取って表示する部分
3. プッシュ通知をクリックしたときの処理

1. ユーザの許可を得る部分

プッシュ通知を受け取るかどうかユーザの許可を得るポップアップを表示する部分をメインのjsに追加します。 こちらにはNotification APIを使用しています。

Notification.requestPermission(function(status) {
  console.log("通知の許可:", status);//コンソールに許可されたかどうかを表示
});

2. プッシュ通知を受け取る部分

実際に受け取ったときの処理はService Workerのjs内に記述します。 「push」イベントのリスナーとして登録します。 プッシュ通知で表示するメッセージやアイコンも定義します。

※定義できるデータの仕様は以下のページで確認できます。 ServiceWorkerRegistration.showNotification() - Web APIs | MDN

self.addEventListener("push", function(event) {
  console.log("Push Notification Recieved", event);
  if (Notification.permission == "granted") {
    event.waitUntil(
      self.registration
        .showNotification("受信しました", {
          body: "お知らせです。",
          icon: "iconV2.png"
        })
        .then(
          function(showEvent) {},
          function(error) {
            console.log(error);
          }
        )
    );
  }
});

3. プッシュ通知をクリックしたときの処理

通知をクリックしたときの処理もService Worker内に記述します。 「notificationclick」イベントのリスナーとして登録します。 今回はクリックするとデモページのURLを開くようにしました。

self.addEventListener("notificationclick", function(event) {
  event.notification.close();
  event.waitUntil(
    clients.openWindow("https://watanabe0601.github.io/sw.github.io/02/")
  );
});

ソースコード全体はこちらを参照して下さい。

デバッグ用のプッシュ通知を試す

プッシュ通知は送信するサーバが必要なのですが、今回まだ用意できていないため デバッグ用のプッシュ通知で動作するかを確認します。

Google Chromeブラウザにはデバッグ機能がありますが 2018年8月現在(バージョン: 68.0.3440.84 )プッシュ通知が使用できないようなので 今回、Firefoxのデバッグ機能を用いることにします。

参考）Worker をデバッグする about:debugging - 開発ツール | MDN

1. まずデモ用のページを開きます。 通知を受け取るかどうかの確認メッセージが表示されるので「通知を許可する」を選択します。

2. アドレスバーに「about:debugging#workers」の文字列を入力すると現在動いているServiceWorker 含むWorkerの一覧が表示されます。 （初回アクセス時は画面上部に警告が表示されるので「マルチコンテンツプロセスをオプトアウトする」をクリックして許可して下さい。） デモページのWorkerで「開始」をクリックするとデバッグ可能になります。 その状態で「プッシュ」をクリックすると設定したメッセージのプッシュ通知を受信します。

3. 通知をクリックするとデモページを新しいタブで開きます。

次回予告

次回はプッシュ通知を送信するサーバを実装する予定です。

参考文献：プログレッシブウェブアプリ PWA開発入門 (NextPublishing)

採用情報

朝日ネットでは新卒採用・キャリア採用を行っております。

• 新卒採用｜朝日ネット
• キャリア採用｜朝日ネット

microservicesはじめました (2)

はじめに

前回はmicroservicesの道具としてgRPCを触ってみたので今回は小規模サービスにしてみます。

オリジナルの音声アシスタントを作ろう (2) - Media Capture and Streams API

はじめに

こんにちは。朝日ネットでWebアプリケーションの開発を行っている tommy です。

前回は Web Speech API を使ってブラウザで音声認識をやってみました。 ただし、現状では対応ブラウザが少ない上に、まだ不安定という問題がありました。

そのため、今回はブラウザでマイクの音を拾うことができる API の Media Capture and Streams を使ってみようと思います。

グラフデータベースNeo4jを使ってコードの依存関係を解析する

はじめに

開発部の tasaki です。 依存関係 (dependency) という言葉は「クラスの依存関係」「ライブラリの依存関係」「命令の依存関係」「タスクの依存関係」などなど、コンピュータを扱う上では分野を問わず頻出する用語です。 依存関係はグラフ構造 (dependency graph) として表すことができ、このデータをグラフデータベースである Neo4j に入力しておくことで効率よく関係性を検索できるようになります。

今回は例として jdeps と簡単な Python スクリプトを使って Java のパッケージの依存関係を Neo4j に登録し、クエリ言語である Cypher を用いて依存関係を解析してみます。

ISPを構築してみる (2)

朝日ネットで業務システムを開発しているkakoです。前回の記事では、AsahiNet内のプライベートASになんちゃってISP（KakoNet）を構築する、という目標の全体構想を述べました。今回はそれを実現するための検証・構築手順を提案したいと思います。また最初の検証として、VirtualBoxの内部ネットワークにVyOSとUbuntuを構築した手順を記載します。

PWAでwebプッシュ通知を作る (2) - 簡単なwebページをPWA化してみる

今回のテーマ:PWA化の具体的なコードの書き方

watanabeです。 前回触れたとおり、PWA化に必要な具体的なコードの書き方を説明します。

例として、以下のwebページをPWA化してみます。 真ん中のまねき猫の画像をクリックするとランダムに台詞を表示する簡単なスクリプトで書かれたページです。 webページなので一度アクセスしてもオフラインでは閲覧不可ですが PWA化することで、オフラインでも閲覧可、またアプリのような挙動にすることができます。

microservicesはじめました (1)

はじめに

朝日ネットで開発をしています。muratamです。 あたらしいプロダクトをmicroservicesで作る…ということがあるかもしれない、ということで軽く触れてみたいと思います。 今回は、GoとgRPCを使ってみます。