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する

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

firebaseの準備

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

$ npm install -g firebase-tools

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

$ cd quasar-firebase
$ firebase init

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

firebase.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を以下のように修正しました。

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'))
...

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部分に、指定のコードをそのまま埋め込みます。

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を使おうかと思います。
素晴らしい！！

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