はじめまして。FRESH!でディレクターをしています、西野です。
今回は、先日FRESH!で対応したWebプッシュ通知機能についてご紹介したいと思います。

Webプッシュ通知機能をリリースするに至った経緯

FRESH!は生放送サービスなので、リアルタイムで番組開始通知を受け取ることが重要です。
しかし今までPCのFRESH!では、サイトを開いていないと番組の開始を知ることができず、好きな配信主がいきなり配信を始めた場合などに気付くことができませんでした。

▼サイト上に番組開始通知が届いた様子

一方、Webプッシュ通知機能を使えば、FRESH!のサイトを開いていなくても番組の開始を知ることができるようになります。
PCユーザーからの「開始通知を受け取るためにアプリをダウンロードしている」という声もあり、必要性は十分に感じていました。

Webプッシュ通知機能の紹介

FRESH!にログイン後、通知設定を許可することで、フォローしているチャンネルの番組開始通知がスクリーン上に届きます。そのときFRESH!のサイトを開いている必要はありません。

設計面で苦労したこと

Webプッシュ通知機能の仕様を決めていく中で、ややこしかった部分やつまづいた部分など、苦労したことをいくつか紹介します。

ブラウザ毎で異なる挙動の把握

まずはWebのプッシュ通知に関するブラウザの挙動について理解する必要がありました。現在はChromeとFirefox、Operaでしか通知機能に対応しておらず、ブラウザ毎の挙動も微妙に異なります。

例えば以下の通知許可訴求では、Chromeでは右上の[×]ボタンを押すことで、一時的にブロック状態へと自動で切り替わります。また、Firefoxでは[このサイトでは今後も同様に処理する]のチェックボックスを外して[通知を許可する]を選択しても通知を送れません。ちなみにこの問題に対してどのように解決したかは、明日公開予定の実装編をご覧いただければと思います。

また、Chromeではアドレスバーの鍵アイコンから設定を切り替えることができますが、Firefoxでは設定の削除しかできないなど、設定の変更方法についてもそれぞれで異なります。

通知機能に関する設定項目の設計

FRESH!では、ブラウザで通知を受け取るかどうかの設定に加えて、番組開始通知を受け取るかどうかをチャンネル毎に設定できなければなりません。
そのため、最終的に通知を受け取るかどうかは、ブラウザ設定とチャンネル設定のセットで決まります。さらにブラウザの設定はブラウザ毎、チャンネルの設定はユーザーアカウント毎に保持することにしたため、多くのパターンを考慮しなければいけませんでした。

ユーザーに対するケア

WebサービスにおけるWebプッシュ通知機能の導入はまだ前例も少なく、ユーザーにとっては馴染みのない機能です。
そのうえ設定がややこしく、拒否反応が出やすい機能だと思います。
そのため、少しでもシンプルでわかりやすい設計になるように心がけました。

例えば、通知設定の変更は、ブラウザの設定画面へ誘導するのではなく、ユーザーの設定状態に合わせて最も簡単な手順を踏めるように表示しています。

▼ブラウザ毎の変更方法に対して、ユーザーに提示する手順を赤字にしたもの

▼上記の手順を画面に落とし込んだもの

また、サイトに訪れたらいきなり通知許可訴求が表示されるサービスをたまに見かけますが、ユーザーが安心してプッシュ通知を受け取ることができるように、FRESH!では初回のみチュートリアルを表示しています。

最後に

いかがでしたでしょうか。実際にWebでプッシュ通知を受け取ると、とても便利で驚きます。まだリリースしてすぐなので、これからプッシュ通知の許可率や、プッシュ通知経由での視聴率、ユーザーの継続率などガシガシ向上させていきたいと思っています。
明日はWebプッシュ通知機能の具体的な実装に関する記事を公開予定です。プッシュ通知が重要なサービスにおいては、ぜひそちらも参考にして導入を検討してみてください！