PWAを体感できるサービス「ぱちぱち」をリリースした

...
gem 'webpush'
...

bundle install

$ bundle exec rails c
Loading development environment (Rails 5.2.1)
irb(main):001:0> vapid_key = Webpush.generate_key
irb(main):001:0> puts vapid_key.public_key 
# ここに表示された公開鍵をコピーしておく
irb(main):001:0> puts vapid_key.private_key
# ここに表示された秘密鍵をコピーしておく

WEB_PUSH_VAPID_PUBLIC_KEY=<先ほど取得した公開鍵>
WEB_PUSH_VAPID_PRIVATE_KEY=<先ほど取得した秘密鍵>
WEB_PUSH_VAPID_MAIL=<連絡先>

def web_push_to
    message = {
        title: 'タイトル！',
        body: "通知内容！",
        icon: ActionController::Base.helpers.asset_path('icons/icon-192x192.png'),
        tag: Time.now.to_i
    }

    # subscription は後に実装するクライアント側から取得出来る情報（今回はサンプルなので１件目に送るものとします）
    subscription = Subscription.first

    Webpush.payload_send(
        message: JSON.generate(message),
        endpoint: subscription.endpoint,
        p256dh: subscription.p256dh,
        auth: subscription.auth,
        vapid: {
            subject: "mailto:#{ENV['WEB_PUSH_VAPID_MAIL']}",
            public_key: ENV['WEB_PUSH_VAPID_PUBLIC_KEY'],
            private_key: ENV['WEB_PUSH_VAPID_PRIVATE_KEY'],
            expiration: 12 * 60 * 60
        }
    )
end

//serviceworker.js.erb

var CACHE_VERSION = 'v1';
var CACHE_NAME = CACHE_VERSION + ':sw-cache-';

// ServiceWorker のインストール
function onInstall(event) {
  console.log('[Serviceworker]', "Installing!", event);
  event.waitUntil(
    caches.open(CACHE_NAME).then(function prefill(cache) {
      return cache.addAll([
        '<%= asset_path "application.js" %>',
        '<%= asset_path "application.css" %>',
        '/offline.html',
      ]);
    })
  );
}

// ServiceWorker のアクティベート
function onActivate(event) {
  console.log('[Serviceworker]', "Activating!", event);
  event.waitUntil(
      caches.keys().then(function(cacheNames) {
        return Promise.all(
            cacheNames.filter(function(cacheName) {
              return cacheName.indexOf(CACHE_VERSION) !== 0;
            }).map(function(cacheName) {
              return caches.delete(cacheName);
            })
        );
      })
  );
}

function onFetch(event) {
   //省略🙏
}

// Push通知を受け取った時のイベントコールバック
function onPush(event) {
  console.log('[Serviceworker]', "Received push message!", event);
  // event.data にサーバー側で設定した項目が入っている
  var json = event.data.json();
  return event.waitUntil(
      self.registration.showNotification(json.title, {
        body: json.body,
        icon: json.icon,
        tag: json.tag,
        data: {
          target_url: '/'
        }
      })
  );
}

// 通知をクリックした時の動作
function onSWNotificationClick(event) {
  event.notification.close();
  return event.waitUntil(
      clients.openWindow(
          event.notification.data != null ? event.notification.data.target_url : '/'
      )
  );
}

// Push通知の Subscription が変わった時のイベントコールバック
function onPushSubscriptionChange(event) {
   //省略🙏
}

self.addEventListener('install', onInstall);
self.addEventListener('activate', onActivate);
self.addEventListener('fetch', onFetch);
self.addEventListener("push", onPush);
self.addEventListener("notificationclick", onSWNotificationClick);
self.addEventListener("pushsubscriptionchange", onPushSubscriptionChange);

//serviceworker-companion.js.erb

//サーバ側の公開鍵を設定
var convertedVapidKey = new Uint8Array(
    <%= Base64.urlsafe_decode64(ENV['WEB_PUSH_VAPID_PUBLIC_KEY']).bytes %>
);

//　ServiceWorker の登録
if (navigator.serviceWorker) {
  navigator.serviceWorker.register('/serviceworker.js', { scope: './' })
      .then(function(reg) {
        swRegistration = reg;
        console.log('[Companion]', 'Service worker registered!');
        subscribe();
      });
}

//　Push通知の購読
function subscribe() {
  if (!canNotification()) { return; }
  var newSubscription = null;
  return swRegistration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: convertedVapidKey
  }).then(function (subscription) {
    newSubscription = subscription;
    console.log('User is subscribed.');
  }).catch(function(e) {
    console.error('Unable to subscribe to push.', e);
  }).then(function () {
    if (newSubscription !== null) {
      createSubscriptionOnServer(newSubscription);
    }
  });
}

//　Push通知が使用できるかの確認
function canNotification() {
  // When not supported push notification
  if (!('showNotification' in ServiceWorkerRegistration.prototype)) { return false; }
  // When deny push notification
  if (Notification.permission === 'denied') { return false; }
  // When not exist PushManager
  if (!('PushManager' in window)) { return false; }
  return true;
}

//　サーバ側にクライアントの subscription を送信
function createSubscriptionOnServer(subscription) {
  return fetch('<あなたが設定したRails側のsubscription登録エンドポイント>', {
    body: JSON.stringify({
      subscription: subscription
    }),
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST'
  })
}