[PWA] PWAでWebサイトをアプリ化してみよう ~導入編~


2019年2月28日

みなさん、お久しぶりです!はちです。
最近このブログもぽんての勢いが激しいので、たまには止めようと言うことで記事を書くに至りました。

最近社内で、PWAでの開発が流行りつつあります。
PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。
PWAはそれ自体が何か特殊な一つの技術、というわけではありません。
※レスポンシブデザイン、HTTPS化など、Googleが定める要素を備えたWebサイトであり、オフラインやプッシュ通知に対応するためのブラウザAPI(Service Workerなど)を利用しているWebサイトをPWAと呼びます。

PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。
これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。

当社がリリースしている、チャリコレ!や2bsと言ったアプリもPWAで開発されています。
PWAって実装するのが難しいんじゃないの?と思われる方もいらっしゃると思いますが
そこまで凝ったものでなければ2,3時間あれば実装できるのではないかと思います。

今回は導入編ということで、簡単な手順を書いていきます。

FireBase コンソールにプロジェクトを追加

https://console.firebase.google.com/?hl=ja
プロジェクト名は割となんでも良いと思いますが、一応自分でわかりやすい名前にしておいてください。
この画面が案外分かりづらかったりするんでちょっと苦労するかもしれません。

ウェブアプリにFireBaseを追加を選択

登録すると下記のコードが発行されるのでメモしておいてください。


※注意
↑のAPIKeyは古い仕様のもので、メッセージを送信する際には使えません。
また、今回は説明用にダミーの値を入れていますが、実際はちゃんとした値が入ります。

メッセージ送信用のサーバーキーを確認する

Firebase コンソール→左ペインのページ上にあるギアマーク→プロジェクトの設定→クラウドメッセージング
サーバーキーをコピペで保存か何かしておきます。このサーバーキーが重要です。

manifest.jsonを作成する

アプリの定義ファイルです。URLやアイコン、起動画面の画像などを定義します。
画面の向きなどもこのファイルで固定化することが出来ます。

ヘッダファイルに下記を定義

※面倒だったらindex.htmlとかに埋めてもいいですが、  どこのページからアクセス開始になるのかわからないので念の為ヘッダにしておきます console.logの出力メッセージでどこのフローを通っているか明確にしておきます。
このサービスワーカーはかなり重要で、端末トークンの取得などはこいつが行います。
端末トークンをDB保持したりしておくと、Webサービスで使い回せて便利だと思います。

サービースワーカーファイルに下記を定義

serviceWorker.jsとして下記の処理を定義します。

最後にマニフェストファイルを読み込む

ヘッダで
しておきます。

上記をすべて行ったページにアクセスすると、ブラウザが「通知を許可しますか?」と聞いて来ると思います。
(ここで聞かれなかった場合は、何らかエラーが出ている可能性があるのでGoogle ChromeであればF12でDevToolsを表示してデバッグしていきます。)

実はPWAの基本的な定義はこれで終わりです。
スマホなどで「ホーム画面に追加」を行うと、マニフェストで定義したアイコンやスプラッシュ画面が表示されるようになります。
(現在はAndroid+GoogleChromeの環境が最適化されています。将来的にはiPhoneでも同様の挙動になると思いますが…。)

すごく簡単じゃないですか?
次回はこの定義を行ったサイトで、プッシュ通知を出してみたり色々やっていきます。

PWA

Posted by はち