うしろのこの本ください

なんでもかきます

Nuxtのpwa-moduleでプッシュ通知令和版

直近プッシュ通知の実装が必要になったためハマったところ中心に結果をメモる。

受け取り側

pwa-moduleはOneSignalをサポートしているため、Nuxtでプッシュ通知をやりたい場合これを使うのが一番簡単。

pwa.nuxtjs.org

とりあえずpwa moduleとone signal moduleを入れてnuxt.config.jsに設定を書けば受け取り側の設定は終わる。

yarn add @nuxtjs/onesignal @nuxtjs/pwa

nuxt.config.js

// 省略
  modules:
      [
          '@nuxtjs/onesignal',
          '@nuxtjs/pwa'
      ],
  oneSignal: {
    init: {
      appId: 'One Signalコンソールで発行したID',
      allowLocalhostAsSecureOrigin: true, // localhostで動作確認する場合true
      welcomeNotification: {
        disable: true
      },
    },
    importScripts: ['sw.js'], // 後述、必須
  },
  pwa: {
    workbox: {
      dev: true, // devモードで起動した時でもServiceWorkerを有効にする
    },
    manifest: {
      name: 'test',
      short_name: 'test',
      title: 'test',
      'og:title': 'test',
      description: 'test',
      'og:description': 'test',
      lang: 'ja',
      theme_color: '#ffffff',
      background_color: '#ffffff'
    },
  },
// 省略

ワーカーが複数ある場合、メインのワーカーに他のファイルをマージする必要がある。OneSignalのSDKが取り込めるように自動生成してくれるが、デフォルトのパス指定が/sw.js?xxxxxxxxのような形で生成されうまく読み込めないので、importScriptsで明示的に指定する。

うまくいっていればdeveloper consoleのApplicationタブで確認することができる。

f:id:apple19940820:20191101110929p:plain

送信側

OneSignalにサインアップする。GitHubアカウントやGoogleアカウントで登録できる。

Add a New Appでアプリケーションを作成する。適当に名前いれてADD APP。

その後どのプラットフォーム向けに作るかの選択肢がでるためWeb Pushを選ぶ。Choose IntegrationはTypical Siteで。

Site Setupは以下のように

f:id:apple19940820:20191101112158p:plain

ローカルで確認したいので、localhosthttps扱いにする。

Permission Prompt SetupはとりあえずNative Propmtで。カスタマイズもできるがブラウザデフォルトであるメリットの方が大きい。

これ

f:id:apple19940820:20191101114516p:plain

Welcome Notificationは受け取り側で無効にしたためスルーでOK。

Advancedは少し気をつける必要がある。ServiceWorkerでキャッシュしたいページがネストしてる場合ここで設定しないとうまく動かない。今回/mediaでやりたいので以下のように設定する。

f:id:apple19940820:20191101113407p:plain

前と後ろに/をつけないと壊れる。OneSignalSDKWorker.jsとかは自動生成されるCDNからSDKをとってくるためのワーカーファイルで、importScriptsのパスがあーだこーだはこのファイルの話。

ここまでできたらSAVEを押す。するとWeb Push設定用のページに行くのでここでappIdをコピペして、クライアント側のnuxt.config.jsのOneSignalの設定に追記する。

FINISHで設定完了。

プッシュ

OneSignalのヘッダーからMessagesに行ってNewPushを押すと設定画面にいける。

f:id:apple19940820:20191101144812p:plain

適当にtitleとか埋めたらSchedleでいつプッシュするかを決められる。今回はすぐ見たいのでデフォルトのままで。

f:id:apple19940820:20191101114202p:plain

誰に対して投げるか、購読しているユーザー数、内容とブラウザーなどを確認してSEND MESSAGEでプッシュ通知が飛ぶ。

f:id:apple19940820:20191101144824p:plain

いざプッシュ

f:id:apple19940820:20191101144439p:plain

できた

おわり

パス周りでわりとハマったものの受け取り側はモジュール入れて設定ちょっと書くだけで良いしついでにPWA化もできてコスパ良い。(プッシュ通知の是非は置いておいて)

OneSignalも技術的な知見がなくても操作できるコンソールが用意されているのでマーケティング担当者が自由に通知できる。