Полное руководство по прогрессивным веб-приложениям

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

Вступление

Прогрессивные веб-приложения (PWA) - последняя тенденцияразработка мобильных приложенийс использованием веб-технологий, на момент написания (март 2018 г.) работают на устройствах Android и iOS с iOS 11.3 или выше и macOS 10.13.4 или выше.

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

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

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

Этот метод был впервые представлен Google в 2015 году, и, как оказалось, он приносит много преимуществ как разработчику, так и пользователям.

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

Разработчики могут извлечь выгоду изснижение трения при установке, в то время как наличие приложения в магазине на самом деле ничего не дает с точки зрения обнаруживаемости для 99,99% приложений, а поиск Google может предоставить те же преимущества, если не больше.

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

  • Офлайн-поддержка
  • Грузится быстро
  • Безопасно
  • Может отправлять push-уведомления
  • Иммерсивный полноэкранный пользовательский интерфейс без строки URL.

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

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

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

Чем отличается PWA от других, когда дело доходит до создания мобильного опыта?

Давайте сосредоточимся на плюсах и минусах каждого из них и посмотрим, где PWA лучше всего подходят.

Родные мобильные приложения

Нативные мобильные приложения - самый очевидный способ создать мобильное приложение. Objective-C или Swift на iOS, Java / Kotlin на Android и C # на Windows Phone.

Каждая платформа имеет свои собственные соглашения о пользовательском интерфейсе и пользовательском интерфейсе, а собственные виджеты обеспечивают тот опыт, которого ожидает пользователь. Их можно развернуть и распространить через платформу App Store.

Основная проблема с нативными приложениями заключается в том, что кроссплатформенная разработка требует обучения, освоения и постоянного обновления множества различных методологий и передовых практик, поэтому, например, если у вас небольшая команда или вы являетесь индивидуальным разработчиком, создающим приложение на 3 платформах вам нужно потратить много времени на изучение технологий, а также на среду, управление различными библиотеками и использование разных рабочих процессов (например, iCloud работает только на устройствах iOS, версии для Android нет).

Гибридные приложения

Гибридные приложения создаются с использованием веб-технологий, но развертываются в App Store. В середине находится фреймворк или какой-то способ упаковать приложение, чтобы его можно было отправить на проверку в традиционный магазин приложений.

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

Ключевым аспектом гибридных приложений являетсянапиши один раз, беги куда угодноконцепции, код другой платформы создается во время сборки, и вы создаете приложения, используяJavaScript, HTML и CSS, что удивительно, а возможности устройства (микрофон, камера, сеть, GPS…) доступны через API JavaScript.

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

Кроме того, может снизиться производительность для сложных представлений.

Приложения, созданные с помощью React Native

React Native предоставляет собственные элементы управления мобильного устройства через API JavaScript, но вы фактически создаете собственное приложение, а не встраиваете веб-сайт в WebView.

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

Производительность сопоставима с нативными приложениями, поскольку то, что вы создаете, по сути, является нативным приложением, которое распространяется через App Store.

Возможности прогрессивных веб-приложений

В последнем разделе вы увидели основныеконкурентыпрогрессивных веб-приложений. Так чем же отличаются PWA от них и каковы их основные особенности?

Remember, currently Progressive Web Apps are Android-only IOS support was added in March 2019

Функции

У прогрессивных веб-приложений есть одна вещь, которая полностью отделяет их от вышеупомянутых подходов:они не развертываются в магазине приложений..

Это ключевое преимущество, поскольку магазин приложений выгоден, если у вас есть охват и удача быть представленными, что может сделать ваше приложение вирусным, но если вы не находитесь в 0,001%, вы не получите большой выгоды от иметь свое маленькое место в App Store.

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

Отсутствие в App Store означаетвам не нужно одобрение Apple или Googleчтобы быть в кармане пользователей, и вы можете выпускать обновления, когда захотите, без необходимости проходить стандартный процесс утверждения, который типичен для приложений iOS.

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

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

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

Кроме того, совместное использование делает гораздо более приятным для пользователей, которые хотят поделиться вашим приложением, поскольку им просто нужен URL-адрес.

Преимущества

Так почему же пользователи и разработчики должны заботиться о прогрессивных веб-приложениях?

  1. PWA легче. Собственные приложения могут весить 200 МБ или более, а размер PWA может находиться в диапазоне килобайт.
  2. Нет собственного кода платформы
  3. Снижение стоимости приобретения (гораздо сложнее убедить пользователя установить приложение, чем посетить веб-сайт, чтобы получить первый опыт)
  4. Требуется значительно меньше усилий для создания и выпуска обновлений.
  5. Гораздо больше поддержки для глубоких ссылок, чем для обычных приложений в магазине приложений.

Основные концепции

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

Сервисные работники

Часть определения Progressive Web App заключается в том, что оно должно работать в автономном режиме.

Поскольку то, что позволяет веб-приложению работать в автономном режиме, является Service Worker, это означает, чтоСервис-воркеры - обязательная часть прогрессивного веб-приложения..

Видетьhttp://caniuse.com/#feat=serviceworkersдля получения обновленных данных о поддержке браузеров.

СОВЕТ: не путайте сервис-воркеров с веб-воркерами. Это совсем другое дело.

Service Worker - это файл JavaScript, который действует как посредник между веб-приложением и сетью. Благодаря этому он может предоставлять услуги кеширования, ускорять рендеринг приложения и улучшать взаимодействие с пользователем.

Из соображений безопасности только HTTPS-сайты могут использовать Service Workers, и это одна из причин, по которым Progressive Web App должны обслуживаться через HTTPS.

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

Проверьтеполное руководство для обслуживающего персонала

Манифест приложения

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

Вы добавляете ссылку на манифест ввсеЗаголовок страниц вашего веб-сайта:

<link rel="manifest" href="/manifest.webmanifest">

Этот файл расскажет устройству, как установить:

  • Название и краткое название приложения.
  • Расположение иконок разных размеров
  • Начальный URL относительно домена
  • Ориентация по умолчанию
  • Заставка

Пример

{
  "name": "The Weather App",
  "short_name": "Weather",
  "description": "Progressive Web App Example",
  "icons": [{
    "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "images/icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    }],
  "start_url": "/index.html?utm_source=app_manifest",
  "orientation": "portrait",
  "display": "standalone",
  "background_color": "#3E4EB8",
  "theme_color": "#2F3BA2"
}

Манифест приложения - это рабочий проект W3C, доступный по адресуhttps://www.w3.org/TR/appmanifest/

Оболочка приложения

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

Это эквивалент предложений Apple HIG (Human Interface Guidelines) по использованию заставки, напоминающей пользовательский интерфейс, чтобы дать психологическую подсказку, которая, как было обнаружено, снижает восприятие приложения, которое долго загружается.

Кеширование

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

Узнайте больше о App Shell наhttps://developers.google.com/web/updates/2015/11/app-shell

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру: