PWA
[PWA] PWAでWebサイトをアプリ化してみよう ～導入編～
はち
更新日:2021/08/12
みなさん、お久しぶりです！はちです。
最近このブログもぽんての勢いが激しいので、たまには止めようと言うことで記事を書くに至りました。
最近社内で、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を追加を選択
登録すると下記のコードが発行されるのでメモしておいてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: "aaa", authDomain: "aaaaaaaaa.firebaseapp.com", databaseURL: "https://aaaaaaaaa.firebaseio.com", projectId: "aaaaaaaaa", storageBucket: "", messagingSenderId: "000000000000" }; firebase.initializeApp(config); </script> |
※注意
↑のAPIKeyは古い仕様のもので、メッセージを送信する際には使えません。
また、今回は説明用にダミーの値を入れていますが、実際はちゃんとした値が入ります。
メッセージ送信用のサーバーキーを確認する
Firebase コンソール→左ペインのページ上にあるギアマーク→プロジェクトの設定→クラウドメッセージングへ進み、サーバーキーをコピペで保存か何かしておきます。
このサーバーキーが重要です。
manifest.jsonを作成する
アプリの定義ファイルです。URLやアイコン、起動画面の画像などを定義します。
画面の向きなどもこのファイルで固定化することが出来ます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "name": "PWA Apps", "orientation": "portrait", "display": "standalone", "start_url": "http://a.aaa/", "short_name": "アプリ名", "icons": [ { "src": "./icon.png", "sizes": "192x192", "type": "image/png" }, { "src": "./splash.png", "sizes": "512x512", "type": "image/png" } ], "description": "PWAで開発したアプリです", "background_color": "#FFFFFF", "gcm_sender_id": "0000000000" } |
ヘッダファイルに下記を定義
※面倒だったらindex.htmlとかに埋めてもいいですが、
どこのページからアクセス開始になるのかわからないので念の為ヘッダにしておきます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> const messaging = firebase.messaging(); if ('serviceWorker' in navigator) { // サービスワーカー登録 navigator.serviceWorker.register('./serviceWorker.js').then(function(registration) { // 成功した場合の処理 console.log('サービスワーカーを登録しました。', registration.scope); // 登録処理 messaging.useServiceWorker(registration); // 通知の受信許可確認 messaging.requestPermission() .then(function() { console.log('通知の受信が許可されました。'); // トークンを取得する messaging.getToken() .then(function(currentToken) { if (currentToken) { // 通知許可を押下した場合、トークンをコンソール出力 //ここは後でDBへ格納する処理などに変更しておきましょう console.log(currentToken); } else { console.log('トークンを取得できませんでした。権限を確認してください。'); } }) .catch(function(err) { console.log('トークンの取得中にエラーが発生しました。', err); }); }) .catch(function(err) { console.log('通知が許可されていません。', err); }); }).catch(function(err) { // サービスワーカー登録失敗 console.log('サービスワーカーの登録に失敗しました。', err); }); } </script> |
console.logの出力メッセージでどこのフローを通っているか明確にしておきます。
このサービスワーカーはかなり重要で、端末トークンの取得などはこいつが行います。
端末トークンをDB保持したりしておくと、Webサービスで使い回せて便利だと思います。
サービースワーカーファイルに下記を定義
serviceWorker.jsとして下記の処理を定義します。
|
1 2 3 4 5 6 7 8 |
self.addEventListener('push', function(event) { event.waitUntil( self.registration.showNotification(event.data.json().notification.title, { 'body': event.data.json().notification.body, 'icon': './icon.png' }) ); }); |
最後にマニフェストファイルを読み込む
ヘッダで
|
1 |
<link rel="manifest" href="./manifest.json"> |
しておきます。
上記をすべて行ったページにアクセスすると、ブラウザが「通知を許可しますか？」と聞いて来ると思います。
（ここで聞かれなかった場合は、何らかエラーが出ている可能性があるのでGoogle ChromeであればF12でDevToolsを表示してデバッグしていきます。）
実はPWAの基本的な定義はこれで終わりです。
スマホなどで「ホーム画面に追加」を行うと、マニフェストで定義したアイコンやスプラッシュ画面が表示されるようになります。
（現在はAndroid＋GoogleChromeの環境が最適化されています。将来的にはiPhoneでも同様の挙動になると思いますが…。）
すごく簡単じゃないですか？
次回はこの定義を行ったサイトで、プッシュ通知を出してみたり色々やっていきます。
