Uni-App access to uni-push 2.0 guide

Preparation

Activate uni-push 2.0 service

Go to the DCLOUD development center, find uniPush → 2.0 → application information, and activate the service as required


After activation, you can see the following interface:

There is also “Manufacturer Push Settings” below, because the default push can only be received after the application is started and connected to the Internet. If you want to push the application even when the application is not started and not connected to the Internet, you need to configure the settings of each manufacturer, and these manufacturers will It is required that your software must be listed on its app store. I don’t need this function here, so there is no configuration:

Client configuration

manifest.json

Find manifest.json → App module configuration → Push, and then check uniPush 2.0 → online push, offline push I don’t need to check it here:


In addition, permissions must be configured, please refer to the official:

Client logic

Add the following logic code to the onLunch life cycle of App.vue:

onLaunch: function() {<!-- -->
    // #ifdef APP-PLUS
    uni.getPushClientId({<!-- -->
        success: (res) => {<!-- -->
            let push_clientid = res.cid
            console.log('Client push ID:', push_clientid)
        },
        fail(err) {<!-- -->
            console.log(err)
        }
    })

    console.log('App Launch')
    uni.onPushMessage(res => {<!-- -->
        console.log("Push message received:", res) //Listen to push messages
        uni.createPushMessage({<!-- -->
            title: res.data.title,
            content: res.data.content,
            payload: res.data.payload
        })
    })
    // #endif
},

Method reference: uni.getPushClientId(OBJECT), uni.createPushMessage(OBJECT)

Client debugging using custom base

The client needs to use a custom base for cloud packaging to debug normally. Enter uni-app and enter Run → Run to mobile phone or simulator → Make a custom debugging base → Package, I use it here is the cloud certificate generated by the Developer Center:


For details, please refer to the official tutorial: Customizing the base, using cloud certificates (certificates generated by the server)

Then use the custom dock to launch app and turn on the notification permissions and floating notification permissions of app:


Usage examples

After the above preparations are completed, you can start using it

Push message

Fill in the push information in Developer Center → uniPush → 2.0 → Message Push:


Click Preview → OK

Receive messages

At this time, you can receive notifications on your mobile phone:


Cloud function push message

Sometimes I don’t want to activate uni-push in advance and want to give it a try first. If the project is bound to the cloud space, it can be implemented through cloud functions. In this way, app Just launch via the default base:

  1. Hover the mouse to uniCloud → cloudfunctions, right-click → Create a new cloud function/cloud object, give it a name and click “Add public module or extension library dependency” → only check ” uni-cloud-push”
  2. Replace the content of index.js in the generated folder
// Simple usage example
'use strict';
const uniPush = uniCloud.getPushManager({<!-- -->
appId: ""
}) //Note that you need to pass in your application appId here to specify the client that receives the message.
exports.main = async (event, context) => {<!-- -->
return await uniPush.sendMessage({<!-- -->
push_clientid: "", //Fill in the client push ID push_clientid obtained from the uni-app client
title: "Title displayed in the notification bar",
content: "Content displayed in the notification bar",
payload: {<!-- -->
text: "Experience uni-push2.0"
}
})
};
  1. Right-click to run the cloud function, and you will find that a notification will pop up on app

Use cloud functions to implement push on your own backend

The above can implement push messages in the background of uni-app, but what if I want to push messages in the background of my company? After a day of research, I learned that cloud functions can be url

Cloud function modification

First, the content of the cloud function needs to be modified and entered into the index.js of the previously created cloud function:

'use strict';
const uniPush = uniCloud.getPushManager({<!-- -->
appId: "your appid"
})
exports.main = async (event) => {<!-- -->
let obj = JSON.parse(event.body)
console.log(obj)
const res = await uniPush.sendMessage({<!-- -->
"push_clientid": obj.cids, // Device id, supports multiple devices specified in the form of arrays, such as ["cid-1","cid-2"]
"title": obj.title, // title
"content": obj.content, // content
"payload": obj.payload, // data
"request_id": obj.request_id //Request unique identification number, between 10-32 digits; if request_id is repeated, the message will be lost
})
return res
};


Go to the unicloud backend to see the cloud functions:

Cloud function urlization



Request tool to test url transformed cloud function

I use ApiPost. You can use Postman for anything. The url here is the complete url after editing in the previous step:


Click to send:

For specific parameters, please refer to: uni-push server API

Note

  1. If request_id is repeated, the message may be lost

  2. When the parameter cids is not passed or is an empty array, the default message will be pushed to all users, that is, “all push”, and within 10 minutes of full push, the content will be content field value cannot be repeated, otherwise the message will be lost

  3. For uniPush.sendMessage used in cloud functions, the maximum number of push devices is 500. If it exceeds, it will be ignored directly. That is, if you pass cids as an array, and the length of the array is greater than 500, then it will not work. You can consider pushing in batches, once every 500, but there is no such limit in “full push”

The following is the chat record between me and the official GeTui staff on this topic:



uni-app Background push failed?

After I studied cloud function url push, uni-app background push failed for some reason.






It is said that I only enabled online. You can see the previous client configuration manifest.json. It is true that only online is enabled because my business does not need to be offline, but I have always had this configuration before. Ah, why can I push it before? It’s strange. If you know it, you can leave a message in the comment area.

Possibly better approach

Reference: Best Practices

It’s like making full use of cloud functions, using uni-id-page, uni-push2.0, uni-id, uni Statistics, uni-push-admin, etc., you can directly deploy a backend management system for push in the cloud. I’m not sure about the details. I’m just trying to figure it out. Friends can study it themselves.

Turn on/off push

There is an official plug-in that can monitor the push service status, turn on and off the push service on the client

Plug-in address

Reference article

How to implement full-platform push based on uni-push2.0

uni-push2 unified push

UniPush activation guide