--- title: PWAを導入した理由 tags: #pwanight author: [だら](https://www.docswell.com/user/dala00) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/GY79WY2873.jpg?width=480 description: https://pwanight.connpass.com/event/225022/ published: October 16, 21 canonical: https://www.docswell.com/s/dala00/56VP4K-2021-10-16-145102 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/GY79WY2873.jpg) PWAを 導入した理由 on PWA Night MATSURI # Page. 2 ![Page Image](https://bcdn.docswell.com/page/5G78N65ZJD.jpg) 自己紹介 名前：だら ● ● ● ● ● Twitterでよく過ごしています（@dala00） フロント、バックエンド、アプリなど何でもやってるフリーのWebエンジ ニア 趣味でもWebサービスやアプリを色々リリース 商業出版したりZennで本を書いたり 色々文章を書くのは嫌いじゃない # Page. 3 ![Page Image](https://bcdn.docswell.com/page/ML7LP9Y1JR.jpg) 技術記事投稿コミュニティ Crieit # Page. 4 ![Page Image](https://bcdn.docswell.com/page/54EM4ZN5JW.jpg) 技術記事投稿コミュニティ Crieit ● ● ● ● ３年ほど前にリリース Qiitaみたいなサービス なんでも書きやすいサービスにしたかった #web1week １週間でWebサービスを作るイベント # Page. 5 ![Page Image](https://bcdn.docswell.com/page/ZPERW6DZJ9.jpg) 新規登録、ログイン ソーシャルログインのみ # Page. 6 ![Page Image](https://bcdn.docswell.com/page/NP7XPM11JX.jpg) メールアドレスのことを考えさせたくない ● よくわからない個人のサービスに入力したくないのでは ○ ○ ○ ○ ● 実際にはソーシャルログインも色々権限ついてると怖い ちゃんと適切に扱っていれば問題ない 使いたい人が使ってくれれば問題ない （ただし実際にはソーシャルログイン時に取得はしている） サービスによってはメールアドレス不要なので取らないほうがいい ○ ソーシャルログインの権限も最小限に # Page. 7 ![Page Image](https://bcdn.docswell.com/page/637KDG2MED.jpg) パスワードの事を考えさせたくない ● 個人サービスだと平文保存していたり、収集しての悪用を疑われる可能性？ ○ ○ ○ ○ フレームワークのデフォルトの機能でちゃんとハッシュされてることは多い 適切に扱っていれば問題ない 使いたい人が使ってくれれば問題ない ただしやはりよくわからないサービスで入力するのは今も怖い # Page. 8 ![Page Image](https://bcdn.docswell.com/page/4LJ3RN42E5.jpg) コメント機能 ユーザーが書いた記事にコメントがあっ て気づけないと、開発者の僕ではなく、 ユーザーに気まずい、申し訳ない思いを させてしまう →ちゃんと解決しないと # Page. 9 ![Page Image](https://bcdn.docswell.com/page/V8JDYWQ6JG.jpg) 通知機能が必要 ● ● ● どうやって実現しよう？ メールアドレスは怖い。仕事でも誤送信インシデントを起こしてるのを見たことがあるしなるべく 使いたくない なぜかすごい恐怖心を持っていたので延々と考える # Page. 10 ![Page Image](https://bcdn.docswell.com/page/4VEP69GZ78.jpg) PUSH通知はどうか？ ● ● 個人情報を利用しない 万が一漏れてもなにか問題になることもない どうやるの？ → PWA # Page. 11 ![Page Image](https://bcdn.docswell.com/page/L27V3M6MJQ.jpg) FCM (v8) トークンを取得して サーバーに保存 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/Z5JG3GNXEL.jpg) サーバー側 ● ● Laravel Laravel-FCM（意外と使 えた） # Page. 13 ![Page Image](https://bcdn.docswell.com/page/V47Q5XQ5EP.jpg) デバイスグループを使う ● ● １回のPOSTで複数の端末に送信できる 他にも「トピック」購読などもある # Page. 14 ![Page Image](https://bcdn.docswell.com/page/DKE496NVJ1.jpg) 実際に送信 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/PL71KV54EG.jpg) 通知を受信する firebase-messaging-sw.js というファイルを作って Service Workerを定義 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/8G7WDL5ZE2.jpg) PUSH通知完成 ● 安全な通知処理ができた デメリットも ● 設定してもらわないと送信できない（メールであれば登録後準備がもうできている） ○ のでメール送信機能もつけている とはいえサービスによってはすごく相性良さそう （「通知ほしい」と思わせるサービスなど） # Page. 17 ![Page Image](https://bcdn.docswell.com/page/W4JZGMNL73.jpg) ホーム画面に追加 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/KYE6YN8MJV.jpg) ホーム画面に追加のメリット アクセスしやすい ● ● ● やはりホーム画面のアイコンからの方が思った時にすぐアクセスしやすい ブラウザのブックマークはなにげに面倒くさい Web、アプリ系エンジニアはPCで色々やるかもだが、普通の人はほとんどスマホ 普段からガンガン使ってほしいなら、やはりアプリにするかWebの場合はホーム画面に追加できるよ うにしたほうが良い # Page. 19 ![Page Image](https://bcdn.docswell.com/page/5GE5G59QE4.jpg) TWA（Trusted Web Activity） PWAに対応していればGoogle Playに アプリを出すことができる # Page. 20 ![Page Image](https://bcdn.docswell.com/page/V972YN2W7R.jpg) TWAのメリット ● ASOも併用して集客できる ○ ○ ● ストア検索 ■ 猛者はASOでかなり集客 一応アプリにしとこう、じゃなく、ちゃんと使い勝手にこだわる必要はある ストアでも検索して見つけてもらえる ○ Webで検索面倒だからアプリにないかな、と探しても見つかる ただしiOSにはないので海外の集客も狙うと良さそう # Page. 21 ![Page Image](https://bcdn.docswell.com/page/5DJYGPY9JM.jpg) TWAの対応 Workboxを使って webpackの設定に追加 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/2V7NG5PDE8.jpg) TWAの対応 manifest.jsonを配置 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/GYJ9WY38J3.jpg) TWAの対応 Service Workerを登録 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/5GJ8N6MZED.jpg) TWAの対応 Android Studioを使ってAndroidアプリケーションとしての設定、ビルドが必要 ● ● アイコンの設定 名称の設定（多言語化） などアプリのビルドの知識も必要 （とはいっても一度作ってしまえばあとはWebでアップデートできる） # Page. 25 ![Page Image](https://bcdn.docswell.com/page/MLJLP931ER.jpg) PWAにして良かったか？ サービスによる。 投稿系サービスはとにかく投稿が頻繁で、閲覧者の数が多くなることが見込めるとメリットがありそう。 Crieitはそんなに多くもなく、検索流入による一時的なアクセスが多いため、あまりメリットはなさそう 別の系統では一人で毎日コツコツ使えるようなアプリはメリットが大きそう Webにするか、WebでPWAを導入するか、アプリにするか、しっかり作る前に見極めることが必要。 あとあとになって「できるみたいだから試しにやってみるか～」じゃうまく行かない場合も多い。 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/547M4ZD5EW.jpg) ご清聴ありがとうございました