altplusaltplusB3Sスタッフの技術紹介サイトです。2019年2月28日TwitterFacebookGoogle+LinkedInPocketみなさん、お久しぶりです!はちです。最近このブログもぽんての勢いが激しいので、たまには止めようと言うことで記事を書くに至りました。最近社内で、PWAでの開発が流行りつつあります。Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。PWAはそれ自体が何か特殊な一つの技術、というわけではありません。Workerなど)を利用しているWebサイトをPWAと呼びます。PWAを実装することでプッシュ通知やホーム画面へのアイコン追加など、アプリの特徴的な機能をWebサイトに持たせる事ができます。これにより、UX向上やユーザーエンゲージメントの改善にもつながるとして注目されています。当社がリリースしている、チャリコレ!や2bsと言ったアプリもPWAで開発されています。PWAって実装するのが難しいんじゃないの?と思われる方もいらっしゃると思いますがそこまで凝ったものでなければ2,3時間あれば実装できるのではないかと思います。今回は導入編ということで、簡単な手順を書いていきます。コンソールにプロジェクトを追加https://console.firebase.google.com/?hl=jaプロジェクト名は割となんでも良いと思いますが、一応自分でわかりやすい名前にしておいてください。この画面が案外分かりづらかったりするんでちょっと苦労するかもしれません。登録すると下記のコードが発行されるのでメモしておいてください。↑のAPIKeyは古い仕様のもので、メッセージを送信する際には使えません。今回は説明用にダミーの値を入れていますが、実際はちゃんとした値が入ります。コンソール→左ペインのページ上にあるギアマーク→プロジェクトの設定→クラウドメッセージングサーバーキーをコピペで保存か何かしておきます。このサーバーキーが重要です。manifest.jsonを作成するアプリの定義ファイルです。URLやアイコン、起動画面の画像などを定義します。画面の向きなどもこのファイルで固定化することが出来ます。console.log('サービスワーカーを登録しました。console.log('通知の受信が許可されました。console.log('トークンを取得できませんでした。権限を確認してください。console.log('トークンの取得中にエラーが発生しました。console.log('通知が許可されていません。console.log('サービスワーカーの登録に失敗しました。成功した場合の処理console.log('サービスワーカーを登録しました。{console.log('通知の受信が許可されました。{console.log('トークンを取得できませんでした。権限を確認してください。{console.log('トークンの取得中にエラーが発生しました。{console.log('通知が許可されていません。サービスワーカー登録失敗console.log('サービスワーカーの登録に失敗しました。err);});}</script>console.logの出力メッセージでどこのフローを通っているか明確にしておきます。このサービスワーカーはかなり重要で、端末トークンの取得などはこいつが行います。端末トークンをDB保持したりしておくと、Webサービスで使い回せて便利だと思います。サービースワーカーファイルに下記を定義serviceWorker.jsとして下記の処理を定義します。href="./manifest.json">しておきます。上記をすべて行ったページにアクセスすると、ブラウザが「通知を許可しますか?」と聞いて来ると思います。ChromeであればF12でDevToolsを表示してデバッグしていきます。)実はPWAの基本的な定義はこれで終わりです。スマホなどで「ホーム画面に追加」を行うと、マニフェストで定義したアイコンやスプラッシュ画面が表示されるようになります。(現在はAndroid+GoogleChromeの環境が最適化されています。将来的にはiPhoneでも同様の挙動になると思いますが...。)すごく簡単じゃないですか?次回はこの定義を行ったサイトで、プッシュ通知を出してみたり色々やっていきます。~プッシュ通知編~はちです。...ディスカッションコメント一覧まだ、コメントがありませんコメントを残すコメントをキャンセルこの記事のトラックバックURL新着記事[MySQL]ウインドウ関数お久しぶりでございます。...自作HPが突然見れなくなってしまった!!こんにちは。...Googleドキュメントの「写真のファイルをテキストに変換する」をやってみた。お久し振りです!ぽんてです。...Ajaxのデバッグを簡単に実行したい!!ブログの更新を頑張っています。~プッシュ通知編~はちです。