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

スマホアプリで手軽にプッシュ通知を実施してみたく、色々調べてみました。
本域でプッシュ通知を実装するにはiOS「APNs」、Android「GCM」を実装することとなり、色々手間と制約が大きかった。色々調べたところ、PWAと言うフレームワークがあり、プッシュ通知ができそうなので、調べてみた。
ただ最終的にはPWAでの通知はできなかったので、悪しからず読んでください。

#PWAとは
Progressive Web Appsの略。
　Google（Android Chrome）を中心に策定・展開されている
　appleのiOSに対しては一応の対応が行われているが、一部機能（PUSH機能）が利用できない

##もうちょっと詳しく
・ブラウザからの表示だけではなく、アプリの形式(ホーム画面に追加可能)でスマートフォンに配置することができる
・キャッシュが利用でき、オフラインでも表示可能。
・プッシュ通知が利用できる

アプリ形式でホーム画面に登録でき、その画面の表示はURLバーもなく全画面表示もでき、
通常のアプリと遜色なく操作ができてしまう。
オフラインやリッチな通信環境でなくても使えると言うことは、新興国向けにも利用できそうなことが見える

#イベント管理アプリの作成
突然「イベント管理アプリ」と言うのがでてきたが、プッシュ機能を有するアプリを何か作ろうと考えたとこと
何人かのグループでイベント日程や参加者、通知機能を管理するアプリができたらいいなと思い
作ろと思います。

##どんなサービス？
ある特定のイベントに対して各自が出欠を登録できるサービス
特徴は３つです。
　・手軽に発信
　・一覧で確認
　・モバイル

出欠の連絡に手間がかかっては元も子もありません。このサービスでは２ステップで出欠の申請が可能としたいです。
イベント毎に出欠が一覧表示されるので、誰が来るか来ないのかが一目でわかるようにしたいです。

##その他の利用サービス
###画面作成
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を利用しました。
詳しくはこちらへ