У цій статті, ми будемо розробляти просте PWA за допомогою React, яке дасть нам шаблон для розробки більш складних додатків.
Для початку, давайте створимо базову React додаток за допомогою create-react-app.
Перейдіть в каталог в якому ви будете зберігати ваш додаток і запустіть наступні команди:
Запустіть npm start щоб протестувати ваш додаток. Дивитися ще нічого, але для наших цілей це гарний початок. Давайте почнемо конвертувати все це в Progressive Web App.
1. Установка Lighthouse
Давайте встановимо його в Chrome. а після цього оцінимо нашому додаток. Ви можете запустити аудит Lighthouse клікнувши по іконці в правому верхньому куті браузера, а потім натиснувши на кнопку «Generate Report».
Поки що наше додаток швидке (так як у нас дуже мало контенту), але воно провалюється в більшості ключових областей.
Давайте працювати з проблемами по порядку.
2. Налаштування Service Worker
Щоб почати роботу з Service Worker'ом, нам необхідно зробити 3 речі:
- Створити файл service-worker.js в папці public;
- Зареєструвати worker через наш index.js;
- Налаштувати кешування;
Давайте зробимо це.
Другий крок трохи заплутаніше. Ми хочемо перевірити якщо браузер підтримує service worker'и, і тоді реєструвати його за допомогою service-worker.js.
Щоб зробити це, давайте додамо тег script в файл public / index.html.
Перезапустіть ваш додаток за допомогою npm run start і ви повинні побачити наступне в консолі:
Давайте закриємо консоль і запустимо аудит Lighthouse знову:
Ми робимо успіхи! Тепер у нас є зареєстрований Service Worker. Так як у нас відключено кешування, друга галочка ще не відзначена, але як тільки ми включимо кешування вона буде працювати!
3. Додавання прогресивних поліпшень
Прямо зараз, файл index.html відображає порожній div (#root). який підхоплює наше React додаток.
Замість цього, ми хочемо відображати якийсь базовий HTML і CSS, ще до того як React додаток буде ініціалізувати.
Найпростіший спосіб зробити це - перемістити деякі з наших основних HTML структур в цей самий div # root. Цей HTML буде перезаписан як тільки ReactDOM відобразить компонент App, але покаже користувачеві щось замість порожньої сторінки на яку довелося б витріщатися поки завантажується bundle.js.
Ось наш новий index.html. Зверніть увагу, що стилі знаходяться в head. а HTML в div # root.
Це збере наш проект в папку build. яку Firebase буде деплоіть.
Firebase поверне нам URL. Давайте відкриємо його в Chrome і запустимо аудит Lighthouse в заключний раз.
Куди рухатися далі
Вся суть Progressive Web App - швидкість. У цій статті ми пропустили багато всього пов'язаного з поліпшенням продуктивності, так як наш додаток було скелетних.
Однак, у міру зростання вашого застосування, файл main.js буде збільшуватися і збільшуватися, і Lighthouse буде все менше і менше задоволений вами.
Слідкуйте за нами, щоб не пропустити поглиблену статтю про оптимізацію продуктивності за допомогою React і React Router, яка буде застосована як і для Progressive Web App так і для старомодних веб-додатків.
Тепер у нас є робочий скелет для розробки PWA і ми готові до майбутнього веб-додатків.
Дякую за те що прочитали!