首页 > 其他分享 >多样化消息通知样式,帮助应用提升日活跃度

多样化消息通知样式,帮助应用提升日活跃度

时间:2025-01-06 17:37:03浏览次数:1  
标签:角标 样式 通知 活跃度 消息 应用 推送 多样化

在智能手机时代,用户的通知栏充斥着各种应用推送的消息。如何在这些信息中脱颖而出,激发用户的兴趣,引导他们进一步探索,是提高应用的日活跃度(DAU)的关键。

HarmonyOS SDK推送服务(Push kit)提供了多样化的通知消息样式,开发者们可以根据应用的特点和用户的需求来定制更有创意的消息文案,吸引用户关注并点击进入应用。

目前推送服务的通知消息样式支持普通通知、通知角标、通知大图标和多行文本四个样式,基于不同的消息展示形式为应用提供更加丰富和个性化的用户体验。

普通通知

普通通知消息中的元素主要包括应用图标、标题、内容和时间,其中应用图标和时间是系统统一获取的,标题和内容需要自定义,普通通知的内容默认文本内容最多显示3行,超出3行以"..."折断。

image

在开发者发送通知消息的示例代码中,应用收到通知消息后展示在通知中心的标题与内容由notification参数中的title与body字段来设置。

{
  "payload": {
    "notification": {
      "category": "MARKETING",
      "title": "推送服务",
      "body": "推送服务(Push Kit)是华为提供的消息推送平台,建立了从云端到终端的消息推送通道。您通过集成推送服务,可以向客户端应用实时推送消息,构筑良好的用户关系,提升用户的感知度和活跃度。",
      "clickAction": {
        "actionType": 0
      }
    }
  },
  "target": {
    "token": ["IQAAAACy0tE*************MXzvN7iIKSBYontV2cWj-HFTY_8lSh04w"]
  },
  "pushOptions": {
    "testMessage": true
  }

代码中category表示通知消息自分类的类别,MARKETING为资讯营销类消息,actionType为0表示打开消息进入应用首页。

通知角标

通知角标通常以红底白字的数字形式展示于应用图标的右上角,用来提醒用户该应用有未读消息,是一种有效传递信息的通知形式。

image

开发者在发送通知消息时通过携带badge字段来设置应用角标,提醒用户查看消息。

{
  "payload": {
    "notification": {
      "category": "MARKETING",
      "title": "通知标题",
      "body": "通知内容",
      "badge":{
        "addNum": 1,
        "setNum": 99
      },
      "clickAction": {
        "actionType": 0
      }
    }
  },
  "target": {
    "token": ["IQAAAACy0tE*************MXzvN7iIKSBYontV2cWj-HFTY_8lSh04w"]
  },
  "pushOptions": {
    "testMessage": true
  }
}

这里需要注意的是,addNum设置后为应用角标累加数字,非应用角标实际显示数字。setNum设置后为应用角标实际显示数字。setNum优先级高于addNum。
当用户打开应用或者点击/清理通知消息并不会清理角标数字,开发者可通过setBadgeNumber()方法清理角标。当setBadgeNumber()方法中的badgeNumber设置为0时,可以实现清理效果。

通知大图标

与其他通知样式不同,通知大图标可携带预览图片,适用于有图片预览需求类的通知,比如营销类消息可通过该样式来展示商品照片。

image

在发送通知消息时,消息体中需携带image字段来设置消息大图标内容,支持的图片格式包括png、jpg、jpeg、bmp,图片长宽建议小于128128像素,若超过49152像素,则图片不展示。

{
  "payload": {
    "notification": {
      "category": "MARKETING",
      "title": "推送服务",
      "body": "推送服务是华为提供的消息推送平台",
      "image": "https://example.com/image.png",
      "clickAction": {
        "actionType": 0
      }
    }
  },
  "target": {
    "token": ["IQAAAACy0tE*************MXzvN7iIKSBYontV2cWj-HFTY_8lSh04w"]
  },
  "pushOptions": {
    "testMessage": true
  }
}

多行文本样式

多行文本样式适用于需要换行显示的文本内容,可通过分点阐述来简明扼要地展示通知消息,最多可显示 3 行内容详情,每行超长后 "..." 截断。

image

在发送通知消息时,消息体notification中携带inboxContent和style字段设置通知消息为多行文本样式。

{
  "payload": {
    "notification": {
      "category": "MARKETING",
      "title": "推送个性化显示",
      "body": "通知内容",
      "style": 3,
      "inboxContent": [
          "1. 通知栏消息样式", 
          "2. 通知栏消息提醒方式和展示方式", 
          "3. 通知栏消息语言本地化"
          ],
      "clickAction": {
        "actionType": 0
      }
    }
  },
  "target": {
    "token": ["IQAAAACy0tE*************MXzvN7iIKSBYontV2cWj-HFTY_8lSh04w"]
  },
  "pushOptions": {
    "testMessage": true
  }
}

从消息体示例代码中可以看出,多行文本样式需要设置style字段为3。并且当发送多条通知消息导致用户通知消息折叠时,多行文本样式在展开前显示的标题与内容取自title与body字段;当用户展开多行文本消息,或仅存在一条多行文本消息时,通知中显示的标题与内容取自title与inboxContent字段。

了解更多详情>>

访问推送服务联盟官网

获取推送通知消息开发指导文档

标签:角标,样式,通知,活跃度,消息,应用,推送,多样化
From: https://www.cnblogs.com/HarmonyOSSDK/p/18655779

相关文章

  • 前端学习openLayers配合vue3(修改地图样式)
    这一块的东西非常简单,基于上一步的继续操作关键代码,当然对应的对象需要进行相关的引入//填充颜色style:newStyle({fill:newFill({color:"rgba(255,0,0,0.5)",})})效果 完整代码<scriptsetup>i......
  • 说说你对css样式穿透的了解
    CSS样式穿透,也被称为深度选择器,是一种在前端开发中常用的技术,用于跨越组件或模块的边界来修改子组件内部元素的样式。这种技术在Vue.js、Angular等现代前端框架中尤其有用,因为这些框架通常会通过scoped属性来确保组件样式的局部性,以避免样式冲突。以下是我对CSS样式穿透的详细了解......
  • WPF通过外部资源文件为主页面控件编写样式
    1.增加外部样式文件,添加资源词典(WPF)文件创建公共样式文件GlobalStyles.xaml 编写样式文件,以<style>标记开头,TargetType属性为控件类型,如按钮“Button”,单选按钮“RadioButton”等,x:Key属性自定义命名,控件在引用属性的时候需将Style属性设置为{StaticResourcekey属性}......
  • CSS样式
    CSS(层叠样式表,CascadingStyleSheets)是用来描述HTML或XML(包括SVG、MathML或XHTML等)文档的外观和格式的语言。它提供了强大的功能来控制网页的布局、颜色、字体、间距等视觉效果,从而使得网页不仅内容丰富而且美观。CSS的主要使用场景就是美化网页,布局页面的,CSS规则由两个......
  • 1个小白都能学会的多样化运营模式,上门按摩平台老板,赶紧学起来!
    对于上门按摩APP平台的老板们来说,探寻多样化的运营模式是关乎平台长远发展的重要课题。今天就来给大家分享一种相对简单却十分有效的运营方法——利用商城功能来实现运营模式的多样化。在传统的上门按摩APP平台运营中,很多往往依赖单一的分佣模式,技师靠提供按摩服务获取......
  • 在网页中加入CSS样式
    在网页中加入CSS样式可以通过多种方式实现,以下是一些常见的方法: 1.内联样式:直接在HTML元素的style属性中定义CSS样式。这种方法适用于对单个元素进行快速样式调整,但不利于样式的复用和维护。【html】<pstyle="color:red;font-size:16px;">这是一个带有内联样式的......
  • Vue中动态样式绑定+CSS变量实现切换明暗主题功能——从入门到进阶
    1.直接借助Vue的动态绑定样式绑定Vue动态样式绑定在Vue中,动态样式绑定是一种强大的功能,它允许开发者根据数据的变化动态地更新元素的样式。以下是对Vue动态样式绑定的详细知识梳理与详解:一、基础知识Vue的动态样式绑定主要通过v-bind:style(或简写为:style)指令来实现。通......
  • el-table 公共样式
    element-ui.scss表格头.el-table__header-wrapper.el-table__headertr>th{background-color:#f6f8fa;//background-color:#E9EEFA;font-size:15px;font-weight:700;color:#0A0A0A;padding:10px0;}鼠标悬停时的样式/*鼠标悬浮时,设置行的背景......
  • 如何去除超链接默认的下划线样式?
    在网页设计中,超链接默认带有下划线样式,为了实现更好的页面美观度和设计效果,常需要去除这一默认样式。以下是几种常见的去除超链接默认下划线样式的方法:使用CSS的text-decoration属性方法:在CSS中,text-decoration属性用于控制文本的装饰效果,包括下划线、上划线、删除线......
  • 炫酷吹风机样式loading进度条插件
    这是一款炫酷吹风机样式loading进度条jquery插件。该吹风机样式loading进度条通过jquery和CSS3动画来构建进度条,用户可以通过调用插件的方式来使用这个Loading特效。在线预览  下载 使用方法在页面中引入jquery和blower-loading.js文件,以及样式文件style.css。<li......