LoginSignup
11

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-04-03

スマホアプリで手軽にプッシュ通知を実施してみたく、色々調べてみました。
本域でプッシュ通知を実装するには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を利用しました。
詳しくはこちら

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11