Experts.jp日本に、もっとエキスパートを。GoogleでChromeの開発をしている保呂毅です。Preloadという新機能をがんばって実装しています。Worker周辺の最近(ここ1年くらい)の動向に関する発表をさせていただいきました。今回は、この発表の内容を振り返りたいと思います。Workerの説明します。下のコードのようにnavigator.serviceWorker.registerというAPIで登録する、バックグラウンドで動作するJavaScript実行環境です。'./'});登録されたServiceWorkerでは、ページからのネットワークリクエストを横取りすることができます。Worldという文字列をページに返しています。Notificationsという機能も備えています。Workerは新しいAPIでして、まだ利用できるブラウザが限られています。ready?というページに各ブラウザの対応状況が書かれています。ChromeとFirefox、Opera、Samsungのブラウザは対応していて、Edgeは開発中、Safariは検討中となっています。Messaging)のサーバーにメッセージをポストすると、それがブラウザに届いて通知を表示できるというものです。Messaging)から名前が変わりました。Worker上のPushイベントハンドラです。WebサービスのサーバーからFCMのサーバーにPOSTリクエストすると、このイベントハンドラが呼びだされます。いうAPIで下のような通知を表示しています。message.’で、アイコンにmessage.pngを指定しています。{event.notification.close();clients.openWindow('/messages');});このコードはNotificationClickイベントハンドラで、先ほどの通知をクリックした際の処理を書いています。このコードでは、通知を閉じて、messagesというページをopenWindowで開いています。49までは、Pushメッセージにデータを含めることができないという制限がありました。APIを使ってWebサーバーに問い合わせる必要がありました。50からは、Pushメッセージ自体に暗号化したデータを含めることができるようになりました。Worker側ではこちらのコードのようにPushEventにdataというプロパティがついて、データを読めるようになります。サーバーからどう送信するかの詳細はこちらのURLで説明されているので、興味のある方はぜひ読んでみてください。ありますので、Node.jsをサーバーで使っている方はこちらを使うといいかと思います。この機能を使うと上の絵のように、ボタンを追加できるようになります。'reply.png'}]});コードを見ると、Actionsという項目で指定しているのが分かるかと思います。各ボタンに対応する、actionの文字列と、titleの文字列と、iconの画像を指定しています。Eventこのボタンをクリックすると、NotificationClickイベントハンドラが実行され、NotificationClickEventのactionを見ることで、どのボタンがクリックされたのかがわかります。messageId);}});このコードの場合、likeがクリックされたらsilentlyLikeItem()というメソッドを呼び出しています。Replyがクリックされた場合は、該当するメッセージのページを開いています。ボタン以外の部分がクリックされた場合も同様です。ちなみに、メッセージを表示するURLのメッセージIDにnotification.dataの値を使っていますが、こちらはさきほどの通知を表示する際に指定したdataが渡ってきています。この値は、Pushイベントのdataから取得するといいかと思います。Pushを実現するためには、以下のような手順が必要でした。この認証方法はFCM独自のプロトコルです。いう標準化されたプロトコルでサーバー認証することでFCMへの事前登録が必要なくなりました。詳しくはこちらのURLを御覧ください。Workerを考えます。51までは、このような処理をした場合、上のアニメにあるようにレスポンスを最後まで読んでからでないと、ページに返すことができませんでした。52から、Streamの新しい機能を使うことで、サーバーからのレスポンスを逐次処理しながらページに返すことができるようになりました。具体的な例で解説します。Worker内で文字列連結してページに返す。