Автор оригинала: Mofid Ansari.
Вступление
PWA, короткие для прогрессивных веб-приложений – это веб-приложение, которое оптимизировано для запуска на мобильных устройствах, как и нативное приложение и функциональные возможности поддержки, такими как push-уведомление, работа в автономном режиме и аппаратному доступу.
PWA зарабатывает много жужжания в эти дни. Реализация PWA не так сложно, но отсутствие ясности делает его довольно сложными, а впервые разработчики застряли.
Это руководство проведет вас через шаги, чтобы превратить любой веб-сайт в прогрессирующее веб-приложение. Он предоставит вам достаточно ресурсов, чтобы превратить ваш сайт в прогрессивное веб-приложение.
1. сделать его отзывчивым
На сегодняшний день создание сайта очень легко. Вам даже не нужно использовать такие фреймворки, как Bootstrap, чтобы сделать то, что нативные функции CSS, такие как Flex-Box и CSS Greate Real быстро.
Узнайте о Flexbox CSS –
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35
Узнайте о CSS Grid –
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://learncssgrid.com/
- https://gridbyexample.com/examples/
Вы также можете пойти с любыми каркасами CSS, чтобы сделать сайт отзывчивым на меньших экранах.
2. Сделайте это доступным
Ваше приложение должно быть доступно для всех. Он должен быть хорошо оптимизирован для считывателей экрана, чтобы он был доступен для любого пользователя с обесценением или инвалидностью.
- Добавить
Alt Tagна изображения, которые точно описывают содержание. - Надлежащим образом управлять
Фокустак что важные элементы могут быть вкладками. Читать далее - Пользователь надлежащие систематические элементы. Если семантические элементы не доступны для использования правильной
Ария ролиОтказ R EAD больше
3. Оптимизировать производительность
Основная цель PWA заключается в том, чтобы сделать его эффективно работать на мобильных устройствах. Таким образом, его производительность должна быть хорошо оптимизирована для обработки сетевой задержки.
- Используйте ленивую загрузку для изображений, чтобы загрузить то, что требуется. Пять способов ленивых нагрузочных изображений.
- Исправить
Визуализация блокировки CSSОтказ - Использовать
Задача бегунаОптимизировать статические активы (HTML, CSS, JS и изображения). Введение в Гульп
4. Представьте работника услуг
Основное сердце PWA является сервисным работником. Он предусматривает все статические активы и содержит всю логику для автономного взаимодействия и поведения. Узнайте больше о сервисном работнике здесь Отказ
5. Оффлайн взаимодействия
Если ваш сайт взаимодействует с Backenc API, и вам нужно выполнить взаимодействие пользователей в автономном режиме, это для вас. Читайте о том, как обслуживающий работник обрабатывает автономные взаимодействия Отказ
- Узнайте о indexeddb.
- Интеграция IndexedDB с обслуживающим работником.
- Синхронизировать автономные данные с
Фон синхронизацияОтказ
6. Завершить и тестировать
Если вы реализовали все, что было предложено, вы готовы проверить. Но до этого вы должны связать манифест .json так что браузер знает, что ваше приложение – PWA Отказ Не забудьте добавить все свойство в файл манифеста. Вот пример того же
Контрольная работа
Вам нужно установить Маяк плагин для проверки приложения. Установите его из здесь Отказ
- Запустите маяк, чтобы генерировать отчет.
- Пройдите через отчет, чтобы найти то, что необходимо исправить для лучшего балла.
- Повторите тест, пока не получите достойный балл по всем категориям.