Создайте интерактивный пользовательский интерфейс push-уведомлений для отображения предварительного просмотра видео с кнопками для добавления и добавления в избранное.
Начиная с iOS 10, Apple уже предоставила расширенную поддержку уведомлений для push-уведомлений с введением новых фреймворков UserNotifications
и UserNotificationsUI
.
Используя эти фреймворки, мы можем настроить наше push-уведомление с помощью таких возможностей, как:
- Настройте тип и
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.
Давайте продолжим обучение на протяжении всей жизни!