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

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

Комментарии

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

  • Аноним

    Отличные уроки!
    Будет ли что-то подобное по Angular 2?

  • kotogyma dalbuep

    У меня показывает ошибку при установке react js :