5分で作る「PWAアプリ+通知機能」

５分でPWA＋通知機能を実装してみよう by 市井P - @ichii731 2021年9月15日関連資料

0-1 自己紹介 年齢: 18才（大学1年） 所属: 明治大学IMS学部FMS学科 総合数理 先端メディアサイエンス 住処: 東京23区のどこか 趣味: オタク系全般 市井P アニメ＆ガジェット＆IT特化サイト @ichii731 「オタク総研 with IT」運営代表 兼 編集責任 ウェブライター 主にPHP（Laravel）を利用して個人でWeb開発 オタク総研 Portfolio

0-1 自己紹介 新宿猫で話題のビジョンにて 明治大学の錯視広告プロジェクト の共同メンバー（企画・広報とか） 錯視広告をWeb上でVRで試せる アプリの企画開発者です… これ→ FMS×錯視広告体験

Web Pushの価値と導入する方法

1-0 Web Pushを導入する意義 Web Pushとは… ブラウザの種類によらず、JS APIを用いてブラウザ経由で受信できるようにする仕組み！ Use Case - Web版Twitterの通知 - タイムセールの開催予定 - クーポンの配布 →受動的な情報提供がやりやすくになる！

1-0 Web Pushを導入する意義 Web Push+PWAの成功事例 【受験のミカタ】 Push Notification経由だと - 直帰率が半分以下 - 訪問回数が3倍 - サイトの閲覧時間は7倍以上 という驚異的効果が。 参考リンク ※Pantograph inc.より引用 ※直帰率とは…最初のページだけを見てサイトを離脱してしまったセッションの割合のこと。

1-0 Web Pushを導入する意義 →Push通知は多くの業界にとって効果的。 ※PWAではないがPush通知関連の最新の話題… ホリエモンプロデュースのパン屋「小麦の奴隷」は 【Push通知＝最強のマーケティングツール】 と銘打ってリピートされやすい体制を作っている。 （ネイティブアプリだけどWebにも言えること） 結構美味しいんで食べてみてください。

1-1 Web Pushを実装する２つの手段 ◯自前でサーバーを立てて実装 Node.jsなどを用いて自前で実装する方法。 【利点】 - 外的な制約に縛られることなく利用可能（リクエスト制限等） 【欠点】 - 実装に時間がかかる - Node.jsなどJavaScriptの知識が追加で必要

1-1 Web Pushを実装する２つの手段 ◯外部サービスを利用して実装 【利点】 - Webページに埋め込むだけで実装できる - 通知実装によるサーバーリソースの浪費が格段に下がる - アナリティクス等の解析機能が優秀 【欠点】 - APIの利用制限等の制約がある

1-1 Web Pushを実装する２つの手段 ✓ PWAの長所「インスタントさ」を損ないたくない ✓ 時間的・知識的コストを最大限低くして“爆速実装”を実現したい ✓ 非エンジニアにもわかりやすいGUI・簡単操作で使いたい 外部サービスを活用！

1-2 FCM vs OneSignal メッセージングソリューションの２大巨頭 - Firebase Cloud Messaging - OneSignal のフリープランを比較してみる。 使いやすいかは「中・小規模事業」を基準に考慮。

1-2 FCM vs OneSignal FCM 項目 OneSignal - 最大送信数 10,000 △ 管理のしやすさ ◯ ◯ A/B Test ◯ × 時間指定送信 ◯ ◎ アナリティクス ◯ ◯ 通知登録のしやすさ ◎ × 画像の添付 ◯ 結論：今回はOneSignalを使うけどお好きな方どうぞ…

OneSignal×PWAで実際に作ってみよう

2-0 前提条件（説明するにあたって） ・予めnginxやApacheでWebサーバー環境を作っておく！今回はApache。 （勿論外部サービスを使うので静的ホスティングサービスでも可。） ・HTML・バニラのJavaScriptでコンテンツを事前に作成 →取り敢えずHTML+VanillaJSにしとけば色々活用できるから… 特にLaravelとかはファイルの位置入れ替えるだけで対応できるし。 ・SSL環境が必須！ →頑張ればlocalhostや非SSLでも出来るらしいが無難にLet’s Encryptで対処。

2-1 OneSignalを設定する アカウントを作成 GitHub連携でとにかく時短

2-1 OneSignalを設定する Appを新規作成 1.New App/Websiteをクリック 2.Appの名前を入れてWebを選択！

2-1 OneSignalを設定する Appを新規作成 3.サイト情報を入力 4.SDKをダウンロード

2-1 OneSignalを設定する Appを新規作成 5.SDKを任意の位置に配置 SDKの位置はちゃんと考えて… SW登録したら変えるの大変… 6.表示されたコードをheadタグにコピペ これでOK！

2-2 既存サイトをPWAに対応させる Manifest.jsonを整備 時短 PWA Manifest Generator

2-2 既存サイトをPWAに対応させる ServiceWorkerを整備 時短 Workbox CLI SWを手軽に扱うためのツールキット「Workbox」のCLI版。Google謹製。 workbox-sw ＋ workbox-webpack-pluginでも良かったけど、 素のJS環境で検証するため、なるべくWebpackとかを使いたくなかったから。あと普通に時間短縮。 インストールは npm install -g workbox-cli で一発。

2-2 既存サイトをPWAに対応させる ServiceWorkerを整備 ①ウィザード形式で設定ファイルを生成 workbox wizard を実行して色々聞かれるので答えるだけ。 これで設定ファイル（workbox-config.js）が作成される。

2-2 既存サイトをPWAに対応させる ServiceWorkerを整備 ②ServiceWorkerのJSを生成 workbox generateSW workbox-config.js を実行→勝手にSWを作ってくれる！ これでsw.jsが作成されるので配置。 あとはHTML内にServiceWorkerを登録させる処理を書くだけ！

2-3 PWAが使えるか確認&Push通知を許可 インストールしてみる

2-3 PWAが使えるか確認&Push通知を許可 通知の受信を許可する Windows Mac OS Android

2-4 OneSignalで通知を作成

動作確認・利用状況

3-1 動作テスト タイムゾーンごとの時間指定・送信したい端末OSを指定 もできちゃいます！

3-1 動作テスト

3-1 動作テスト 通知タップ・押下時の動作 ↑ 登録中の場合グレーアウトする

3-2 通知アクティビティが優秀！ 各通知のアナリティクス 通知ごとに - 到達完了・到達失敗の可否 - 送信数 - 通知の反応率・時間

3-2 通知アクティビティが優秀！ アプリ全体のアナリティクス - 通知を許可している数 ユーザー数の推移 デバイス割合 MAU

ハマったところ・まとめ

4-1 ハマったポイント OneSignalをPWAで使うとき… OneSignalのSDKファイルにServiceWorkerのファイルを一緒に読み込む必要があった。 OneSignalドキュメント

4-1 ハマったポイント WorkboxCLIで楽しようとした結果やらかした… Workboxで迂闊にconfigを見ずに生成してしまったから面倒くさいことになった。 キャッシュ戦略（workbox-strategies）をhandlerで指定してあげないといけなかった。 CacheOnly 基本的にキャッシュのみを参照 NetworkFirst 毎回サーバーにリクエストを飛ばす リクエストが失敗した場合にのみキャッシュされているリソースを参照 Web.devドキュメント

4-2 まとめ Web Pushは効果的！ 自前で作るのもいいけど外部に頼ったが早い＆簡単。 頑張れば５分でPWA対応＆Push通知実装できる！！ これでまた一つWebアプリがネイティブアプリに 近づいてきたのではないでしょうか…

ご清聴ありがとうございました。 以下ページに当スライドを掲載させていただきます！ あ、Twitter@ichii731も序によろしくお願いします… ic731.net/docs/0915_PWA.html