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

タグ

スライド概要

Webアプリをネイティブアプリのように使える技術「PWA」.そんなPWAをとても簡単に作る方法と通知機能を実装する方法をご紹介します.
※2021/09/15にPWA Night 31にて発表させていただいた資料を掲載しております.リンクはQRコードから飛べます.

profile-image

市井

@ichii731

作者について:

Japanese Web Developer / First year University Student / Media management representative of "GEEK LAB"

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2022-01-14 02:24:49

各ページのテキスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25. 2-4 OneSignalで通知を作成

26. 動作確認・利用状況

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

28. 3-1 動作テスト

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

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

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

32. ハマったところ・まとめ

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

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

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

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