uni-app 推送系统

章节介绍

推送系统是现代移动应用的重要组成部分，它能够帮助应用与用户保持连接，及时传递重要信息，提升用户活跃度和留存率。uni-app 作为跨平台开发框架，支持集成多种推送服务，实现全平台的消息推送功能。本章节将详细介绍 uni-app 推送系统的集成方法和最佳实践。

核心知识点

1. 推送平台概述

在 uni-app 中，常用的推送平台包括：

  • 极光推送：支持 iOS、Android、Web 等多平台
  • 个推：提供丰富的推送功能和数据分析
  • 阿里云推送：整合阿里云生态，支持多种推送方式
  • 腾讯云推送：包括信鸽推送，适合有腾讯生态需求的应用
  • 各平台原生推送：如 Apple Push Notification Service (APNs)、Firebase Cloud Messaging (FCM) 等

2. 推送系统架构

一个完整的推送系统通常包含以下组件：

  • 推送服务端：负责消息的生成、管理和发送
  • 推送平台：负责消息的路由和投递
  • 客户端 SDK：负责接收和处理推送消息
  • 应用前端：负责消息的展示和用户交互

3. uni-app 推送集成方法

uni-app 提供了多种推送集成方式：

3.1 使用 uni-push

uni-push 是 DCloud 官方提供的推送服务，集成了多家推送服务商，支持全平台推送。

优势：

  • 一次集成，多平台覆盖
  • 支持离线推送
  • 提供完整的推送管理后台
  • 与 uni-app 深度集成，使用简单

3.2 集成第三方推送 SDK

对于有特殊需求的应用，可以选择集成第三方推送 SDK。

步骤：

  1. 在对应平台的开发者后台注册应用
  2. 获取推送所需的 AppKey、AppSecret 等配置
  3. 在 uni-app 中通过原生插件或条件编译集成 SDK
  4. 实现推送消息的接收和处理逻辑

4. 消息类型与推送策略

4.1 消息类型

  • 通知栏消息：直接显示在系统通知栏，用户点击后可跳转到应用指定页面
  • 透传消息：不直接显示，由应用自行处理，可用于静默更新、数据同步等
  • 本地通知：无需网络连接，由应用本地触发的通知

4.2 推送策略

  • 全量推送：向所有用户发送相同的消息
  • 定向推送：根据用户标签、地域、设备等属性定向发送
  • 个性化推送：根据用户行为和偏好发送定制化消息
  • 定时推送：在指定时间发送消息
  • 触发式推送：基于用户行为触发的推送

5. 用户订阅管理

5.1 订阅机制

  • 显式订阅：用户主动选择订阅特定类型的消息
  • 隐式订阅：基于用户行为和偏好自动生成订阅标签

5.2 订阅管理

  • 提供消息订阅管理界面
  • 支持用户修改订阅偏好
  • 遵守各平台的推送规范和隐私政策

6. 推送效果分析

  • 送达率：消息成功送达的比例
  • 点击率：用户点击消息的比例
  • 转化率：用户点击消息后完成目标行为的比例
  • 用户活跃度：推送对用户活跃度的影响
  • 用户留存率：推送对用户留存的影响

实用案例

案例：实现智能推送功能

需求分析

开发一个电商应用的智能推送系统，实现以下功能：

  1. 新用户注册欢迎消息
  2. 商品降价提醒
  3. 促销活动通知
  4. 订单状态更新
  5. 个性化商品推荐

技术方案

使用 uni-push 作为推送服务，结合后端系统实现智能推送功能。

代码实现

1. 初始化 uni-push

在 App.vue 中初始化 uni-push：

// App.vue
onLaunch: function() {
  // 初始化 uni-push
  this.initUniPush();
},
methods: {
  initUniPush() {
    // 检查推送权限
    uni.getProvider({  
      service: 'push',  
      success: (res) => {
        console.log('推送服务提供商:', res.provider);
        if (res.provider.includes('uniPush')) {
          // 注册推送
          this.registerPush();
        }
      }
    });
  },
  registerPush() {
    // 注册推送
    uni.registerPush({
      success: (res) => {
        console.log('推送注册成功:', res);
        // 获取 clientid
        uni.getPushClientId({
          success: (res) => {
            console.log('客户端ID:', res.cid);
            // 将 clientid 发送到服务器
            this.sendClientId(res.cid);
          }
        });
      },
      fail: (err) => {
        console.log('推送注册失败:', err);
      }
    });
    
    // 监听推送消息
    uni.onPushMessage((res) => {
      console.log('收到推送消息:', res);
      // 处理推送消息
      this.handlePushMessage(res);
    });
  },
  sendClientId(cid) {
    // 调用后端 API，将 clientid 与用户关联
    uni.request({
      url: 'https://api.example.com/push/register',
      method: 'POST',
      data: {
        clientId: cid,
        userId: uni.getStorageSync('userId')
      },
      success: (res) => {
        console.log('ClientId 注册成功:', res);
      }
    });
  },
  handlePushMessage(message) {
    // 处理不同类型的推送消息
    const { type, data } = message;
    
    switch (type) {
      case 'notification':
        // 通知栏消息
        console.log('通知栏消息:', data);
        break;
      case 'message':
        // 透传消息
        console.log('透传消息:', data);
        this.handleTransparentMessage(data);
        break;
      default:
        console.log('未知类型消息:', message);
    }
  },
  handleTransparentMessage(data) {
    // 处理透传消息
    const { action, content } = data;
    
    switch (action) {
      case 'order_update':
        // 订单状态更新
        this.updateOrderStatus(content.orderId);
        break;
      case 'price_drop':
        // 商品降价
        this.showPriceDropAlert(content.productId, content.oldPrice, content.newPrice);
        break;
      default:
        console.log('未知 action:', action);
    }
  }
}
2. 实现消息订阅管理

创建消息订阅管理页面：

<!-- pages/push-subscribe/push-subscribe.vue -->
<template>
  <view class="subscribe-container">
    <view class="section">
      <text class="section-title">消息订阅设置</text>
      
      <view class="subscribe-item">
        <text class="item-label">新用户活动</text>
        <switch 
          :checked="subscriptions.newUser" 
          @change="updateSubscription('newUser', $event.detail.value)"
        />
      </view>
      
      <view class="subscribe-item">
        <text class="item-label">商品降价提醒</text>
        <switch 
          :checked="subscriptions.priceDrop" 
          @change="updateSubscription('priceDrop', $event.detail.value)"
        />
      </view>
      
      <view class="subscribe-item">
        <text class="item-label">促销活动通知</text>
        <switch 
          :checked="subscriptions.promotion" 
          @change="updateSubscription('promotion', $event.detail.value)"
        />
      </view>
      
      <view class="subscribe-item">
        <text class="item-label">订单状态更新</text>
        <switch 
          :checked="subscriptions.orderUpdate" 
          @change="updateSubscription('orderUpdate', $event.detail.value)"
        />
      </view>
      
      <view class="subscribe-item">
        <text class="item-label">个性化推荐</text>
        <switch 
          :checked="subscriptions.recommendation" 
          @change="updateSubscription('recommendation', $event.detail.value)"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      subscriptions: {
        newUser: true,
        priceDrop: true,
        promotion: true,
        orderUpdate: true,
        recommendation: true
      }
    };
  },
  onLoad() {
    // 从服务器获取用户订阅设置
    this.loadSubscriptions();
  },
  methods: {
    loadSubscriptions() {
      uni.request({
        url: 'https://api.example.com/push/subscriptions',
        method: 'GET',
        data: {
          userId: uni.getStorageSync('userId')
        },
        success: (res) => {
          if (res.data.code === 0) {
            this.subscriptions = res.data.data;
          }
        }
      });
    },
    updateSubscription(key, value) {
      this.subscriptions[key] = value;
      
      // 保存订阅设置到服务器
      uni.request({
        url: 'https://api.example.com/push/subscriptions/update',
        method: 'POST',
        data: {
          userId: uni.getStorageSync('userId'),
          subscriptions: this.subscriptions
        },
        success: (res) => {
          if (res.data.code === 0) {
            uni.showToast({
              title: '设置成功',
              icon: 'success'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.subscribe-container {
  padding: 20rpx;
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}

.subscribe-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.subscribe-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 28rpx;
  color: #666;
}

switch {
  transform: scale(0.8);
}
</style>
3. 后端推送服务实现

以下是一个简单的 Node.js 后端推送服务示例：

// server.js
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');

const app = express();
app.use(bodyParser.json());

// 推送配置
const PUSH_CONFIG = {
  appKey: 'your_uni_push_appkey',
  masterSecret: 'your_uni_push_master_secret',
  url: 'https://rest-api.getui.com/v2/'
};

// 注册客户端 ID
app.post('/push/register', (req, res) => {
  const { clientId, userId } = req.body;
  
  // 保存 clientId 与 userId 的关联
  console.log(`用户 ${userId} 注册推送，clientId: ${clientId}`);
  
  // 实际应用中应保存到数据库
  
  res.json({ code: 0, message: '注册成功' });
});

// 发送推送消息
app.post('/push/send', (req, res) => {
  const { userId, title, content, payload } = req.body;
  
  // 获取用户的 clientId
  const clientId = 'user_client_id'; // 实际应用中应从数据库查询
  
  // 构建推送消息
  const pushMessage = {
    notification: {
      title: title,
      body: content,
      clickType: 'startapp',
      payload: payload
    }
  };
  
  // 调用 uni-push API 发送消息
  sendUniPushMessage(clientId, pushMessage, (err, result) => {
    if (err) {
      console.error('推送失败:', err);
      res.json({ code: 1, message: '推送失败' });
    } else {
      console.log('推送成功:', result);
      res.json({ code: 0, message: '推送成功' });
    }
  });
});

// 发送 uni-push 消息
function sendUniPushMessage(clientId, message, callback) {
  // 实际应用中应使用官方 SDK 或正确的 API 调用方式
  // 这里仅作为示例
  console.log(`向 ${clientId} 发送消息:`, message);
  callback(null, { success: true });
}

app.listen(3000, () => {
  console.log('推送服务启动，监听端口 3000');
});

案例：实现智能推送功能

业务场景

某电商应用希望实现智能推送功能，根据用户行为和偏好发送个性化消息，提高用户转化率和留存率。

实现方案

  1. 用户行为分析：

    • 记录用户浏览、搜索、购买等行为
    • 分析用户偏好和购买习惯
    • 构建用户画像和标签体系

  2. 智能推送策略：

    • 新用户欢迎：注册后 24 小时内发送欢迎消息和新手福利
    • 商品降价：用户关注的商品降价时发送提醒
    • 购物车提醒：用户购物车有商品未结算时发送提醒
    • 复购提醒：根据用户购买周期发送复购提醒
    • 个性化推荐：基于用户行为推荐相关商品

  3. 推送效果优化：

    • 时间优化：根据用户活跃时间发送消息
    • 频率控制：避免过度推送打扰用户
    • 内容优化：根据用户偏好定制推送内容
    • A/B 测试：测试不同推送策略的效果

跨平台推送注意事项

1. 平台差异

  • iOS：

    • 需要配置 APNs 证书
    • 应用退后台后依赖 APNs 推送
    • 需要用户授权推送权限

  • Android：

    • 不同厂商的推送通道不同（如小米推送、华为推送等）
    • 应用被杀后台后推送到达率受影响
    • 需要处理应用自启动权限

  • Web：

    • 使用 Web Push API
    • 需要 HTTPS 环境
    • 浏览器支持程度不同

  • 小程序：

    • 每个平台的小程序都有自己的推送机制
    • 通常需要用户订阅消息模板
    • 推送内容和频率受平台限制

2. 权限管理

  • 遵循各平台的权限申请规范
  • 向用户明确说明推送的用途和价值
  • 提供简单的推送管理界面
  • 尊重用户的推送偏好设置

3. 性能优化

  • 推送消息大小应控制在合理范围内
  • 避免频繁推送导致用户疲劳
  • 优化推送服务端性能，确保消息及时送达
  • 合理使用推送队列，避免高峰期推送失败

代码优化建议

1. 推送服务封装

将推送相关功能封装成独立的服务模块，便于维护和使用：

// utils/push.js
class PushService {
  constructor() {
    this.isInitialized = false;
  }
  
  // 初始化推送
  init() {
    if (this.isInitialized) return;
    
    // 检查推送权限
    uni.getProvider({  
      service: 'push',  
      success: (res) => {
        if (res.provider.includes('uniPush')) {
          this.registerPush();
        }
      }
    });
    
    this.isInitialized = true;
  }
  
  // 注册推送
  registerPush() {
    uni.registerPush({
      success: (res) => {
        console.log('推送注册成功:', res);
        this.getClientId();
      },
      fail: (err) => {
        console.log('推送注册失败:', err);
      }
    });
    
    // 监听推送消息
    uni.onPushMessage((res) => {
      this.handleMessage(res);
    });
  }
  
  // 获取客户端 ID
  getClientId() {
    uni.getPushClientId({
      success: (res) => {
        console.log('客户端ID:', res.cid);
        this.clientId = res.cid;
        this.bindUserId();
      }
    });
  }
  
  // 绑定用户 ID
  bindUserId() {
    const userId = uni.getStorageSync('userId');
    if (userId && this.clientId) {
      uni.request({
        url: 'https://api.example.com/push/register',
        method: 'POST',
        data: {
          clientId: this.clientId,
          userId: userId
        }
      });
    }
  }
  
  // 处理推送消息
  handleMessage(message) {
    console.log('收到推送消息:', message);
    
    // 根据消息类型处理
    if (message.type === 'notification') {
      this.handleNotification(message.data);
    } else if (message.type === 'message') {
      this.handleTransparentMessage(message.data);
    }
  }
  
  // 处理通知栏消息
  handleNotification(data) {
    console.log('通知栏消息:', data);
    // 处理通知栏消息逻辑
  }
  
  // 处理透传消息
  handleTransparentMessage(data) {
    console.log('透传消息:', data);
    // 处理透传消息逻辑
  }
}

export default new PushService();

2. 消息处理优化

优化推送消息的处理逻辑，提高用户体验：

// 优化消息处理
handleMessage(message) {
  // 检查应用状态
  const appState = this.getAppState();
  
  // 根据应用状态处理消息
  if (appState === 'foreground') {
    // 应用在前台，显示本地通知或弹出提示
    this.showInAppNotification(message);
  } else {
    // 应用在后台，由系统处理通知栏显示
    console.log('应用在后台，消息由系统处理');
  }
  
  // 记录消息点击统计
  this.trackMessageReceived(message);
}

// 显示应用内通知
showInAppNotification(message) {
  // 实现应用内通知组件
  // 可以使用弹出框或顶部通知条
}

// 跟踪消息统计
trackMessageReceived(message) {
  // 发送统计数据到服务器
  uni.request({
    url: 'https://api.example.com/push/track',
    method: 'POST',
    data: {
      messageId: message.messageId,
      action: 'received',
      timestamp: Date.now()
    }
  });
}

章节总结

本章节详细介绍了 uni-app 推送系统的集成方法和最佳实践，包括：

  1. 核心知识点：

    • 推送平台概述和选择
    • 推送系统架构
    • uni-app 推送集成方法
    • 消息类型与推送策略
    • 用户订阅管理
    • 推送效果分析

  2. 实用案例：

    • 实现智能推送功能的完整方案
    • 跨平台推送的代码实现
    • 后端推送服务的设计

  3. 跨平台注意事项：

    • 各平台推送差异和解决方案
    • 权限管理和用户体验
    • 性能优化和最佳实践

  4. 代码优化建议：

    • 推送服务的封装
    • 消息处理的优化
    • 统计和分析的实现

通过本章节的学习，您应该能够掌握 uni-app 推送系统的集成方法，实现智能、高效的消息推送功能，提升应用的用户活跃度和留存率。在实际应用中，您可以根据具体需求选择合适的推送平台和策略，不断优化推送效果，为用户提供更好的体验。

学习建议

  1. 实践练习：搭建一个完整的推送系统，包括前端集成和后端服务
  2. 平台测试：在不同平台上测试推送功能，了解平台差异
  3. 效果分析：收集和分析推送数据，优化推送策略
  4. 用户反馈：关注用户对推送的反馈，不断调整推送内容和频率
  5. 持续学习：关注推送技术的发展和各平台的更新，及时调整实现方案
« 上一篇 uni-app 支付集成 下一篇 » uni-app 分享系统
↑