OneSignal 웹 푸시 알림 on Rails 사용

14992 단어 OneSignal Ruby Rails

이 글은 신주대학교 kstmadvent 달력 20일째, 제 생일 12월 20일째 공개된 21살

을 맞이했습니다.
나는 단지 20, 20, 21이라는 아쉬운 느낌을 말하고 싶었을 뿐이다.

개시하다

최근 인터넷 관련 기술이 인기를 끌면서 웹 응용 서비스도 산적해 있다.
또한 대부분의 웹 서비스에 로컬 애플리케이션(즉 iOS와 안드로이드 앱 등)이 있다는 것은 오늘날도 당연하다.
그런데 궁금한 거 없어요?

같은 내용으로 두 개를 왜 준비했을까?

브라우저에서만 사용하면 안 되나요?

어떤 장점이 있습니까?

여기서 웹 서비스와 로컬 응용 프로그램 사이에는 알림 방법이 다르다고 생각합니다.
웹 서비스에서 메일 알림은 등록된 메일 주소에 대한 주요 알림 수단으로 로컬 응용 프로그램은 터미널에 대한 전송 알림을 이용한다.
우편물은 공식적인 연락 수단이라 통지로 이용되는 건 좋지 않죠.
또 상대방에게 알리기 위해 로컬 앱을 만드는 것은 번거롭다.
따라서 웹 애플리케이션에 간단히 알림 기능OneSignal을 제공합니다.

컨디션

macOS 10.13.6

ruby 2.5.1

Rails 5.2.1

인형이 되다

간편한 Rails 애플리케이션 구축
이번에는 스캐프폴드에서 포스트 모형을 제작해 CURD가 성공하는 동시에 알림을 제작한다.

$ rails new -B -T -M -C onesignal-on-rails
$ cd onesignal-on-rails

OneSignal의api를 두드려야 하기 때문에 Gemfile에 HTTPartybundle install를 추가합니다.

# Gemfile

+ gem 'httparty'

$ bundle install --path=vendor/bundle

주제넘은 말을 하고 rails 프로젝트를 만들 때 전 세계에 설치하는 사람이 많나요?
node와 같이 기본값node_modules을 설정하면 로컬로 설치하는 방법이 좋을 것 같아요...
Scaffold를 사용하여 초기 형태를 만듭니다.

$ bundle exec rails g scaffold post title:string content:text
$ bundle exec rails db:migrate

config/routes.rb

Rails.application.routes.draw do
  resources :posts
  root to: 'posts#index' # 追加
end

bundle exec rails s 이후localhost:3000 디스플레이를 확인하면 완성됩니다.

OneSignal 설정

우선OneSignal시그럽시다.
GiitHub 계정을 사용할 수 있습니다.
서명 후 ADD 앱을 진행합니다.

그리고 플랫폼에 대한 질문을 받았기 때문에 이번에는 Web Push를 선택했습니다.

다음은 다양한 항목을 설정합니다.

Choose Integration은 Typical Site

입니다.

Site URL은 localhost:3000

Subscript에 Subscription Bell, HTTP-P-Up

포함
Site name 및 Choose a label 을 적절하게 지정하십시오.
Permission Proompt의 설정에서 표시된 문을 편집할 수도 있습니다.

종료 후 Save를 설정하고 표시된 코드를 복사합니다.
복사된 코드는 application.html.erb의 헤드 탭 내부에 약간의 변경을 추가한 후 붙여넣습니다.
app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>OnesignalOnRails</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- ここから -->
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
    <script>
      var OneSignal = window.OneSignal || [];
      OneSignal.push(function() {
        OneSignal.init({
          appId: "your-app-id",
          notifyButton: {
            enable: true,
          }
        });
      });
    </script>
    <!-- ここまで -->

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

알림 생성

CURD 각각의 작업이 수행되었을 때 알림이 발생하므로 이 처리는 ServiceObject로 미리 요약됩니다.your-rest-api-key OneSignal의 Acount Management를 통해 확인할 수 있습니다.
app/service/create_notification.rb

class CreateNotification
  include HTTParty

  API_URI = 'https://onesignal.com/api/v1/notifications'.freeze

  def self.call(*args)
    new(*args).call
  end

  def initialize(contents:, type:)
    @contents = contents
    @type     = type
  end

  def call
    HTTParty.post(API_URI, headers: headers, body: body)
  end

  private

  attr_reader :contents, :type

  def headers
    {
      'Authorization' => 'Basic your-rest-api-key',
      'Content-Type'  => 'application/json'
    }
  end

  def body
    {
      'app_id' => 'your-app-id',
      'url'    => 'localhost:3000',
      'data'   => { 'type': type },
      'included_segments' => ['All'],
      'contents' => contents
    }.to_json
  end
end

이후에는 Controller의 모든 동작CreateNotification.call만 수행됩니다.
app/controllers/posts_controller.rb

def create
  ...

  CreateNotification.call(
    contents: { 'en' => 'Post created!', 'ja' => 'ポストが作成されました！' },
    type: 'posts#create'
  )
  ...
end

def update
  ...
  CreateNotification.call(
    contents: { 'en' => 'Post updated!', 'ja' => 'ポストが更新されました！' },
    type: 'posts#update'
  )
  ...
end

def destroy
  ...
  CreateNotification.call(
    contents: { 'en' => 'Post destroyed!', 'ja' => 'ポストが削除されました！' },
    type: 'posts#destroy'
  )
  ...
end