Разработка вашего первого Progressive Web App c React

Перевод статьи Build your first progressive web app with React от Scott Domes.

Progressive Web Apps это разрекламированное будущее интернета. Давайте разработаем такое приложение!

Google продвигает PWA как решение многих проблем современного веба — в частности вопросов связанных с мобильными пользователями: https://developers.google.com/web/progressive-web-apps/.

Progressive Web App — это по сути быстрые, ориентированные на производительность веб-приложения, которые специальным образом подготовлены для мобильных устройств. Также их можно сохранить на домашнем экране вашего смартфона, а оттуда они будут выглядеть и чувствовать себя как нативные приложения (включая оффлайн особенности и Push уведомления).

Крупные игроки, такие как Twitter или Flipboard недавно запустили свои PWA, которые можно попробовать посетив с мобильного устройства страницы http://flipboard.com или https://lite.twitter.com/.

В этой статье, мы будем разрабатывать простое PWA с помощью React, которое даст нам шаблон для разработки более сложных приложений.

Настройка

Для начала, давайте создадим базовое React приложение с помощью create-react-app.

Перейдите в каталог в котором вы будете хранить ваше приложение и запустите следующие команды:

Теперь давайте установим React Router:

Наконец, скопируйте этот код в файл App.js. Он даст нам простой макет страницы с навигацией:

Запустите npm start чтобы протестировать ваше приложение. Смотреть ещё нечего, но для наших целей это хорошее начало. Давайте начнём конвертировать всё это в Progressive Web App.

1. Установка Lighthouse

Lighthouse — это бесплатный инструмент от Google, который оценивает ваше приложение на основе чек листа PWA. https://developers.google.com/web/tools/lighthouse/.

Давайте установим его в Chrome, а после этого оценим нашем приложение. Вы можете запустить аудит Lighthouse кликнув по иконке в правом верхнем углу браузера, а затем нажав на кнопку «Generate Report».

Lighthouse

Упс.

Пока что наше приложение быстрое (так как у нас очень мало контента), но оно проваливается в большинстве ключевых областей.

Вы можете увидеть чек лист, который используется в Lighthouse здесь: https://developers.google.com/web/progressive-web-apps/checklist.

Давайте работать с проблемами по порядку.

2. Настройка Service Worker

Service worker — это JavaScript код, который находится между нашим приложением и сетью. Мы будем использовать его для перехвата сетевых запросов и обслуживания закэшированных файлов — это позволит нашему приложению работать оффлайн.

Чтобы начать работу с Service Worker’ом, нам необходимо сделать 3 вещи:

  • Создать файл service-worker.js в папке public;
  • Зарегистрировать worker через наш index.js;
  • Настроить кэширование;

Давайте сделаем это.

Первый шаг довольно понятен. В папке pwa-experiment/public, создаём пустой JavaScript файл названный service-worker.js.

Второй шаг немного запутаннее. Мы хотим проверить если браузер поддерживает service worker’ы, и тогда регистрировать его с помощью service-worker.js.

Чтобы сделать это, давайте добавим тег script в файл public/index.html.

Этот код очень простой — если браузер поддерживает его, то мы ждём пока страница загрузится, а после этого регистрируем наш Service Worker загружая файл service-worker.js.

Завершающий шаг: Настройка кэширования!

Мы собираемся скопировать настройки Service Worker’а отсюда написанные Addy Osmani, а также отключим кэширование в целях разработки (и предпримем меры удаления всего кэша, когда Service Worker инициализируется).

В public/service-worker.js:

Перезапустите ваш приложение с помощью npm run start и вы должны увидеть следующее в консоле:

Progressive Web App React Debug

Для более подробной дискуссии на тему Service Worker’ов, посмотрите это https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience-c84db889162c.

Давайте закроем консоль и запустим аудит Lighthouse снова:

Lighthouse audit result

Мы делаем успехи! Теперь у нас есть зарегистрированный Service Worker. Так как у нас отключено кэширование, вторая галочка ещё не отмечена, но как только мы включим кэширование она будет работать!

3. Добавление прогрессивных улучшений

Прогрессивные улучшения в основном означают, что сайт будет работать без загрузки любого JavaScript кода.

Прямо сейчас, файл index.html отображает пустой div (#root), который подхватывает наше React приложение.

Вместо этого, мы хотим отображать какой-то базовый HTML и CSS, ещё до того как React приложение будет инициализировано.

Самый простой способ сделать это — переместить некоторые из наших основных HTML структур в этот самый div#root. Этот HTML будет перезаписан как только ReactDOM отобразит компонент App, но покажет пользователю что-то вместо пустой страницы на которую пришлось бы глазеть пока загружается bundle.js.

Вот наш новый index.html. Обратите внимание, что стили находятся в head, а HTML в div#root.

(Кстати, теперь мы можем удалить дубликаты стилей в App.css и index.css — просто чтобы сделать код чище.)

Одобрит ли это Lighthouse?

Lighthouse audit result

Ага!

4. Возможность добавления на домашний экран

Мы можем пропустить требования касающиеся HTTPS — которые будут учтены после деплоя.

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

Чтобы это сделать, нам нужно добавить файл manifest.json в папку public.

Если у вас нету значка, то можете использовать этот (любезность моей компании MuseFind), или создайте свой собственный (должен быть 192 на 192 пикселя):

MuseFind

Добавьте icon.png и manifest.json в папку public, а также добавьте следующие строки в ваш index.html файл:

Хорошо, что теперь мы делаем?

Lighthouse audit result

Всё что нам не хватает, это кэширование и HTTPS.

5. Деплой через Firebase

Во-первых, включите кэширование. Измените doCache на true в файле service-worker.js.

После этого, в консоле Firebase создайте новый проект и назовите его pwa-experiment.

Вернитесь в папку с проектом и запустите следующее:

После того как вы пройдёте авторизацию и начнётся инициализация: ответьте на следующие вопросы:

Когда он спросит What Firebase CLI features do you want to setup for this directory?, с помощью пробела снимете галочки везде кроме «Hosting».

Нажмите Enter, а после этого выберите pwa-experiment в качестве проекта.

Когда он спросит What do you want to use as your public directory?, наберите на клавитуре «build» и нажмите Enter.

На вопрос про одностраничное приложение, выберите «No».

После этого процесс должен завершиться. Теперь можно запустить команду:

Это соберёт наш проект в папку build, которую Firebase будет деплоить.

Firebase вернёт нам URL. Давайте откроем его в Chrome и запустим аудит Lighthouse в заключительный раз.

Мы сделали это!

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

Куда двигаться дальше

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

Однако, по мере роста вашего приложения, файл main.js будет увеличиваться и увеличиваться, и Lighthouse будет всё меньше и меньше доволен вами.

Следите за нами, чтобы не пропустить углублённую статью об оптимизации производительности с помощью React и React Router, которая будет применима как и для Progressive Web App так и для старомодных веб-приложений.

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

Спасибо за то что прочитали!

Вот финальный репозиторий: https://github.com/scottdomes/pwa-experiment

Комментарии

Добавить комментарий