OneSignalでお手軽Push通知スケジューラーを作る

PWA Advent Calendar 2019 11日目の記事です。

PWAというよりもOneSignalがメインの記事です。
OneSignalでお手軽Push通知スケジューラーを作る話です。

# はじめに

- [Nuxt PWA OneSignal Module](https://pwa.nuxtjs.org/modules/onesignal.html)でOnesignalが導入できている前提です(ここはNuxtじゃなくてもOneSignalが導入できていればOKです)
- 導入とかは[NuxtでPWA対応WebアプリにOneSignalからプッシュ通知を送る](https://qiita.com/_takeshi_24/items/57d68790d6ec88140099)系の記事を参照してください
- Dateのフォーマットには[dateformat](https://www.npmjs.com/package/dateformat)を使います

## 詳細とか

[OneSignal Create notification API](https://documentation.onesignal.com/reference#create-notification)
を見ると

```
send_after:
 
Schedule notification for future delivery. API defaults to UTC -1100

Examples: All examples are the exact same date & time.
```

とありましたので、これを使います。

## ベースとなるパラメータ

```js
const params = {
  method: "post",
  url: "https://onesignal.com/api/v1/notifications",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Basic ${process.env.ONESINGAL_REST_API_KEY}` // 環境変数
  },
  data: {
    app_id: process.env.ONESINGAL_APP_ID, // 環境変数
    headings: {
      en: "notification test",
      ja: "name:hogeの人に通知です"
    },
    contents: {
      en: "This is notification test",
      ja: "name:hogeの人に通知です"
    },
    // オプションフィルターなので任意ここでは独自のnametag'hoge'と一致するユーザーに送る
    filters: [
      {
        field: "tag",
        key: "name",
        relation: "=",
        value: 'hoge'
      }
    ]
  }
};
```

## ５分後に送りたい場合


```js
var dateFormat = require("dateformat");

let afterFiveMinutes = new Date();
afterFiveMinutes.setMinutes(afterFiveMinutes.getMinutes() + 5);
dateFormat(afterFiveMinutes, "isoDateTime");

const params = {
  method: "post",
  url: "https://onesignal.com/api/v1/notifications",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Basic ${process.env.ONESINGAL_REST_API_KEY}`
  },
  data: {
    app_id: process.env.ONESINGAL_APP_ID,
    headings: {
      en: "notification test",
      ja: "name:hogeの人に通知です"
    },
    contents: {
      en: "This is notification test",
      ja: "name:hogeの人に通知です"
    },
    send_after: {
      afterFiveMinutes
    },
    // オプションフィルターなので任意ここでは
    filters: [
      {
        field: "tag",
        key: "name",
        relation: "=",
        value: 'hoge'
      }
    ]
  }
};
axios(params).then(res => {
  console.log(res.data); // responseにセットした通知ID等が返却される
});
```

これで独自のnametag'hoge'と一致するユーザーに５分後に送れます。

## 独自のタグを設定する方法とか

[OneSignall SDK Reference](https://documentation.onesignal.com/docs/sdk-reference#section-tagging)を参照

具体的にコードを書くと

```js
OneSignal.push(function() {         
  OneSignal.sendTag("key", "value", function(tagsSent) {
    // Callback called when tags have finished sending
  });
});
```

独自のnametag'hoge'を設定したい場合

```js
OneSignal.push(function() {         
  OneSignal.sendTag("name", "hoge", function(tagsSent) {
  });
});
```

## 複数のタグを設定したい場合

sendTagsを使う。例を上げると

```js
OneSignal.push(function() {
  OneSignal.sendTags({
    key: 'value',
    key2: 'value2',
  }, function(tagsSent) {
    // Callback called when tags have finished sending    
  });
});
```

nametag:'hoge' emailtag: 'hoge@com'にしたいときは

```js
OneSignal.push(function() {
  OneSignal.sendTags({
    name: 'hoge',
    email: 'hoge@com',
  }, function(tagsSent) {
  });
});
```

これで独自のタグを設定できる。

## 最後に

結構面倒なPush通知もOneSignalを使えば簡単にできる上に、スケジューラーとして設定することも簡単にできました。OneSignal結構便利ですね！