Vue 앱에 푸시 알림을 추가하는 방법

이 가이드는 OneSignal-Vue 플러그인을 사용하여 Vue 애플리케이션(무료)에 푸시 알림을 빠르게 추가하는 데 도움이 됩니다. 이 자습서를 따르려면 Vue 2 및 해당 도구에 대한 작업 지식이 필요합니다. 이 가이드의 초점은 Vue 앱에 알림을 푸시하는 방법을 보여주는 것입니다. 새 Vue 앱을 만드는 방법은 다루지 않습니다. 이를 위해서는 how to create a new Vue project 에 대한 Vue의 문서를 참조하십시오.

가이드 개요

Part 1: Set Up Your OneSignal Account

Web Configuration

Part 2: Configure Your Vue Application

Initializing the OneSignal Vue Plugin

Using the Plugin on Components

Share Your Feedback

1부: OneSignal 계정 설정

시작하려면 log in OneSignal 계정으로 이동합니다. OneSignal 계정이 없으면 쉽게 할 수 있습니다create a free account.

웹 구성

시작하려면 OneSignal 계정에 로그인하고 대시보드에서 _ 새 앱/웹사이트 _ 버튼을 클릭하세요.



앱 이름을 지정하고 웹을 플랫폼으로 선택합니다.



다음: 플랫폼 구성이라고 표시된 버튼을 클릭하여 Vue 앱에 통합할 방법을 선택할 수 있습니다.

웹 구성 창에서 사용자 지정 코드 통합 옵션을 선택하고 앱이 호스팅되는 사이트 URL과 함께 웹사이트를 참조하는 데 사용할 이름을 제공합니다. 아직 사이트 URL을 모르더라도 걱정하지 마세요. Vue 앱을 배포한 후 이를 로컬 호스트로 설정하고 업데이트할 수 있습니다.

그동안 토글을 오른쪽으로 이동하여 _ 자동 재구독 _을 활성화하여 브라우저 데이터를 지울 때에도 개발자 빌드가 항상 알림을 받도록 하세요. 또한 개발자 시스템에서 푸시 알림을 받을 수 있도록 _ 로컬 테스트 _를 활성화해야 합니다.



구성 프로세스를 계속하려면 저장 버튼을 클릭합니다.

4. 파일 업로드 섹션에서 OneSignal SDK 파일 다운로드 버튼을 클릭하여 푸시 알림을 받는 데 필요한 서비스 작업자를 얻거나 download the SDK files from our Github repository .

2부: Vue 애플리케이션 구성

이제 onesignal-vue package on npm 과 함께 제공되는 지침을 따를 수 있습니다.

선호하는 패키지 관리자를 사용하여 Vue 프로젝트에 설치onesignal-vue하십시오.

yarn add onesignal-vue

npm install --save onesignal-vue

OneSignal 대시보드에서 다운로드한 아카이브에서 서비스 작업자 파일을 추출하고 파일을 프로젝트의 public 디렉터리에 복사합니다.

OneSignal Vue 플러그인 초기화

이제 패키지를 가져오도록 main.js를 수정하고 appId 속성을 OneSignal 애플리케이션 식별자로 설정하여 플러그인을 초기화하여 플러그인을 설정할 수 있습니다.

import Vue from "vue";
import OneSignal from "onesignal-vue";

import App from "./App.vue";

Vue.config.productionTip = false;

Vue.use(OneSignal);

new Vue({
  render: h => h(App),
  beforeMount() {
    this.$OneSignal.init({
      appId: "<You OneSignal application identifier",
      allowLocalhostAsSecureOrigin: true,
    });
  },
}).$mount("#app");

구성 요소에서 플러그인 사용

초기화되면 원하는 구성 요소에서 플러그인을 사용하십시오. 이 자습서에서는 HelloWorld.vue 구성 요소에서 이를 호출하여 사이트 방문자가 푸시 알림에 옵트인할 수 있는 slide prompt을 제공합니다.
<script> 태그를 찾아 내보낸 객체에서 beforeCreate 수명 주기 후크에 대한 콜백을 설정합니다.

import OneSignal from "onesignal-vue";
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    this.$OneSignal.showSlidedownPrompt();
  },
};

통합이 완료되었습니다. yarn serve를 사용하여 앱을 시작한 다음 푸시 알림을 선택하여 테스트할 수 있습니다.

통합이 성공했음을 나타내는 테스트 푸시 알림을 받았어야 합니다.

피드백 공유

이 플러그인에 대한 귀하의 생각을 알고 싶고 추가 질문에 답변해 드리겠습니다. 우리와 연결하려면 create an issue on GitHub 또는 OneSignalDevs Discord server에 핑하여 경험을 공유하십시오. Vue.js 사용자에게 더 나은 서비스를 제공하기 위해 공유할 수 있는 통찰력에 감사드립니다!

최신 제품 업데이트 및 혁신을 계속 확인하려면 을(를) 따르십시오. 추가 지원 및 개발 영감을 얻으려면 글로벌 개발자 커뮤니티를 활용하세요.

>> OneSignal 개발자 커뮤니티와 연결