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

Начиная с iOS 10, Apple уже предоставила расширенную поддержку уведомлений для push-уведомлений с введением новых фреймворков UserNotifications и UserNotificationsUI.

Используя эти фреймворки, мы можем настроить наше push-уведомление с помощью таких возможностей, как:

  1. Настройте тип и content/UI push-уведомления.

2. Предоставьте настраиваемые действия и ответы для каждого из типов уведомлений.

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

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

Помимо всей этой обширной поддержки уведомлений, Apple также добавила новую интерактивную поддержку настраиваемого пользовательского интерфейса в iOS 13. Раньше мы могли настраивать только действия, которые пользователь мог выбирать в листе действий, таком как пользовательский интерфейс iPhone.

С помощью интерактивного уведомления мы можем предоставить любой пользовательский интерфейс и взаимодействие, которое мы хотим в нашем push-уведомлении.

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

Наконец, у нас есть свобода настроить предварительный просмотр push-уведомлений так, как мы хотим.

Что мы построим

В этой статье мы собираемся создать интерактивный пользовательский интерфейс push-уведомлений для отображения предварительного просмотра трейлера с кнопками, которые пользователи могут добавить и добавить в избранное.

Пользователи также могут ставить оценки, используя звездочку, и комментировать, используя текстовое поле. Вот список задач, которые нужно выполнить:

  • Настроить проект и зависимости.
  • Зарегистрируйте разрешение, тип и категорию push-уведомлений.
  • Имитируйте удаленные push-уведомления для тестирования.
  • Настройте целевую информацию для расширения уведомлений PLIST.
  • Настройте пользовательский интерфейс для содержимого уведомления.
  • Обработка уведомлений при получении и взаимодействия с пользовательским интерфейсом в коде.

Чтобы смоделировать удаленное push-уведомление в симуляторе, вам необходимо загрузить и установить бета-версию Xcode 11.4 с веб-сайта разработчика Apple.



Вы можете скачать готовый проект из репозитория GitHub ниже.



Настроить проект и зависимости

Для начала создайте новый проект Xcode, используя свой уникальный идентификатор пакета.

Затем перейдите на вкладку проекта подписи и возможности. Нажмите кнопку + Capabilities и выберите из списка push-уведомления. Цель состоит в том, чтобы связать push-уведомление с идентификатором приложения проекта.

Далее мы собираемся добавить новую цель расширения приложения для пользовательского интерфейса уведомлений о контенте. В строке меню щелкните File > New > Target. В текстовом поле фильтра введите уведомление.

Наконец, выберите в списке Расширение содержимого уведомлений. Введите имя и нажмите Готово. После этого вы можете активировать схему в диалоговом окне предупреждения. Закройте проект.

Далее мы собираемся инициализировать CocoaPods для проекта и объявить зависимости.

Используя терминал, перейдите в папку проекта и введите pod init. После этого откройте Podfile с помощью текстового редактора и добавьте зависимости к целям приложения. Необходимо добавить две зависимости:

1. XCDYoutubeKit - библиотека для воспроизведения видео YouTube с использованием AVPlayer. (Предупреждение: политика YouTube разрешает приложению использовать WebView с iFrame только для воспроизведения видео в приложении).

2. Cosmos - элемент управления рейтингом, который мы можем использовать в нашем приложении.

Запустите pod install, чтобы установить все зависимости для всех целей. Чтобы начать, откройте project.xcworkspace в вашем Xcode. Попробуйте построить с Command + B, чтобы убедиться, что все идет хорошо.

Зарегистрируйте разрешение, тип и категорию для push-уведомлений

Затем нам нужно зарегистрировать разрешение, чтобы разрешить push-уведомления в нашем приложении с помощью UNUserNotificationCenter.

Мы добавляем код для этого в AppDelegate внутри (_:didFinishLaunchingWithOptions:). Убедитесь, что вы импортировали UserNotifications фреймворк в верхнюю часть исходного файла.

Вот как это сделать:

1. Сначала мы вызываем requestAuthorization, передавая массив опций авторизации. В данном случае нам нужны alert, badge и sound.

2. Во-вторых, мы инициализируем UNNotificationCategory, передавая уникальный строковый идентификатор категории. В этом случае мы не хотим иметь настраиваемые действия, поэтому передаем пустой массив.

3. Наконец, мы вызываем setNotificationCategories, передавая наш настраиваемый тип категории уведомлений внутри массива.

Имитация удаленных push-уведомлений для тестирования

Xcode 11.4 наконец-то представил новую функцию для локального моделирования удаленных push-уведомлений.

Начать довольно просто. Нам нужно создать apns json файл, содержащий полезную нагрузку. Нам также необходимо добавить дополнительный ключ рядом с aps, который представляет собой Simulator Target Bundle, содержащий идентификатор приложения нашего приложения.

Расширение имени файла должно использовать .apns вместо .json. Вы можете взглянуть на наш образец apns файла ниже.

В этом случае мы также предоставляем дополнительный ключ для videoId и description, чтобы мы могли получить YouTube URL-адрес видео и отобразить настраиваемое описание в пользовательском интерфейсе.

Чтобы проверить уведомление, запустите приложение и примите разрешение на уведомление. Затем переведите приложение в фоновый режим и перетащите файл apns в симулятор.

Настройка целевого расширения для уведомлений, PLIST

Нам нужно добавить дополнительные ключи в notification content расширение приложения info.plist. Убедитесь, что вы добавили в словарь NSExtension > NSExtensionAttributes все эти ключи и значения:

1. UNNotificationExtensionDefaultContentHidden. Этот ключ определяет, следует ли скрывать заголовок и метки тела push-уведомления по умолчанию. В нашем случае мы хотим скрыть его, поэтому устанавливаем значение NO.

2. UNNotificationExtensionUserInteractionEnabled. Этот ключ определяет, делать ли пользовательский интерфейс интерактивным. Мы устанавливаем это значение YES.

3. UNNotificationExtensionCategory. Нам нужно установить его значение, используя идентификатор категории типа уведомления, который мы регистрируем в AppDelegate, то есть testNotificationCategory.

4. UNNotificationExtensionInitialContentSizeRatio. Исходное соотношение размеров содержимого при первом просмотре. Мы установили это значение по умолчанию, 1.

Настройка пользовательского интерфейса для предварительного просмотра содержимого уведомлений

Перейдем к пользовательскому интерфейсу предварительного просмотра содержания уведомлений. Откройте MainInterface.storyboard в цели расширения уведомлений. Вот шаги, которые нужно выполнить:

1. Перетащите представление на холст View Controller. Добавьте эти ограничения: Align top, leading, and trailing to Safe Area. Установите height constraints на 240. Переименуйте это представление в Player View. Это представление видеопроигрывателя, в которое встроено представление AVPlayer.

2. Перетащите Stack View в контроллер представления под Player View. Добавьте эти ограничения: Top Space to Player View with 16. Align leading, trailing, bottom to Safe Area. Установите axis на vertical, alignment and distribution на fill и установите spacing на 16. Переименуйте это в Outer Stack View.

3. Перетащите представление стека как часть представления внешнего стека. Добавьте две метки внутри этого представления стека, метку названия видео и метку описания видео. Установите axis на vertical, alignment and distribution на fill и установите spacing на 4. Установите ограничение строки заголовка видео на 2.

4. Перетащите представление стека как часть представления внешнего стека. Добавьте две кнопки в это представление стека, кнопку подписки и кнопку избранного. Установите axis на horizontal, alignment на fill, distribution на fill equally и установите spacing на 4.

5. Перетащите Button как часть представления внешнего стека, переименуйте его в Review Button. Установите text на Review.

6. Перетащите Label как часть представления внешнего стека, переименуйте его в Submit Label. Установите текст на Ваш отзыв был отправлен!

5. Перетащите представление стека как часть представления внешнего стека. Установите axis на vertical, alignment and distribution на fill и установите spacing на 24. Переименуйте это в Review Stack View.

6. Перетащите представление как часть представления обзора стека. Установите класс на CosmosView. В инспекторе атрибутов установите начальное поле на 16 и размер звезды на 50. Установите ограничение высоты на 59.

7. Перетащите представление стека в качестве подвида обзора стека под представлением Cosmos. Добавьте метку внутри этого представления стека, метку комментария, TextView и Button. Установите axis на vertical, alignment and distribution на fill и установите spacing на 8. Установите ограничение высоты на 100. Обязательно установите для текста метки комментария значение comment.

8. Перетащите Button как часть представления «Обзор стека» внизу. Установите текст Submit и ограничьте высоту 40.

Обработка уведомлений о получении и взаимодействия с пользовательским интерфейсом в коде

Откройте файл NotificationViewController.swift. Существует класс NotificationViewController, который является подклассом UIViewController и реализует UNNotificationContentExtension.

Метод didReceive(_:) вызывается, когда приходит push-уведомление, передавая полезные данные. Вот краткий обзор обработки кода для представления, настройки свойств, didReceive и обработчика взаимодействия:

1. Импортируйте все необходимые фреймворки AVKit, UserNotifications, UserNotificationsUI, XCYoutubeKit и Cosmos в начало исходного файла.

2. Вам также необходимо объявить все свойства для меток, кнопок, представлений и текстового представления.

3. Объявите всю обработку @IBAction метода, когда пользователь нажимает соответствующую кнопку. В этом случае подписывайтесь, добавляйте в избранное, просматривайте и отправляйте обработчик.

4. Объявите свойства для сохранения состояния isSubscribed и isFavorited с помощью обозревателя свойств. В этом случае текст и цвет кнопки меняются в зависимости от состояния boolean.

5. Объявите константы для хранения высоты представления. Для этого примера я уже рассчитал возможную высоту при раскрытии или свертывании представления.

6. В viewDidLoad настройте начальное состояние отображения кнопок и представлений стека. Review Stack View и Submit Label скрыты; появляется первый вид.

7. В didReceive мы получаем содержимое и устанавливаем текст меток для заголовка и описания. Кроме того, мы получаем videoID и используем XCDYouTubeClient, чтобы получить URL-адрес видео, передающий идентификатор.

8. После того, как мы успешно извлечем URL, инициализируем AVPlayerViewController URL-адресом, встроим представление в представление контейнера «Player View» и воспроизведем содержимое.

9. Когда пользователь нажимает кнопку обзора, отобразите просмотр стека обзора. Когда они нажимают на кнопку отправки, скройте просмотр стека обзоров и покажите метку отправки. Для подписки и добавления в избранное переключите свойство, чтобы обновить текст и цвет кнопок.

Перед его сборкой и запуском обязательно подключите все @IBOutlets и @IBActions из раскадровки к коду.

Чтобы проверить, просто перетащите файл apns в симулятор, убедитесь, что используете правильный идентификатор приложения. Вы можете попробовать поиграть со значением videoId файла, используя свой идентификатор видео.

Вы можете получить его из параметров URL-адреса видео YouTube в адресной строке браузера.

Заключение

Вот и все! Поздравляем с достижением в создании пользовательского интерфейса интерактивных push-уведомлений. Есть много возможностей и вариантов использования, которые вы можете изучить с помощью этой новой возможности.

Чтобы обрабатывать совместное использование данных между основным приложением и целевым расширением, вам необходимо создать app group id. Затем вы можете инициализировать общий UserDefaults для хранения и получения локальных данных.

Вы можете узнать больше о UserNotifications платформе в документации Apple.



Давайте продолжим обучение на протяжении всей жизни!