uniapp은 오프라인 메시징 기능을 어떻게 구현하나요?-uni-app-php.cn

집

웹 프론트엔드

uni-app

uniapp은 오프라인 메시징 기능을 어떻게 구현하나요?

PHPz

Apr 18, 2023 pm 02:10 PM

모바일 인터넷의 대중화와 발전으로 메시지 푸시는 모바일 애플리케이션의 표준 기능 중 하나가 되었습니다. 실제 애플리케이션 시나리오에서 사용자는 장치가 인터넷에 연결되지 않아 일부 중요한 메시지를 놓칠 수 있는 상황에 자주 직면합니다. 이러한 문제를 해결하기 위해 Jiguang Push에서는 푸시 메시지를 Jiguang 서버에 일시적으로 저장했다가 기기가 인터넷에 연결된 후 다시 사용자에게 푸시할 수 있는 오프라인 메시징 기능을 제공합니다. uniapp 애플리케이션에서는 오프라인 메시지 구현도 매우 간단합니다.

1. Aurora 푸시 구성

먼저, Aurora 공식 홈페이지에 개발자 계정을 등록하고 애플리케이션을 만들어야 합니다. 그런 다음 공식 문서의 지침에 따라 애플리케이션의 기본 구성(예: 애플리케이션 이름, 패키지 이름, 서명 등 입력)을 완료하고 Aurora Push SDK를 uniapp 애플리케이션에 통합합니다.

2. 오프라인 메시지 설정

Jigang의 오프라인 메시지 기능을 사용하려면 Jiguang의 공식 웹사이트 콘솔에서 오프라인 메시지 옵션을 활성화해야 합니다

다음으로 uniapp 애플리케이션의 main.js 파일에 다음 코드를 추가하세요.

import Vue from 'vue'
import App from './App'

// 引入uni推送插件
import { getRegistrationId } from '@/common/jpush.js'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})

// 获取极光注册id
getRegistrationId()

// 将app实例挂载在uni上
uni.$app = app

app.$mount()

로그인 후 복사

이 코드에서는 먼저 수동으로 생성해야 하는 "jpush.js"라는 파일을 소개합니다. 다음으로, "getRegistrationId" 메서드를 통해 디바이스의 Aurora 등록 ID를 획득하고 이를 캐시합니다. 이 메서드의 구현은 다음 섹션에서 설명됩니다.

3. 오프라인 메시지 획득

이전 섹션에서는 장치의 Aurora 등록 ID를 획득하고 캐시하는 "jpush.js"라는 파일을 언급했습니다. 이 파일의 코드는 다음과 같습니다.

// 引入uni-app插件包
import { jpush } from '@uni/plugins'

/**
 * 获取极光注册id
 */
export function getRegistrationId() {
  // 先尝试从缓存中获取
  let registrationId = uni.getStorageSync('jpushRegistrationId')
  if (registrationId) {
    return registrationId
  }
  // 调用极光推送插件获取注册id
  jpush.getRegistrationID({
    success(res) {
      console.log('获取jpush注册id成功', res)
      // 缓存注册id
      uni.setStorageSync('jpushRegistrationId', res.registrationId)
      // 将注册id发送到后台服务器
      sendRegistrationIdToServer(res.registrationId)
    },
    fail(err) {
      console.error('获取jpush注册id失败', err)
    }
  })
}

로그인 후 복사

위 코드에서는 먼저 캐시에서 기기의 Aurora 등록 ID를 가져오려고 시도하고, 캐시에 이미 존재하는 경우 직접 반환합니다. 캐시에 존재하지 않는 경우 uni-app에서 jpush 플러그인의 "getRegistrationID" 메소드를 호출하여 장치의 등록 ID를 가져옵니다. 이때 성공적인 콜백 함수에서 반환되는 "res" 객체에는 해당 기기의 등록 ID 정보가 포함되어 있습니다. 이 등록 ID를 로컬 스토리지에 캐시하고 백엔드 서버로 전송하므로 장치가 인터넷에 연결할 수 없는 경우 서버는 이 등록 ID를 사용하여 Aurora 서버에 오프라인 메시지를 임시로 저장할 수 있습니다.

4. 애플리케이션 시작 시 오프라인 메시지 확인

기기가 인터넷에 다시 연결되면 Jiguang 서버에 임시로 저장된 오프라인 메시지를 가져와서 사용자에게 푸시하려고 합니다. 이 프로세스에서는 앱이 시작될 때 기기에 오프라인 메시지가 있는지 확인하고 이를 사용자에게 하나씩 푸시해야 합니다. 이 로직은 다음 코드에서 구현됩니다.

// 引入uni-app插件包
import { jpush } from '@uni/plugins'

// 在应用启动时检查离线消息
checkOfflineMessage()

/**
 * 应用启动时检查离线消息
 */
function checkOfflineMessage() {
  // 调用极光推送插件获取离线消息
  jpush.getOfflineMessage({
    success(res) {
      console.log('获取离线消息成功', res)
      // 将离线消息依次推送给用户
      res.forEach(message => pushMessageToUser(message))
    },
    fail(err) {
      console.error('获取离线消息失败', err)
    }
  })
}

/**
 * 推送离线消息给用户
 * @param {Object} message 
 */
function pushMessageToUser(message) {
  // 在这里将离线消息推送给用户
  // ...
}

로그인 후 복사

위 코드에서는 애플리케이션이 시작될 때 먼저 "checkOfflineMessage" 메서드를 호출하여 장치에 오프라인 메시지가 있는지 확인합니다. 이 방법에서는 uni-app의 jpush 플러그인에서 "getOfflineMessage" 메서드를 호출하여 오프라인 메시지를 가져옵니다. 성공 콜백 함수의 "res" 개체에는 모든 오프라인 메시지 정보가 포함됩니다. 여기서는 오프라인 메시지를 사용자에게 순차적으로 푸시할 수 있습니다.

요약

본 글의 소개를 통해 독자들은 오로라 오프라인 메시징 기능을 유니앱 애플리케이션에 통합하는 방법을 배울 수 있습니다. 구체적으로 다음 단계가 포함됩니다.