PWA: добро пожаловать в мобильную революцию

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

• Как создать прогрессивное веб-приложение

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

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

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

Восхождение PWA

Хотя название PWA было придумано в 2015 году в статье «Побег из вкладок без потери души» Алекса Рассела, работающего в Google в команде Chrome, на самом деле их путь начался не с этого. Раньше у нас были HTML-приложения (HTA), созданные Microsoft в 1999 году, а также многие другие платформы веб-приложений от Nokia, BlackBerry и других компаний. Затем, в 2007 году, Стив Джобс представил единственный на тот момент способ создания приложений для оригинального iPhone: PWA, хотя и с другим названием. Chrome начал с этого, несколько лет спустя улучшил API и придумал название PWA.

Учитывая столь много предыдущих неудачных попыток перенести веб-контент в мир приложений, почему мы думаем, что это сработает сейчас? Ну, в первую очередь, это зависит от компаний, которые сейчас работают и продвигают технологии, лежащие в основе PWA, таких как Microsoft, Google, Apple и Mozilla, и это лишь некоторые из них. Кроме того, производительность веб-платформы достигла точки, когда нет ощутимой разницы при сравнении хорошо спроектированного PWA с нативным приложением. Таких условий никогда раньше не существовало, и это одна из причин, по которой веб-сообщество решило, что пришло время для PWA.

PWA в действии сегодня

Сегодня PWA полностью функциональны и могут быть установлены на:

• Android с большинством браузеров, а Chrome предлагает наилучшие возможности
• iOS с Сафари
• Хромбуки
• Windows 10 из Microsoft Store
• Функциональные телефоны с KaiOS – ответвлением Firefox OS – в настоящее время доступны миллионам пользователей, в основном в Индии.

Позднее в этом году поддержка также появится в Chrome для macOS, Windows и Linux. Сегодня он доступен как экспериментальный флаг «Desktop PWA», если вы хотите попробовать его прямо сейчас. Установка на Windows on Edge без использования магазина также состоится позже, хотя конкретные сроки не определены.

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

Кроме того, PWA в настоящее время генерируются из большинства CLI для различных платформ, включая Angular 6+ CLI, React Create App, PWA Starter Kit от Polymer и Preact CLI. Наконец, команде Ionic Framework пришла в голову идея Конденсатор, замена Cordova с открытым исходным кодом, которая делает возможным использование собственных PWA в каждом магазине приложений.

Монтаж

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

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

Чтобы установить сервис-воркера, ваш HTML-документ должен включать что-то вроде:

if ('serviceWorker' in navigator) navigator.serviceWorker.register("sw.js");

При этом на устройства пользователей будет установлен файл «sw.js» для текущей папки в текущем домене — концепция, известная как область действия. После установки следующие посещения любого URL-адреса в его области будут управляться этим сервисным работником.

Допустим, у нас есть PWA с четырьмя файлами: index.html, app.js, app.css и logo.png. Первым делом нужно установить эти файлы в кеш файла sw.js.

const resources = ["index.html", "app.js", "app.css", "logo.png"]; self. addEventListener("install", event => { event. waitUntil(caches.open("myPWAcache") .then( cache => cache.addAll(resources)) ); });

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

self.addEventListener("fetch", e => { e.respondWith(caches.match(e.request). then(res => res || fetch(e.request))); });

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

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

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

if ('storage' in navigator && 'persist' in navigator.storage) navigator.storage.persist();

В Chrome и большинстве браузеров Android ваше приложение не может использовать более пяти процентов доступного пространства; на iOS это только 50 МБ (около 50 МБ) на хост; в Edge это переменная в зависимости от общего объема памяти, а в Магазине Windows она не ограничена.

Первоклассный опыт

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

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

Файл определяет несколько свойств в качестве метаданных для вашего PWA. Каждая ОС считывает эти свойства и старается изо всех сил соответствовать вашим предпочтениям. Например, Android прочтет «display: автономный» и создаст обычный интерфейс приложения. С помощью «display: minimal-ui» будет создан интерфейс с видимым URL-адресом и сертификатом TLS, что полезно для приложений, чувствительных к безопасности. С помощью «дисплея: полноэкранный режим» он создает полностью захватывающие приложения без строки состояния и видимой кнопки «Назад». Набор значков и цветов определяет, как будут выглядеть заставки или строки заголовка окна вашего приложения.

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

Если в вашем HTML-документе есть ссылка на файл манифеста, пользователи смогут установить приложение. используя различные методы в зависимости от браузера, обычно называемые «Добавить на главный экран», «Установить» или просто Добавлять. Если ваш PWA доступен для сканирования Bing, Microsoft автоматически добавит его в Microsoft Store, чтобы пользователи Windows 10 могли установить его оттуда.

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

Если вы соответствуете требованиям PWA, которые мы определяем здесь, некоторые платформы будут предлагать внешний значок (небольшой значок, обычно в строке URL-адреса, указывающий, что Интернет можно установить) или баннер веб-приложения. Если вы предпочитаете, вы также можете добавить свою собственную кнопку «Установить», используя следующий фрагмент:

window.addEventListener("beforeinstallpr ompt", function(e) { e.prompt(); // will show installation native prompt })

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

Магазины приложений

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

Но некоторые компании действительно хотят быть в магазине. На сегодняшний день единственными магазинами, официально принимающими PWA, являются Магазин Windows и Магазин kaiOS. К счастью, с помощью таких инструментов, как Capacitor (в настоящее время в альфа-версии) или PWA Builder, мы можем создавать и подписывать собственные пакеты и для других платформ.

В Google Play Store уже опубликованы некоторые PWA, такие как Twitter Lite и Google Maps Go, которые в настоящее время находятся в стадии разработки. Chrome предложит решение из Chrome 68 через доверенные веб-действия. С этого момента мы сможем создать пакет Android (APK) с средством запуска для нашего PWA и загрузить его в магазин. Для Microsoft Store в Windows 10 сайт PWA Builder в настоящее время помогает создать пакет APPX для Windows 10. Используя веб-представление, вы можете вручную создать приложение iOS для App Store, но будьте предельно осторожны с правилами магазина.

Интеграция платформы

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

Мы также можем взаимодействовать с другими приложениями через схемы URI, например открывать Twitter, YouTube или WhatsApp через их URL-адреса или пользовательские URI, например WhatsApp://.

Наконец, при создании собственных PWA, которые публикуются в магазине с помощью Capacitor или в Microsoft Store, мы сможем подключиться к нативным API, которые позволят нам выполнять практически любые нативные код. Эта интеграция с Windows 10 включает в себя доступ к оборудованию, а также интеграцию с ОС, предлагая такие опции, как «Закрепить на экране запуска». Например, Twitter PWA позволяет закрепить любого пользователя на стартовом экране.

Проблемы дизайна и UX

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

• Пользователи будут ожидать опыта, подобного приложению.
• Процесс установки все еще новый, поэтому нам нужно приложить дополнительные усилия, чтобы объяснить, как установить приложение.
• Обновление приложения в фоновом режиме без взаимодействия с пользователем — это здорово, но оно также добавляет некоторые проблемы для UX.
• На настольных компьютерах адаптивный веб-дизайн выходит на новый уровень, поскольку окна PWA могут быть крошечными, намного меньше, чем область просмотра на мобильных устройствах. Это означает, что нам нужно создать специальные представления или небольшие виджеты для этого формата, как это происходит сегодня в Chrome OS.
• Push-уведомления должны приносить пользу только пользователю, поэтому научитесь спрашивать в нужный момент и не упускайте возможность отправлять бесполезные или интересные сообщения.
• Нам нужно проектировать с учетом веб-производительности и автономного доступа.

Год PWA

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

Эта статья была первоначально опубликована в выпуске 308 журнала. сеть, самый продаваемый в мире журнал для веб-дизайнеров и разработчиков. Купить выпуск 308 здесь или подписаться здесь.

Статьи по Теме:

• 69 фантастических бесплатных веб-инструментов
• Как сделать приложение
• Новые горячие правила CSS, которые стоит попробовать прямо сейчас