Push-уведомления в ионных приложениях с Google Cloud Messaging

 window.errorHandler = function(error){ alert('an error occured'); } 

Играть звуки

Если вы хотите воспроизводить звук при получении уведомления, нам нужно добавить mp3-файл в папку platform / android / res / raw . Моя названа уведомлением .mp3 . Запишите имя файла, и мы добавим его на серверную часть позже, когда отправим уведомление. Вы можете скачать некоторые звуки уведомлений здесь .

Сторона сервера

Сервер отвечает за прием токена устройства, отправленного из приложения, а также за отправку push-уведомлений.

Создайте папку сервера внутри корневого каталога проекта, затем создайте файл ionic-gcm.js . Это файл, который будет содержать код для запуска сервера узла. Этот файл имеет три зависимости: express , node-gcm и body-parser . Установите те, кто использует npm.

 npm install express node-gcm body-parser 

Откройте файл ionic-gcm.js и запросите эти зависимости.

 var express = require('express'); var gcm = require('node-gcm'); 

Используйте экспресс.

 var app = express(); 

Создайте сервер, который прослушивает запросы на порт 3000.

 var server = app.listen(3000, function(){ console.log('server is running'); }); 

Настройте сервер для разрешения всех источников запросов. Это позволяет AJAX-запросам приходить с любого IP-адреса.

 app.use(function(req, res, next){ res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); }); 

Создайте глобальную переменную для хранения текущего токена устройства. Это будет обновлено при доступе к маршруту /register . И текущее значение будет использоваться при доступе к маршруту /push .

 var device_token; 

Создайте новый маршрут для пути /register . Это маршрут для регистрации устройства. Вы можете получить доступ к device_token который был передан через свойство body в объекте req .

Обратите внимание, что я не добавил ни одного кода, связанного с сохранением токена устройства в базе данных. Я ожидаю, что у вас есть свой собственный, поэтому я положил его там как TODO. На данный момент он использует глобальную переменную device_token для хранения токена устройства. После того, как вы сохранили device_token , отправьте ok в качестве ответа.

 app.post('/register', function(req, res){ device_token = req.body.device_token; console.log('device token received'); console.log(device_token); /*YOUR TODO: save the device_token into your database*/ res.send('ok'); }); 

Чтобы отправить push-уведомления :

1. Создайте маршрут для пути /push .
2. В функции обратного вызова создайте новый массив, в котором будут храниться токены устройства, и переменную, в которой будет храниться количество попыток отправки сообщения.
3. Создайте новый экземпляр отправителя, вызвав функцию Sender . Это принимает ключ API из консоли Google.
4. Создайте новое сообщение, вызвав функцию Message в объекте gcm . Этот объект предоставляется пакетом node-gcm .
5. Добавьте данные для передачи в push-уведомлении, вызвав функцию addData сообщения. Эта функция принимает пару ключ-значение данных для передачи. Необходимые ключи — title и message . title — это заголовок push-уведомления, а message — содержимое. В приведенном ниже примере sound клавиша также передается. Это имя звукового файла, который вы хотите воспроизвести при получении уведомления.
6. При желании вы можете установить collapseKey для групповых уведомлений. Это позволяет отправлять уведомление № 1 с помощью collapseKey а затем через несколько минут — уведомление № 2 с таким же collapseKey . Что произойдет, так это то, что уведомление № 2 заменит уведомление № 1. То есть, если пользователь все еще не открыл уведомление № 1, когда приходит уведомление № 2.
7. delayWhileIdle — еще одно необязательное свойство, если для него установлено значение true , уведомление не отправляется немедленно, если устройство не используется. Это означает, что сервер ожидает активации устройств, прежде чем отправит уведомление. Обратите внимание, что если установлен collapseKey , сервер будет отправлять только самые последние отправленные сообщения, содержащие этот collapseKey . Наконец, есть timeToLive который позволяет установить количество секунд, в течение которых сообщение будет храниться на сервере, когда принимающее устройство отключено. Если вы указываете это свойство, вам также нужно указать collapseKey .
8. Это еще один шаг, который я ожидаю от вас самостоятельно. device_token из базы данных. Чтобы сделать это, вам нужно передать user_id или другой уникальный идентификатор пользователя. Это позволит вам извлечь device_token , используя эти уникальные данные в качестве ключа. В приведенном ниже примере вместо этого используется значение глобальной переменной device_token . Таким образом, каждый раз, когда регистрируется новое устройство, оно будет тем, которое получит уведомление.
9. Вставьте полученный из базы данных device_tokens массив device_tokens .
10. Вызовите функцию send в объекте message . Это принимает message device_tokens , retry_times и функцию для вызова после отправки сообщения.
11. Отправьте ok ответ.

 app.get('/push', function(req, res){ var device_tokens = []; //create array for storing device tokens var retry_times = 4; //the number of times to retry sending the message if it fails var sender = new gcm.Sender('THE API KEY OF YOUR GOOGLE CONSOLE PROJECT'); //create a new sender var message = new gcm.Message(); //create a new message message.addData('title', 'New Message'); message.addData('message', 'Hello this is a push notification'); message.addData('sound', 'notification'); message.collapseKey = 'testing'; //grouping messages message.delayWhileIdle = true; //delay sending while receiving device is offline message.timeToLive = 3; //the number of seconds to keep the message on the server if the device is offline /* YOUR TODO: add code for fetching device_token from the database */ device_tokens.push(device_token); sender.send(message, device_tokens, retry_times, function(result){ console.log(result); console.log('push sent to: ' + device_token); }); res.send('ok'); }); 

Запустите сервер, вызвав его из терминала:

 node ionic-gcm.js 

Если вы хотите использовать ngrok для показа этого сервера в Интернете, откройте новое окно терминала, в котором вы установили ngrok, и выполните следующую команду:

 ngrok http 3000 

Это говорит ngrok об открытии порта 3000 для Интернета и назначении ему общедоступного URL.

Развертывание приложения

Возвращаясь к приложению. Перейдите в корневой каталог приложения и обновите base_url в www / js / services / RequestsService.js, чтобы он соответствовал URL-адресу, предоставленному ngrok.

 var base_url = 'http://{YOUR SERVER}'; 

Добавьте платформу Android:

 cordova platform add android 

Не забудьте добавить mp3-файл в каталог platform / android / res / raw, чтобы звук работал.

Создайте приложение, выполнив следующую команду:

 cordova build android 

После этого перейдите в каталог платформы / android / build / output / apk / и скопируйте файл android-debug.apk на ваше устройство Android. Установите и откройте его. После открытия он должен переслать токен устройства на сервер.

Он должен показать что-то похожее на следующее в окне терминала, где вы выполнили node ionic-gcm.js :

 device token received sjdlf0ojw3ofjowejfowefnosfjlsjfosnf302r3n2on3fon3flsnflsfns0f9un 

Теперь вы можете проверить push-уведомление, открыв следующий локальный URL-адрес в браузере:

 http://localhost:3000/push 

В этот момент ваше устройство должно получить push-уведомление. Вот скриншот.

Вывод

Это оно! Из этого руководства вы узнали, как работать с платформой Google Cloud Messaging для Android, чтобы отправлять push-уведомления в приложение Cordova. Если у вас есть какие-либо вопросы, комментарии или проблемы, пожалуйста, дайте мне знать в комментариях ниже.