Edited at

プッシュ通知を手軽に作成してみたかったのでPWAを使ってみる

スマホアプリで手軽にプッシュ通知を実施してみたく、色々調べてみました。

本域でプッシュ通知を実装するにはiOS「APNs」、Android「GCM」を実装することとなり、色々手間と制約が大きかった。色々調べたところ、PWAと言うフレームワークがあり、プッシュ通知ができそうなので、調べてみた。

ただ最終的にはPWAでの通知はできなかったので、悪しからず読んでください。


PWAとは

Progressive Web Appsの略。

 Google(Android Chrome)を中心に策定・展開されている

 appleのiOSに対しては一応の対応が行われているが、一部機能(PUSH機能)が利用できない


もうちょっと詳しく

・ブラウザからの表示だけではなく、アプリの形式(ホーム画面に追加可能)でスマートフォンに配置することができる

・キャッシュが利用でき、オフラインでも表示可能。

・プッシュ通知が利用できる

アプリ形式でホーム画面に登録でき、その画面の表示はURLバーもなく全画面表示もでき、

通常のアプリと遜色なく操作ができてしまう。

オフラインやリッチな通信環境でなくても使えると言うことは、新興国向けにも利用できそうなことが見える


イベント管理アプリの作成

突然「イベント管理アプリ」と言うのがでてきたが、プッシュ機能を有するアプリを何か作ろうと考えたとこと

何人かのグループでイベント日程や参加者、通知機能を管理するアプリができたらいいなと思い

作ろと思います。


どんなサービス?

ある特定のイベントに対して各自が出欠を登録できるサービス

特徴は3つです。

 ・手軽に発信

 ・一覧で確認

 ・モバイル

出欠の連絡に手間がかかっては元も子もありません。このサービスでは2ステップで出欠の申請が可能としたいです。

イベント毎に出欠が一覧表示されるので、誰が来るか来ないのかが一目でわかるようにしたいです。


その他の利用サービス


画面作成

UIデザインはhttps://www.draw.io/ で。

プロトタイピングはhttps://codepen.io/ で。

詳細はこちら画面作成でdraw.ioとCodePenを試してみた


ホスティング

何人かで作成しようと思っていたのでGithubにアカウントを作成し、かつホスティングとしても

使用しました。


データストレージ

データストレージ、バックエンドサービスとしてお手軽なFirebase Cloud Firestore を使うようにしてみました。

詳細はこちらFirebase Cloud Firestore を試してみた


というわけで作ってみた


まずサンプル的に作成

1.manifest.jsonを作成し、index.htmlと同じ階層に配備。


manifest.json

{

"name": "PWA Sample",
"short_name": "PWA",
"background_color": "#fc980c",
"icons": [
{
"src": "./wani.png",
"sizes": "192x192",
"type": "image/png"
},
],
"start_url": "./?utm_source=homescreen",
"display": "standalone"
}

icons → Android端末用にicon画像を追加

start_url → アクセスするトップページのURLを追加

display → 表示の仕方を指定

・standalone :スタンドアロンアプリの様に表示

・fullscreen:全画面表示

・minimal-ui:最小限のUIのみ表示する

・browser:ブラウザライクな表示にする

2.service-worker.jsを作成し、index.htmlと同じ階層に配備。


service-worker.js

self.addEventListener('install', function(e) {

console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
});

// 現状では、この処理を書かないとService Workerが有効と判定されない
self.addEventListener('fetch', function(event) {});


動作確認のためのログ表示のみ記述。

3.index.htmlで読み込む

以下をheadタグ内に追加

<!-- manifest.jsonの読み込み -->

<link rel="manifest" href="./manifest.json">
<script type="text/javascript">
// service workerが有効なら、service-worker.js を登録する
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
}
</script>

4.ios用にheadタグに設定を追加

  <!-- ios用tag -->

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PWA TEST">
<link rel="apple-touch-icon" href="./app-icon-120x120.png" sizes="120x120">
<link rel="apple-touch-startup-image" href="./zeni_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

・apple-mobile-web-app-capable :URL部分を表示するか否かの設定(yesで非表示)

・apple-mobile-web-app-status-bar-style :上部に表示するバーのスタイル

・apple-mobile-web-app-title :ホームに追加する際のタイトル

・タグ :ホームに追加する際のアイコンの画像

・タグ :開いたときのスプラッシュ画面の設定

5.サンプルURLを開いて、ホームに追加する。(iosの場合)


残念なお知らせ

PWAでPush通知を作ろうと思ったがどうもうまくいかず、

別のやり方としてFirebaseを使った通知ができそうだったので作ってみました。

詳細はこちらイベント通知アプリの作成(firebaseベース)


気づいたこと

【よかったこと】

・ネイティブアプリにしかPUSH通知ができないと思っていたが、PC・モバイル問わずに実現できる

・HTMLだけで結構いろいろできるなと思った。

・HTMLなのでGithubの上(GitHub Pages)から公開できる。

 ⇒GitにPullするだけで動作確認が簡単にできる

・googleアカウントを登録することでBaaS に位置付けされるFirebaseを使用できるのはすごいと感じた。

・slackやTrelloなど最近のプロジェクトツールを身近で試せたのはよかった

【大変だな】

・firebaseが想像以上に難しかった。


その他開発サポートツールについて


slack

チーム内の情報共有としてslackを利用しました。もう有名ツールなので使い方については言及しません。


Trello

タスク管理としてTrelloを利用しました。

詳しくはこちら