Руководство для начинающих по прогрессивным веб-приложениям (PWA)

Все больше и больше компаний осознают ценность создания приложений для своих продуктов или услуг. Когда дело доходит до разработки приложения, компании должны сделать выбор: разработать ли адаптивное веб-приложение, собственное мобильное приложение, кроссплатформенное или гибридное приложение? К счастью, как для предприятий, так и для разработчиков прогрессивные веб-приложения (PWA) здесь, чтобы сэкономить время и сделать ваше решение намного проще.

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

Что такое прогрессивное веб-приложение?

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

Проще говоря, как сказали Фрэнсис Берриман (дизайнер) и Алекс Рассел (инженер) из Google:

«PWA - это просто веб-сайт, который принимает все необходимые витамины».

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

Характеристики PWA

Прогрессивные веб-приложения:

• Прогрессивный. PWA работают на любом устройстве и используют все доступные функции на устройстве и в браузере пользователя.
• Адаптивный. Пользовательский интерфейс PWA должен адаптироваться к экрану любого устройства (планшетов, ноутбуков, мобильных телефонов и т. д.).
• Независимое подключение - PWA работают в областях с низким уровнем подключения или офлайн.
• Как приложение - интерфейс UX-дизайна, который выглядит как нативное приложение.
• Свежий. Когда новый контент доступен и пользователь подключен к Интернету, этот контент будет обновлен в приложении.
• Безопасно - PWA размещаются по HTTPS.
• Вовлеченность. Предоставляйте доступные push-уведомления в приложении, чтобы побудить пользователей к действию.
• Обнаружение - легко найти, введя URL-адрес или через поисковые системы.
• Устанавливается. Его можно легко установить через браузер и после этого вести себя как обычное приложение.

Как работают PWA?

Пользователи могут посещать PWA как любую обычную веб-страницу. Когда пользователь просматривает веб-страницу, он будет встречен всплывающим окном «Добавить на главный экран». Пользователь также может установить PWA, сделав закладку в браузере и добавив приложение в их домашний экран с помощью нескольких нажатий.

Например, вот как платформа Pinterest работает как PWA:

Когда пользователь подтвердит запрос на установку, «приложение» установится в фоновом режиме. После установки PWA автоматически добавляется на главный экран пользователя. Один щелчок, и теперь он на телефоне пользователя, не нужно заходить в какой-либо App Store, чтобы загрузить приложение. Когда пользователь открывает свое приложение, оно выглядит как обычное собственное приложение:

Вот и все, PWA!

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

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

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

Настройка PWA

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

1. Создайте базовое веб-приложение с помощью create-react-app

Мы создадим базовое веб-приложение, используя create-react-app, которое имеет встроенную поддержку для создания PWA. Сначала введите эту команду в консоль:

npx create-react-app simple-react-pwa

Теперь вы создали базовое приложение для реагирования. Вы можете запустить его локально, используя:

cd simple-react-pwa 
npm start

2. Превратите свое приложение в PWA

Чтобы превратить ваше приложение в PWA, вам необходимо зарегистрировать сервис-воркера, и в вашем приложении должен быть файл manifest.json.

Кто такой сервисный работник?

Service Worker - это исполнитель JavaScript, который «сидит» между вашим приложением и сетью. Всякий раз, когда ваше приложение общается с сетью, оно будет проходить через сервис-воркер. При первой загрузке приложения работник службы сохраняет необходимые ресурсы в кеше браузера. В следующий раз, когда пользователь посетит ваше приложение, сервисные работники проверит кеш и вернут ответ пользователю, прежде чем даже проверять сеть, чтобы пользователь мог видеть предыдущий полученный контент, даже если он находится в автономном режиме. Service worker управляет push-уведомлениями и помогает создавать автономные веб-приложения, используя API кеширования браузера.

Откройте файл index.tsx во вновь созданном проекте. Внизу файла вы найдете этот код:

// If you want your app to work offline and load faster you can change
// unregister() to register() below. Note this comes with some pitfalls. 
// Learn more about service workers: https//bit.ly//CRA-PWA 
serviceWorker.unregister().

Чтобы сделать наше приложение PWA, нам нужно изменить вызов unregister () на register ().

Что это значит? Чего мы достигли?

В официальной документации указано следующее:

• Ваше приложение будет работать независимо от состояния сети, даже если оно отключено. Это означает, что ваши пользователи смогут использовать ваше приложение на высоте 10 000 футов (даже в метро).
• На мобильных устройствах ваше приложение можно добавить прямо на главный экран пользователя с помощью значка приложения. Это устраняет необходимость в магазине приложений.
• Все статические ресурсы сайта кэшируются, поэтому ваша страница быстро загружается при последующих посещениях, независимо от подключения к сети (например, 2G или 3G). Обновления загружаются в фоновом режиме.

Вы можете найти более подробную информацию здесь.

Что такое manifest.json? Зачем нам это нужно?

Файл manifest.json - это простой файл JSON, содержащий некоторую основную информацию о нашем PWA, такую ​​как его имя, начальный URL, значки и т. Д. В create-react-app, файл манифеста по умолчанию public/manifest.json автоматически включается при создании нового приложения. . HTML-файл public/index.html также содержит элемент <link> для загрузки манифеста:

<link rel="manifest" href=”%PUBLIC_URL%/manifest.json” />

Браузер должен иметь манифест для отображения запроса Добавить на главный экран (A2HS). Когда пользователь добавляет веб-приложение на свой главный экран с помощью Chrome или Firefox на Android, метаданные в манифесте .json определяет, какие значки, имена и фирменные цвета использовать при отображении веб-приложения.

Ваш manifest.json должен выглядеть так:

{
 "short_name": "React App",
 "name": "Create React Simple",
 "icons": [
   {
     "src": "logo192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "logo512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

Чтобы убедиться, что наши свойства работают правильно в этом примере:

1. Создайте производственную сборку с:

npm run build

2. и запустите производственную сборку с помощью:

npx serve build

3. Откройте инструменты разработчика и выберите вкладку «Приложение». На панели приложения выберите вкладку манифеста, и вы сможете увидеть информацию о PWA:

3. Дайте своему приложению имя и объявите несколько значков

Как только мы убедимся, что все настроено, пришло время дать вашему PWA имя и объявить несколько значков.

В вашем manifest.json, расположенном в общей папке, замените "short_name":"React App" на "short_name":"Simple PWA" и "name":"Create React Simple" на "name":"Simple PWA".

Кроме того, измените название приложения в файле index.html:

<title>React App</title>

с участием

<title>Simple PWA</title>

Теперь мы должны определить набор значков, которые браузер будет использовать на главном экране, в панели запуска приложений, экране-заставке и т. Д. Для этого сначала создайте новую папку изображений в общей папке (public / images) и обновите ссылки на них в файле manifest.json.

После того, как мы изменим имя нашего приложения и определим несколько значков, наш manifest.json должен выглядеть так:

{
 "short_name": "Simple PWA",
 "name": "Simple PWA",
 "icons": [
   {
     "src": "images/simplePwaLogo72.png",
     "type": "image/png",
     "sizes": "72x72"
   },
   {
     "src": "images/simplePwaLogo96.png",
     "type": "image/png",
     "sizes": "96x96"
   },
   {
     "src": "images/simplePwaLogo192.png",
     "type": "image/png",
     "sizes": "192x192"
   },
   {
     "src": "images/simplePwaLogo512.png",
     "type": "image/png",
     "sizes": "512x512"
   }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

Вуаля! Теперь у вас есть базовая конфигурация PWA.

Для получения дополнительной информации, которая поможет вам начать работу с PWA, перейдите по этой ссылке. Удачи в создании приложения PWA!

Зачем создавать PWA?

Вы немного узнали о PWA, о том, как создать свое приложение, и теперь можете спрашивать себя:

«Зачем мне вообще создавать PWA?»

Вот несколько причин, по которым создание PWA для вашего бизнеса или бизнеса вашего клиента может быть идеальным решением:

Прогрессивные веб-приложения быстрее разрабатывать и обновлять

У вас может быть одна кодовая база для разных платформ, а не только для двух популярных платформ (Android и iOS).

Рентабельность

Выбор создания PWA экономит деньги вашего бизнеса, потому что вы получаете сделку «два по цене одного». Вам больше не нужно вкладывать средства как в собственное приложение, так и в веб-приложение, вместо этого вы можете просто разработать PWA.

Использует меньше данных и работает в автономном режиме

PWA сокращают использование данных, что серьезно приносит пользу пользователям. Они помогают пользователям экономить на использовании данных (данные о покупках могут быть дорогими), экономить место на своих мобильных устройствах и даже получать доступ к приложению в автономном режиме. Насколько удобно? Все это возможно благодаря тому, что в PWA есть сервис-воркеры.

Возможность отправлять push-уведомления

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

Простая установка без загрузки

Прогрессивные веб-приложения не требуют App Store или установки. В браузере посетители могут сделать закладки и добавить приложение на свой домашний экран несколькими нажатиями. PWA будет отображаться на главном экране в каталоге приложений, отправлять уведомления и интегрироваться в настройки системы.

Общее удобство для пользователей

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

Резюме

Подводя итог, вот что мы исследовали в этом блоге:

• Что такое PWA
• Характерные особенности PWA
• Как работают PWA
• Настройка PWA

Надеюсь, вам понравилось это руководство для начинающих и вы узнали что-то новое о PWA!

Первоначально опубликовано на https://www.rubicon-world.com.