Статьи

Изменить номер значка приложения Ionic Framework

Декабрь 5, 2017

Ранее я писал в блоге Саймона Реймлера о местных уведомлениях с помощью Ionic Framework . Тем не менее, есть другое уведомление, которое вы можете использовать в своем приложении. В iOS и во многих других версиях Android (не во всех) у вас есть возможность использовать значки значков на значке панели запуска. Хотя это не уведомляет пользователей с подсказкой, оно все равно уведомляет их на их домашнем экране, что что-то требует их внимания.

Есть отличный плагин Apache Cordova, созданный Себастьяном Катцером, который называется cordova-plugin-badge , который позволит нам легко добавить эту функциональность в наши мобильные приложения Ionic Framework .

Прежде чем читать слишком подробно, если вы разработчик Android, обратите внимание, что не все версии Android поддерживают значки. Не позволяйте этой концепции управлять функциональностью вашего приложения для Android.

Начнем с создания нового проекта Ionic Framework для Android и iOS с помощью терминала или командной строки:

ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

Создать новый Ionic Project Shell 1 2 3 4 ионный запуск IonicProject blank cd IonicProject ионная платформа добавить IOS ионная платформа добавить Android

Как всегда, имейте в виду, что если вы не используете Mac, вы не сможете добавлять и собирать для платформы iOS.

Следующим шагом будет установка плагина для Apache Cordova. С проектом Ionic в качестве текущего рабочего каталога в терминале или командной строке выполните следующее:

cordova plugin add https://github.com/katzer/cordova-plugin-badge.git

Установите плагин Apache Cordova Badge Shell 1 и добавьте плагин cordova https: / / github .com / katzer / cordova — плагин — значок .git

Это позволит вам теперь использовать необработанный JavaScript для добавления количества значков к вашим иконкам запуска. Однако, поскольку мы используем Ionic Framework, который построен на AngularJS , имеет смысл только установить набор расширений AngularJS, ngCordova , чтобы сделать наш процесс разработки немного проще.

Поскольку ngCordova часто меняется, я собираюсь сослаться на то, что я использую версию commit  c3634c на GitHub. Вы можете быть авантюристом и использовать последнюю версию, но только учтите, что в этом руководстве она может больше не работать.

Скопируйте  ng-cordova.min.js  в каталог вашего проекта  www / js  , а затем  взломайте  файл www / index.html, чтобы включить его в свой код следующим образом:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
        </ion-pane>
    </body>
</html>

Обратите внимание, что я включил  ng-cordova.min.js  выше  cordova.js . Это важно, потому что если вы этого не сделаете, все может не сработать.

Следующее, что мы хотим сделать, это открыть  файл www / js / app.js и добавить логику для установки количества значков:

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller("ExampleController", function($scope, $ionicPlatform, $cordovaBadge) {

    $ionicPlatform.ready(function() {
        $cordovaBadge.promptForPermission();

        $scope.setBadge = function(value) {
            $cordovaBadge.hasPermission().then(function(result) {
                $cordovaBadge.set(value);
            }, function(error) {
                alert(error);
            });
        }
    });

});

Обратите внимание,  ExampleControllerчто мы оборачиваем все в  $ionicPlatform.ready()метод. Это потому, что плагин использует собственный код, который должен быть готов, прежде чем мы попытаемся его использовать.

Когда плагин готов, нам сначала нужно спросить у пользователя разрешения. Независимо от того, принимает пользователь или нет, единственный способ изменить это решение — это сделать это через настройки устройства.

Следующий  setBadgeметод вызывается из  файла www / index.html . Поменяйте местами  <ion-content>теги примерно так:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="setBadge(5)">Set Badge</button>
</ion-content>

Теперь, когда устройство имеет разрешение, если вы нажмете кнопку, оно назначит номер значка пять значку средства запуска.

Вывод

Номера значков являются альтернативным способом уведомления пользователей о том, что что-то требует их внимания. Добавление их в ваши iOS и Android (некоторые) приложения через Ionic Framework не сложно с плагином Apache Cordova.

Видео-версию этой статьи можно увидеть ниже.

36
Share: