Пока Apple саботирует развитие PWA, мы сделали демо с контактами, пуш-уведомлениями и биометрией

в 12:15, , рубрики: apple, pwa

Хабр не раз выручал нашу команду, когда заказчик ставил задачу, которую мы никогда не делали. В недавнем кейсе по разработке демо-приложения PWA мы подсмотрели в статьях несколько полезных советов и тоже решили написать о своем опыте. Поговорим о PWA, про развитие технологии и про то, кому это выгодно и не очень. Кстати, меня зовут Сергей Филатов и я веб-разработчик в R-Style Softlab. 

Пока Apple саботирует развитие PWA, мы сделали демо с контактами, пуш-уведомлениями и биометрией - 1

Реальность PWA для пользователей, разработчиков и…владельцев ОС

Любой российский продукт сегодня тяжело разместить в App Store и Play Market, да еще чтобы он нормально апдейтился. Подход PWA (Progressive Web Apps) становится в этой ситуации очень полезен: пользователь открывает веб-приложение с главного экрана и имеет все те же функции, что у нативного приложения, плюс всегда актуальную версию на любом устройстве и в том числе офлайн. 

По сути, PWA — это окно браузера, которое устанавливается в постоянный кэш браузера, как файлы cookie. Разрабатываются с использованием стандартных веб-технологий: HTML, CSS и JavaScript, но во многом это черный ящик. Настроив обращения к компонентам браузера через обычное react-приложение, например, дальше ты просто надеешься, что оно будет работать — никак повлиять на API браузера разработчик не в состоянии.

Такая нестабильность сегодня ограничивает популярность PWA, хотя разрабатывать их проще и быстрее. Работать с Apple в этом смысле удобнее из-за единой инфраструктуры. Но политика Apple в отношении PWA далеко не дружелюбна: компания зарабатывает на размещении приложений в App Store и совсем не хочет, чтобы пользователи устанавливали PWA. 

Пока Apple саботирует развитие PWA, мы сделали демо с контактами, пуш-уведомлениями и биометрией - 2

Например, для установки приложения на главный экран пользователю сначала нужно нажать на кнопку «поделиться», а уж потом найти в списке возможность установки на главный экран. Пока Apple придумывает, как заработать и на PWA тоже, часть функций названа экспериментальной и включаются вручную в настройках Safari на iPhone — привет лучший UX от Apple 🙂

Как включить настройки в Safari

Как включить настройки в Safari

C Android все немного сложнее: множество браузеров и их версий порождают многообразие вариантов развития событий. Нужно отдельно проверять, какие функции в каком браузере доступны, кроме того, помешать работе PWA могут и устаревшие API, и несовместимость браузера и ОС.  

Как мы справились с разработкой демо 

Первый блок работ был связан с вызовом контактов — здесь все оказалось достаточно просто, в помощь — документация о браузерном API. Мы просто вызываем системный компонент и ждем от него ответ. На Android все заработало сразу, на iOS нужно не забыть включить нужный переключатель в настройках устройства, тогда тоже все заработает. 

Второй компонент — пуш-уведомления. С ним все было сложнее, поэтому разберем по этапам: 

  1. Для начала нужно создать файл манифеста, который будет указывать на PWA и описывать необходимые функции. Манифест — это JSON-файл, который определяет, как приложение должно выглядеть и как оно должно себя вести. Также в манифест включаются необходимые свойства, такие как название приложения, иконки и, что важно, настройки для получения пуш-уведомлений.

{
    "name": "Ваше приложение",
    "short_name": "Чат",
    "start_url": "/",
    "display": "standalone",
    "icons": [
        {
            "src": "images/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "images/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "gcm_sender_id": "Ваш_ID_отправителя"  // Для сообщения в Firebase
}
  1. Нужно зарегистрировать приложение в Firebase Console. Создайте новый проект и выполните несколько шагов активации Cloud Messaging (FCM), который отвечает за отправку пуш-уведомлений. В панели управления Firebase выберите Cloud Messaging, сгенерируйте ключи API и идентификаторы отправителей — они понадобятся для интеграции FCM в приложение. 

  2. Запросите у пользователя доступ на уведомления — стандартно. Далее можно инициализировать библиотеку Firebase в приложении и получать токен — идентификатор устройства для системы отправки сообщений. У нас не было времени делать бэк, поэтому мы использовали функциональность тестовых пушей через FCM.

  3. Для корректной работы пуш-уведомлений в фоновом режиме нужно также настроить сервис-воркер — скрипт, который браузер использует для обработки фоновых задач, в том числе получения пуш-уведомлений, когда приложение закрыто или неактивно. 

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/firebase-messaging-sw.js')
            .then(registration => {
                console.log('Сервис-воркер зарегистрирован с областью:', registration.scope);
            }).catch(err => {
                console.error('Ошибка при регистрации сервис-воркера:', err);
            });
    });
}

При тестировании неожиданно выяснилось, что мы получаем два пуш-уведомления. Проверили код на наличие повторных регистраций, пытались использовать разные методы onMessageReceived и onMessageReceivedInBackground — не помогло. В итоге оказалось, что библиотека Firebase автоматически регистрирует функцию для обработки пуш-уведомлений через сервис-воркеры, происходило дублирование. Когда оставили только сервис-вокер, все заработало. 

Работа с биометрией оказалась самой запутанной задачей. Напишите, если эта тема интересна, я попрошу коллег написать об этом подробно. Расскажу только в общем: возможно множество подходов, включая взаимодействие с внешними хранилищами и генерацию ключей через сервер. Но так как у нас не было готовой серверной части, мы решили генерировать ключи локально, в итоге сделали через USB-токен.

На всю работу мы потратили 2-3 дня, после чего провели успешное демо заказчику — все работало 🙂. Проект мы взяли, но будет ли полноценная разработка PWA, пока неясно. 

Несколько слов о безопасности PWA

Безопасность приложений PWA — один из открытых вопросов использования этой технологии. При разработке важно помнить о необходимости корректного SSL-сертификата. В нашем демо-примере мы использовали одноразовый туннель Cloudflare, который полностью обрабатывает все сертификаты на своей стороне — это было одно из лучших открытий в процессе работы. При этом, хотя ссылка является одноразовой, никаких проблем не возникает: все сертификаты и защитные механизмы находятся под контролем Cloudflare. 

Еще один вопрос напрямую связан с тем, что PWA запускаются в рамках браузера, и их поведение, включая доступ к API и взаимодействие с данными пользователя, может вызывать резонные опасения с точки зрения безопасности. В частности, Apple тормозит развитие PWA из-за того, что приложения, работающие в Safari, могут иметь возможность выполнять нежелательные действия, такие как логирование пользовательских данных или взаимодействие со сторонними серверами. Хотя, на рынке у альтернативных Apple браузерных движков репутация более быстро обновляемых компонентов безопасности.

В итоге PWA хоть и рабочий подход, но имеющий множество нерешенных вопросов. Тем не менее преимущества PWA очевидны, и технология точно продолжит развиваться. Если вы следите за новостями по PWA — поделитесь источниками в комментариях, нам тоже интересно 🙂.

Автор: R_STYLE_SOFTLAB

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js