Прогрессивные веб-приложения (PWA) стали новой нормой в создании веб-приложений. В отличие от традиционных веб-приложений, PWA предоставляет уникальный набор функций для мобильного Интернета, обеспечивая наивный опыт. Одной из основных функций PWA является возможность работы в автономном режиме.
Как следует из названия, веб-приложениям для правильной работы требуется надлежащее подключение к сети. Для мобильных устройств подключение к Интернету не всегда стабильно. Внезапная потеря сетевого подключения чаще всего приводила к разочарованию пользователей.
С приоритетом в автономном режиме разработчики могут создавать веб-приложения с уникальными пользовательскими потоками и совершать определенные действия после установления соединения. Таким образом, пользовательский опыт будет намного более привлекательным и менее разочаровывающим.
Каким разочарованием было бы, если бы пользователю пришлось переписать статью в блоге длиной в тысячу слов только потому, что возникла проблема с подключением.
Мы могли бы подумать о подобных сценариях, в которых функция «сначала автономный» могла бы стать жизненно важной для ваших пользователей, в зависимости от домена вашего приложения.
В этой статье будет продемонстрирован простой, но эффективный вариант использования преобразования веб-приложения React в автономный режим с использованием Google Firebase для серверной части приложения и хостинга.
Обзор
Прогрессивное веб-приложение
Как вы уже знаете, PWA сочетает в себе набор технологий для создания лучших мобильных веб-приложений. Давайте посмотрим на основные требования для разработки PWA.
Чтобы создать PWA, вам необходимо выполнить следующее.
- HTTPS - приложение должно обслуживаться в защищенной сети.
- Service Worker - сценарий, который обрабатывает сетевые вызовы и кэширование ресурсов.
- Файл манифеста - файл JSON с деталями дизайна.
Здесь спецификация Service Worker является ключом к тому, чтобы веб-приложение было автономным и прогрессивным. Он обеспечивает возможность кэширования контента и ресурсов в веб-браузере. Этот механизм кэширования позволяет приложению работать в автономном режиме.
Firebase
Firebase - это комплексная платформа для разработки мобильных и веб-приложений, которая позволяет в кратчайшие сроки создавать готовые к работе приложения. Firebase Hosting предоставляет возможность бесплатного хостинга для веб-приложений, разработанных с использованием всех трех основных интерфейсов и библиотек (React, Angular и Vue). Мы также можем разместить несколько сайтов в одном проекте Firebase. Это позволяет нам развертывать версии одного и того же приложения React не в офлайн-режиме и в первую очередь в автономном режиме.
Создание приложения
Лучший способ понять веб-приложение, ориентированное на офлайн, - это реализовать и ощутить разницу. Итак, давайте создадим автономное веб-приложение с помощью React.
Наш образец приложения состоит из следующих основных функций:
- Список задач.
- Добавляйте новые задачи.
- Завершите и удалите отдельные задачи.
Список задач отображается с помощью вызова API. Это нужно для того, чтобы увидеть, как внешнее подключение повлияет на общее поведение приложения при потере сетевого подключения.
Предпосылки
Прежде чем начать, убедитесь, что установлены последние версии Node и Firebase CLI.
1. Создание простого приложения Todo на React
Используйте Create React App, чтобы создать простой шаблон приложения React. После этого будет создана следующая структура папок,
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
Если вы посмотрите на структуру папок, вы увидите файл serviceWorker.js в сгенерированном списке файлов. Здесь Service Worker предоставляет возможность кэширования ресурсов, позволяющую веб-приложениям работать в автономном режиме.
Включение / отключение Service Worker производится внутри index.js файла (полная реализация). Переключение serviceWorker.unregister() на serviceWorker.register() позволит вам использовать Service Worker.
Всегда полезно делиться своими повторно используемыми компонентами с помощью Bit (Github). Таким образом, вы можете максимально увеличить повторное использование кода, сотрудничать со своей командой над независимыми компонентами и создавать масштабируемые приложения.
Я поделился своим компонентом Todo. Вы можете протестировать его на себе и даже установить в свой проект.
2. Разверните на хостинге Firebase.
Когда реализация будет завершена, давайте развернем наше веб-приложение на хостинге Firebase. Во-первых, давайте создадим производственную версию приложения React, которую мы планируем развернуть.
yarn build
Инициализируйте Firebase и следуйте инструкциям по настройке хостинга и других параметров.
firebase init
Затем разверните производственную сборку.
firebase deploy --only hosting
Развернутое веб-приложение можно найти здесь (ссылка).
3. Измените приложение на "Разрешить сначала офлайн".
Вышеупомянутая версия не поддерживает функцию "сначала офлайн". Следовательно, при потере сетевого подключения веб-приложение не работает.
Теперь давайте сначала переведем приложение в автономный режим, включив использование Service Worker. Измените serviceWorker.unregister() на serviceWorker.register() в index.js (источник).
Повторите команды, приведенные в шаге 2 еще раз, чтобы создать и развернуть изменения на хостинге Firebase.
После развертывания веб-приложения с поддержкой автономного режима давайте проанализируем его поведение по сравнению с предыдущим.
Вы можете непосредственно убедиться, что приложение работает так, как если бы соединение было доступно. Единственное отличие, которое мог заметить пользователь, состоит в том, что сохраненный список не отображается, как раньше. Вы видите эту ошибку, потому что вызов API не выполняется из-за проблемы с подключением. Но приложение по-прежнему можно использовать, и пользовательский опыт будет гораздо более позитивным.
Если вы хотите сравнить эти приложения, вы можете найти размещенную версию автономных и отключенных приложений по ссылкам ниже.
- Веб-приложение с включенным автономным режимом (ссылка)
- Интернет-приложение, отключенное в автономном режиме (ссылка)
Исходный код
Если вы хотите попробовать самостоятельно, вы можете найти полный исходный код здесь. Проект состоит из двух основных веток before_offline и after_offline. Ветка before_offline содержит реализацию для версии приложения с отключенной автономной функцией, а ветка after_offline включает исходный код для версии с включенной автономной функцией.
Благодарим также за пример приложения React Todo (ref), которое я использовал в качестве основы для создания версии для этой статьи.
Резюме
В целом, я считаю, что вы понимаете суть создания автономного веб-приложения и того, как создать его с помощью React и Firebase.
Как вы видели, создание автономного веб-приложения больше не является сложным. Четко определенные шаблоны и поддержка функций PWA позволяют любому веб-разработчику создавать эти приложения. Кроме того, использование Firebase делает его еще проще, когда вам не нужно беспокоиться о тяжелой работе по размещению и управлению приложением и его хранилищем.
Наконец, если у вас есть какие-либо вопросы относительно созданного мной примера, задавайте их в комментариях ниже. Ваше здоровье!
