Все, что вам нужно сделать, чтобы превратить любой веб-сайт в PWA за 6 шагов

Введение

PWA, сокращение от прогрессивных веб-приложений, — это веб-приложение, которое оптимизировано для работы на мобильных устройствах так же, как и собственное приложение, и поддерживает такие функции, как push-уведомления, работа в автономном режиме и доступ к оборудованию устройства.

В наши дни PWA наделала много шума. Реализация PWA не так сложна, но отсутствие ясности делает ее довольно сложной, и начинающие разработчики застревают.

Это руководство проведет вас через шаги, чтобы превратить любой веб-сайт в прогрессивное веб-приложение. Он предоставит вам достаточно ресурсов, чтобы превратить ваш сайт в прогрессивное веб-приложение.

1. Сделайте его отзывчивым

В наше время сделать сайт очень просто. Для этого вам даже не нужно использовать такие фреймворки, как bootstrap, встроенные функции CSS, такие как flex-box и CSS grid, делают разработку очень быстрой.

Узнайте о flexbox CSS —

Узнайте о сетке CSS —

Вы также можете использовать любой CSS-фреймворк, чтобы сделать веб-сайт отзывчивым на небольших экранах.

2. Сделайте это доступным

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

• Добавлять alt tag к изображениям, которые точно описывают содержание.
• Надлежащее управление focus так что важные элементы могут быть отмечены вкладками. Читать далее
• Систематические элементы пользователя. Если семантические элементы недоступны для правильного использования ARIA roles . рчитать дальше

3. Оптимизируйте производительность

Основная цель PWA — заставить его эффективно работать на мобильных устройствах. Поэтому его производительность должна быть хорошо оптимизирована для обработки сетевых задержек.

4. Представьте сервис-воркера

Сердцевиной PWA является сервисный работник. Он предварительно кэширует все статические ресурсы и содержит всю логику для автономного взаимодействия и поведения. Подробнее о сервис-воркере здесь.

5. Офлайн-взаимодействия

Если ваш сайт взаимодействует с внутренними API-интерфейсами, и вам необходимо выполнять взаимодействие с пользователем в автономном режиме, это для вас. Узнайте, как сервис-воркер обрабатывает офлайн-взаимодействия..

6. Доработать и протестировать

Если вы реализовали все, что было предложено, вы готовы к тестированию. Но перед этим вы должны связатьmanifest.json чтобы браузер знал, что ваше приложение PWA. Не забудьте добавить все свойства в файл манифеста. Вот пример того же

Тест

Вам нужно установить lighthouse плагин для тестирования приложения. Установите его из здесь.

• Запустите маяк, чтобы сгенерировать отчет.
• Просмотрите отчет, чтобы найти, что нужно исправить, чтобы получить более высокий балл.
• Повторяйте тест, пока не получите достойный балл по всем категориям.

Поздравляем, теперь ваш сайт является PWA 🎉