PWAを導入した理由

PWAを 導入した理由 on PWA Night MATSURI

自己紹介 名前：だら ● ● ● ● ● Twitterでよく過ごしています（@dala00） フロント、バックエンド、アプリなど何でもやってるフリーのWebエンジ ニア 趣味でもWebサービスやアプリを色々リリース 商業出版したりZennで本を書いたり 色々文章を書くのは嫌いじゃない

技術記事投稿コミュニティ Crieit

技術記事投稿コミュニティ Crieit ● ● ● ● ３年ほど前にリリース Qiitaみたいなサービス なんでも書きやすいサービスにしたかった #web1week １週間でWebサービスを作るイベント

新規登録、ログイン ソーシャルログインのみ

メールアドレスのことを考えさせたくない ● よくわからない個人のサービスに入力したくないのでは ○ ○ ○ ○ ● 実際にはソーシャルログインも色々権限ついてると怖い ちゃんと適切に扱っていれば問題ない 使いたい人が使ってくれれば問題ない （ただし実際にはソーシャルログイン時に取得はしている） サービスによってはメールアドレス不要なので取らないほうがいい ○ ソーシャルログインの権限も最小限に

パスワードの事を考えさせたくない ● 個人サービスだと平文保存していたり、収集しての悪用を疑われる可能性？ ○ ○ ○ ○ フレームワークのデフォルトの機能でちゃんとハッシュされてることは多い 適切に扱っていれば問題ない 使いたい人が使ってくれれば問題ない ただしやはりよくわからないサービスで入力するのは今も怖い

コメント機能 ユーザーが書いた記事にコメントがあっ て気づけないと、開発者の僕ではなく、 ユーザーに気まずい、申し訳ない思いを させてしまう →ちゃんと解決しないと

通知機能が必要 ● ● ● どうやって実現しよう？ メールアドレスは怖い。仕事でも誤送信インシデントを起こしてるのを見たことがあるしなるべく 使いたくない なぜかすごい恐怖心を持っていたので延々と考える

PUSH通知はどうか？ ● ● 個人情報を利用しない 万が一漏れてもなにか問題になることもない どうやるの？ → PWA

FCM (v8) トークンを取得して サーバーに保存

サーバー側 ● ● Laravel Laravel-FCM（意外と使 えた）

デバイスグループを使う ● ● １回のPOSTで複数の端末に送信できる 他にも「トピック」購読などもある

実際に送信

通知を受信する firebase-messaging-sw.js というファイルを作って Service Workerを定義

PUSH通知完成 ● 安全な通知処理ができた デメリットも ● 設定してもらわないと送信できない（メールであれば登録後準備がもうできている） ○ のでメール送信機能もつけている とはいえサービスによってはすごく相性良さそう （「通知ほしい」と思わせるサービスなど）

ホーム画面に追加

ホーム画面に追加のメリット アクセスしやすい ● ● ● やはりホーム画面のアイコンからの方が思った時にすぐアクセスしやすい ブラウザのブックマークはなにげに面倒くさい Web、アプリ系エンジニアはPCで色々やるかもだが、普通の人はほとんどスマホ 普段からガンガン使ってほしいなら、やはりアプリにするかWebの場合はホーム画面に追加できるよ うにしたほうが良い

TWA（Trusted Web Activity） PWAに対応していればGoogle Playに アプリを出すことができる

TWAのメリット ● ASOも併用して集客できる ○ ○ ● ストア検索 ■ 猛者はASOでかなり集客 一応アプリにしとこう、じゃなく、ちゃんと使い勝手にこだわる必要はある ストアでも検索して見つけてもらえる ○ Webで検索面倒だからアプリにないかな、と探しても見つかる ただしiOSにはないので海外の集客も狙うと良さそう

TWAの対応 Workboxを使って webpackの設定に追加

TWAの対応 manifest.jsonを配置

TWAの対応 Service Workerを登録

TWAの対応 Android Studioを使ってAndroidアプリケーションとしての設定、ビルドが必要 ● ● アイコンの設定 名称の設定（多言語化） などアプリのビルドの知識も必要 （とはいっても一度作ってしまえばあとはWebでアップデートできる）

PWAにして良かったか？ サービスによる。 投稿系サービスはとにかく投稿が頻繁で、閲覧者の数が多くなることが見込めるとメリットがありそう。 Crieitはそんなに多くもなく、検索流入による一時的なアクセスが多いため、あまりメリットはなさそう 別の系統では一人で毎日コツコツ使えるようなアプリはメリットが大きそう Webにするか、WebでPWAを導入するか、アプリにするか、しっかり作る前に見極めることが必要。 あとあとになって「できるみたいだから試しにやってみるか～」じゃうまく行かない場合も多い。

ご清聴ありがとうございました