QuasarFramework(Vue.js) + Firebase + Onesignal でpush通知機能を実装してみる。

Cloud Messagingがおもったよりも難しかったので、Push通知だけは、OneSignalだけで実装してみました。

# OneSignalとは？
アプリや、ウェブサイトに、プッシュ通知機能をつけられるASPです。
ドキュメントは英語のみですが、グーグル翻訳のおかげで、ほとんど日本語ドキュメントのように読めます。

# 環境
* macOS High Sierra 10.13.2
* npmがinstallされている

# 参考
https://qiita.com/jacoyutorius/items/fe2fd7b42b18cd28c8fa
https://qiita.com/k-taro/items/26dc55281d414babd495
https://documentation.onesignal.com/docs/web-push-overview

# QuasarFramework + Firebaseで、アプリをデプロイする。

## QuasarFramework をinstallする

```shell
$ npm install -g quasar-cli
$ quasar init default quasar-firebase
$ cd quasar-firebase
$ npm install
```

## firebaseの準備

* firebase のコンソールからprojectを作成する。
* firebase-toolsをinstallする。

```shell
$ npm install -g firebase-tools
```

* プロジェクトフォルダに移動して、firebase initを実行します。

```shell
$ cd quasar-firebase
$ firebase init

# Login Errorが出る場合は、firebaseにログインするコマンドを実行する
$ run firebase login
```

* firebase.jsonに以下のコードを書く

```json
{
  "hosting": {
    "public": "./dist"
  }
}
```

* `$ firebase deploy`で

# OneSignalの設定

## 新規appを登録
* Add a new appを選択（任意のアプリ名を入力）
* Web Pushを選択

## Choose Integration
TypicalSiteを選択

## Site Setup
SITE NAME, SITE URL をそれぞれ入力します。今回は、firebaseでデプロイしたサイトを想定しています。

## Permission Prompt Setup
* 通知のときのコメントなどの設定ができます。あとから変えられるので、よしなに設定しておきます。

## Welcome Notification
* 最初にアクセスしたときに表示される通知ですが、オプションで設定できます。

## Advanced(Optional)
* ここも通知をクリックしたときなどの細かい設定ができるぽいですが、必須ではないので飛ばします。

## Upload Files
* OneSignal SDK files をダウンロードして、top-level root にアップロードします。以下のようなイメージです。

"""
Once you've uploaded the OneSignal SDK files, the following URLs should be publicly accessible (replace yoursite.com with your site's domain):

https://yoursite.com/manifest.json
https://yoursite.com/OneSignalSDKWorker.js
https://yoursite.com/OneSignalSDKUpdaterWorker.js
"""

* QuasarFramework の場合、webpackの設定をちょっと変更して、top levelにホストされるようにする必要があります。
  * onesignalというフォルダを作成する。（作成しなくてトップにそのまま置くほうがいいのかも。放置しておくと何のファイルか忘れそうなので、このようにしてます。）
  * onesignal以下のファイルをサーバーにアップする設定にします。build/webpack.dev.conf.js と、build/webpack.prod.conf.jsを以下のように修正しました。

```javascript:script.dev.js
...
// serve pure static assets
var staticsPath = path.posix.join(webpackConfig.output.publicPath, 'statics/')
var oneSignalPath = path.posix.join(webpackConfig.output.publicPath, '/')
app.use(staticsPath, express.static('./src/statics'))
app.use(oneSignalPath, express.static('./src/onesignal'))
...
```

```javascript:script.build.js
...
shell.mkdir('-p', targetPath)
shell.cp('-R', 'src/statics', targetPath)
shell.cp('-R', 'src/onesignal/manifest.json', targetPath)
shell.cp('-R', 'src/onesignal/OneSignalSDKWorker.js', targetPath)
shell.cp('-R', 'src/onesignal/OneSignalSDKUpdaterWorker.js', targetPath)
...
```

よし、これでいいはずです！

## Add Code to Site

* `src/index.html`のheader部分に、指定のコードをそのまま埋め込みます。

```html:index.html
...
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "****************************",
    });
  });
</script>
...
```

以上で、初歩的な設定は終了です!

## 設定したサイトにアクセスしてみる
サイトにアクセスしてOneSignalのベルのマークが出ていれば成功です！

# まとめ
OneSignal、めっ〜〜〜〜ちゃ便利ですね！使いやすさに感動しました！
最初は、Firebase Cloud Messaging　で対応しようと思ってたんですが、ちょっと設定に手こずってうまくできなかったので、通知設定はしばらくは、OneSignalを使おうかと思います。
素晴らしい！！