Trong bài này, mình sẽ xây dựng chức năng push notification đơn giản sử dụng actioncable của Rails. Như đã biết actionCable được dùng để làm realtime cho ứng dụng của mình.

Bước thực hiện

Tạo một channel cho actioncable

✗ rails generate channel notifications
Running via Spring preloader in process 4124
      create  app/channels/notifications_channel.rb
   identical  app/assets/javascripts/cable.js
      create  app/assets/javascripts/channels/notifications.coffee

Nó đã tạo 2 file như trên. Bây giờ mình sẽ subscribe vào channel tên là: notifications_channel

# app/channels/notifications_channel.rb
class NotificationsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "notifications_channel"
  end

  def unsubscribed
  end
end

Tạo Form

Đơn giản chỉ có một text_field và nút submit để có thể gửi nội dùng push message. View

<%= form_tag push_notification_path do %>
  <%= text_field_tag :message %>
  <%= submit_tag :submit %>
<% end %>

Controller

class NotificationsController < ApplicationController

  def push_notification
    ActionCable.server.broadcast("notifications_channel", {message: params[:message]})
    redirect_to root_path
  end
  
end

routes

Rails.application.routes.draw do
  post :push_notification, to: "notifications#push_notification"
end

Đến đây, khi submit form, nó sẽ broadcast tới notifications_channel với data object {message: params[:message]})

Làm thế nào để push notification

Ở đây mình sẽ sử dụng Push API để push notification.

https://developer.mozilla.org/en-US/docs/Web/API/Push_API

// app/assets/javascript/application.js
// request permission
Notification.requestPermission().then(function (result) {})

Để push notification, mình có thể dùng như sau:

new Notification(title, {body: body})

Từ đó, mình sẽ áp dụng cái này vào trong notifications_channel trong hàm received như sau:

App.notifications = App.cable.subscriptions.create("NotificationsChannel", {
  connected: function() {console.log("connected")},
  disconnected: function() {},
  received: function(data) {
    if (Notification.permission === "granted") {
      var title = "Push Notification"
      var options = {body: data["message"]}
      new Notification(title, options)
    }
  }
});

Như trên, sau khi submit form, controller sẽ broadcast đến notifications_channel. Sau đó hàm received sẽ được thực hiện và call push notification lên.

Đến đây là đã xong. Vào localhost:3000 và chạy thử nhé!