frontendこちらも名前はお好みで。これでとりあえずはディレクトリができました。サーバー側の準備サーバー側から触っていくことにします。"5.2.4")を書き加え、ついでに今回必要なものは全てありがたいライブラリを使わせていただくので、build.sbtにあれこれ追記します。eclipseをしておきます。次は、サーバーとクライアントで通信をするのですが、このままだとクライアントからサーバーにリクエストを送ってもCORSで弾かれてしまいます。CORSについては割愛します。}}と書き加えた上で(コメント部分はもちろんなくても)、appの下にFilters.javaというクラスを作成します。Eclipseで普通にクラスを作成するとデフォルトパッケージの下に来ますが気にしません。}}というのを貼り付けましょう。PlayFrameworkのHPからサンプルをダウンロードすると初めからあるような気がするので、そこからコピペしても良いと思います。これでCORSで弾かれなくなりました。ここまででサーバー側の設定はおしまいです。次はクライアント側の準備に移ります。frontendディレクトリに移って、まずはこのプロジェクトをPWA化しましょう。デスクトップ通知にはサービスワーカーが欠かせないらしいので、そのためです。サービスワーカーが何であるのかについては世に遍在している説明を発見していただければ。-Dクライアント側の設定はこれでおしまいです。CLIさんが必要な記述も全部してくれていますので。ここなどを参考にしています。参考ページではindex.htmlとmanifest.jsonを修正していますが、必要ありませんでした。いうわけで、これでサービスワーカーを使えるようになりました。ここまでで必要な準備が終わったのでやっと本題に入れます。デスクトップ通知の実装へ。鍵ペアの生成には初めに準備しておいたライブラリを使わせていただきます。ECDSAというのがどういうものなのかよく知りません。知りませんが、それでも使えるというのが大事ということで。鍵ペアですが、実は毎回作成する必要はなく、アルゴリズムに従って生成された鍵ペアさえあれば良いので、一度作ったものをそのままペタッ。一度生成すべく、Eclipseでapp下に何か適当なメインクラスを作成します。本当はパッケージなど分けた方が良いのでしょうが、そういう細かいことは必要に迫られたときに。表示するだけならこのように、VapidKey.javaのようなクラスを作成します。}}全部mainに入れれば良いじゃんと思いつつ。何もせずにこれを実行すると、たぶん「メインクラスが見つかりません」などと言われます。compileをして、プロジェクトをインポートし直し、ここにあるように、ビルドパスを設定します。開いたダイアログでtarget/scala-2.12/classesにチェックを入れてOKそしたら実行できるようになるはずです。できたらコンソールにPublicKey:BP198Ghlpaac41UMKrRvYyNt56tt7JCcgusX1JSh1e3W-kApskF2BLqCNi0c2GBjPx5BflPezwvi0OwVsaGTclI=PrivateKey:Kzh4c_SbGLXoybns7pCiRdvhx9b0m_H5AEyD8DD9Bvw=のように出力されるのではないかと。繰り返しになりますが、アルゴリズムに従って生成された鍵ペアさえあれば良いので、上記のものをそのまま利用してもらっても大丈夫なはずです(なのでこのクラスを作らずに上の鍵を使うのでも良いような)。セキュリティ的にどうなのかというのはひとまずおいといて。生成したサーバー鍵をクライアント側に送信クライアントからリクエストを送って、そのレスポンスでサーバー鍵を渡します。controllers.HomeController.vapidKeyとしておくことで、この/vapidKeyにリクエストが送られたときにサーバーの公開鍵を返すようになります。取得した諸々の情報をサーバー側へ送信クライアントでPush通知を受け取った際にデスクトップ通知として表示4つまとめてやります。trueにするとユーザーから消されるるまで表示し続けられます。tag名が同じものはそれ以前からある通知に上書きされるようです。してかよく分かりませんが、Notificationをnewすると表示されるみたいです。必要なものは全てpushSubscriptionに入っているので、アクセスすると取れます。送り先は/webPushという場所にしました。}}として、あとComponentでHttpClientを使うために、app.module.tsにちろっと追記しておきます。(略)})サーバー側からメッセージをエンドポイントへと送ると、プッシュサーバーがクライアント側にPush通知を送ってくれます。あとはそれを受け取ってあれこれするとデスクトップ通知ができるのです。ここでそのプッシュサーバーからの通知を受け取る役目を負っているのが、constructorの中のthis.swPush.messages.subscribe()です。ちなみに、Notificationのオプションはここに載っているものが使えるのではないかと勝手に思っています。properties」のところですね。一つ引っかかったところがありまして、pushSubscriptionに入っているならそれをそのまま返せば良いじゃないかと初めはなったのですが、そのまま返すとなぜか文字が欠けてしまったりします(この理由がよく分かってません)。文字列に変換してから必要な分だけを渡しています。いうわけで、送信できるようになりました。当然のことながら、上記でクライアントから送った情報を受け取る窓口が必要になります。ここの受け取り方はクライアントからどう送るかによって色々です。controllers.HomeController.webPushというような感じで追記しておくと、クライアントから送られて来た情報がコンソールに出力されると思います。ここまで来たら次はサーバーとクライアントで通信させる必要があるので、サーバーとクライアントをそれぞれbuildします。http-server突然出て来たhttp-serverというのは、ありがたい記事によるとこのhttp-serverをインストールしておくと、任意のディレクトリでhttp-serverというコマンドを実行するだけでそのディレクトリをドキュメントルートにしたウェブサーバーが起動します。http-serverをしておけば良いのではないでしょうか。あって困るものではないでしょうから。4rIMQM5HTe04kclcRU2Rhw==というように出力されるのではないかと(上手くいかなかったらリロードなどを)。ちなみに、サーバーの鍵ペアはここに載せてあるものでも使えますが、エンドポイント等はここにあるものをコピペしてもたぶん送信できませんのでお気をつけて。あとでPush通知を飛ばしたときに受け取らないといけないので、フロント側は動かしたままに。簡単に送信できてしまいます。}}これを実行すると、クライアントへとPush通知が飛ぶようになります。compileをしてEclipseでインポートし直すなどしてみてください。それで実行できるのではないかと思います。良い方法があるように思いつつ。ここまでで必要な準備は終わったので、あとはさっき作ったWebPush.javaを実行してメッセージを送ってあげればデスクトップ通知ができるのではないでしょうか。いうわけで実行しましょう!でけた!!!!めでたしめでたし。いうわけでデスクトップ通知の大枠はできたのではないかと思いますので、あとは煮るなり焼くなり炙るなりすればきっと素晴らしいデスクトップ通知が。こんな感じで、ほぼ入門程度の技術研修(それもJavaだけ!!)を終えたばかりの新卒なのに「AngularとPlay使ってデスクトップ通知実装してね!」などと突然言われてしまうような会社ではありますが、僕みたいな初心者でもこうしてちゃんと実装しきるところまで助けてもらえますので、もしよければどうぞ。fresh-recruiting.goalist.co.jpお待ちしております。関連記事2018-10-23Angular6とPlayFramework2.6でWebアプリの雛形制作(リクエスト送受信)こんにちは。この間Angular6とPlayFramework2.6で...2018-10-12Firebase(FCM)を用いたAndroid(Kotlin)でのプッシュ通知こんにちは。Treat!渡部です。最近食欲がやばいです。栗、芋、...2017-08-31iOS10でプッシュ通知を実装してみたこんちは。今回はプッシュ通知についてです。»プロフィールゴーリストのエンジニア達のブログです。Angularアプリをデプロイす!月別アーカイブリンクセールスブログデザインブログゴーリストブログスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。