Содержание
- Восхождение PWA
- PWA в действии сегодня
- Монтаж
- Автономный и немедленный запуск
- Первоклассный опыт
- Магазины приложений
- Интеграция с платформой
- Проблемы дизайна и UX
- Год 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 с Safari
- Chromebook
- Windows 10 из Microsoft Store
- Функциональные телефоны с KaiOS - ответвлением от Firefox OS - в настоящее время доступны миллионам пользователей, в основном в Индии.
Позднее в этом году поддержка также поступит в macOS, Windows и Linux через Chrome. Он доступен сегодня как экспериментальный флаг "Desktop PWA", если вы хотите попробовать его сейчас. Установка в Windows on Edge без использования магазина также ожидается позже, хотя конкретные временные рамки не определены.
Если вы перечитаете список, вы увидите, что каждая платформа имеет или будет поддерживать полностью устанавливаемые PWA в следующие месяцы. А поскольку PWA - это просто веб-сайт с дополнительными функциями, которые будут активированы только в совместимых браузерах, мы можем даже сказать, что он совместим со всеми браузерами, исходя из его основных функциональных возможнос- тей. ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Кроме того, PWA в настоящее время генерируются из большинства интерфейсов командной строки для различных фреймворков, включая интерфейс командной строки Angular 6+, приложение React Create, стартовый комплект PWA из Polymer и Preact CLI. Наконец, команда Ionic Framework придумала идею Capacitor, замены Cordova с открытым исходным кодом, которая делает встроенные PWA возможными в каждом магазине приложений.
Монтаж
Одним из важнейших аспектов PWA является установка приложения. Этот процесс выполняется в два необязательных этапа: загрузка и автономное хранение файлов приложения и установка значка в ОС. Поскольку оба шага являются необязательными, вы можете предложить автономный режим в браузере или предложить значок без автономной установки. Но настоящий PWA должен включать и то, и другое: он должен обслуживаться с помощью TLS по протоколу HTTPS, и пользователь решит, будет ли он использовать его в браузере или в его собственном установленном значке.
Автономный и немедленный запуск
Мозгом PWA является сервис-воркер, файл JavaScript, установленный на устройстве пользователя, который отвечает за загрузку файлов приложения, сохранение их в кеше и последующее их обслуживание при необходимости. После установки Service worker он действует как сетевой прокси для каждого ресурса, который нужен веб-приложению: он может решить получить его из сети или доставить из локального кеша, что делает приложение доступным в автономном режиме, а также доступным всего за несколько минут. пару миллисекунд, даже если у пользователя есть соединение, имитируя запуск собственного приложения.
Чтобы установить сервис-воркер, ваш HTML-документ должен содержать что-то вроде:
если (’serviceWorker’ в навигаторе) 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"]; себя. addEventListener ("установить", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources)));});
Затем, чтобы PWA всегда обслуживался из кеша, нам нужно прослушать событие выборки внутри сервис-воркера и решить, какую политику кеширования использовать, например, сначала кеш, с помощью следующего фрагмента.
self.addEventListener ("выборка", e => e.respondWith (caches.match (e.request). then (res => res);
В этом случае каждый раз, когда пользователь обращается к PWA (как из браузера, так и из установленного значка), движок будет получать файлы из кеша. Преимущество PWA по сравнению с собственными приложениями заключается в том, что на устройства не нужно повторно загружать все файлы при изменении, а только файл, который был изменен с помощью прозрачного процесса. Кроме того, мы по-прежнему можем загружать части приложения по запросу.
Но проблема в том, как узнать, какие файлы были обновлены на сервере, чтобы их можно было заменить в кеше? Если вы не хотите писать сервис-воркера низкого уровня для управления этим, вы можете использовать библиотеку с открытым исходным кодом Workbox, которая поможет вам с генерацией сервис-воркера и манифеста ресурсов для обновления установленного пакета.
Имейте в виду, что файлы вашего PWA будут удалены, если на устройстве будет недостаточно места для хранения, если вы не запросите постоянное хранилище, если оно доступно:
если (’хранилище’ в навигаторе && ’сохраняется’ в navigator.storage) navigator.storage.persist ();
В Chrome и большинстве браузеров Android ваше приложение не может использовать более пяти процентов доступного пространства; на iOS только 50 МБ (около 50 МБ) на хост; в Edge это переменная в зависимости от общего объема памяти, а в Магазине Windows - без ограничений.
Первоклассный опыт
У нас есть мозг, и теперь пришло время для сердца: манифест веб-приложения. Цель превращения веб-сайта в PWA состоит не только в том, чтобы обеспечить его быструю доступность или в автономном режиме, но и в том, чтобы дать ему возможность иметь собственный значок в ОС и предлагать полностью автономный опыт, как и любое другое установленное приложение.
Манифест - это файл JSON, который определяет метаданные для PWA, используемые браузером или магазином приложений для определения поведения установки.
Этот файл определяет несколько свойств как метаданные для вашего PWA. Каждая ОС будет считывать эти свойства и делать все возможное, чтобы соответствовать вашим предпочтениям. Например, Android прочитает "дисплей: автономный" и создаст обычное приложение. С ’display: minimal-ui’ он создаст интерфейс с видимым URL-адресом и сертификатом TLS, что полезно для приложений, чувствительных к безопасности. Благодаря 'display: fullscreen' он создает приложения с полным эффектом присутствия без строки состояния или видимой кнопки возврата. Набор значков и цветов определяет, как будут выглядеть заставки или строки заголовка в окне вашего приложения.
Есть несколько генераторов манифестов, таких как Генератор манифестов веб-приложений или PWA Builder, которые также изменят размер значка для вас в разных разрешениях, если вы предоставите значок с высоким разрешением (минимум 512 пикселей).
Когда у вас есть файл манифеста, связанный с вашим HTML-документом, пользователи смогут установить приложение, используя различные методы в зависимости от браузера, обычно называемые «Добавить на главный экран», «Установить» или просто «Добавить». Если ваш PWA доступен для сканирования с помощью Bing, Microsoft автоматически добавит его в Microsoft Store, чтобы пользователи Windows 10 могли установить его оттуда.
В некоторых операционных системах ваш PWA может захватывать ссылки. Это означает, что после того, как пользователь установил приложение, любой URL-адрес в рамках вашего манифеста будет открыт в пределах вашего приложения, а не в браузере, независимо от того, отображается ли он в браузере или других приложениях, таких как WhatsApp, Facebook. или по электронной почте.
Если вы соответствуете требованиям PWA, которые мы здесь определяем, некоторые платформы будут предлагать внешний значок (небольшой значок, обычно в строке URL-адреса, указывающий, что Интернет можно установить) или баннер веб-приложения. При желании вы также можете добавить свою собственную кнопку установки, используя следующий фрагмент:
window.addEventListener ("beforeinstallpr ompt", function (e) {e.prompt (); // покажет собственное приглашение установки})
Если PWA установлен, событие 'appinstalled' будет запущено в объекте окна, чтобы вы могли отслеживать статистику, прослушивая его.
Магазины приложений
Одним из основных преимуществ установки из браузера является возможность избежать процесса утверждения в магазине приложений или необходимости платить, чтобы быть издателем. Это дает очевидные преимущества, такие как мгновенная публикация, создание частных приложений для компаний или приложений, которые нельзя продавать в магазинах.
Но некоторые компании хотят быть в магазине. На сегодняшний день единственными магазинами, официально принимающими PWA, являются Магазин Windows и Магазин kaiOS. К счастью, с такими инструментами, как Capacitor (в настоящее время в альфа-версии) или PWA Builder, мы также можем создавать и подписывать собственные пакеты для других платформ.
Некоторые PWA уже опубликованы в Google Play Store, например 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 включает в себя доступ к оборудованию, а также интеграцию с ОС, предлагая такие опции, как Pin to Start. Например, Twitter PWA позволяет закрепить любого пользователя на стартовом экране.
Проблемы дизайна и UX
Разработка PWA связана с уникальными проблемами, поэтому важно потратить некоторое время на изучение, тестирование как можно больше и рассмотрение следующего:
- Пользователи будут ожидать опыта, подобного приложениям.
- Процесс установки еще нов, поэтому нам нужно приложить дополнительные усилия, чтобы объяснить, как установить приложение.
- Обновление приложения в фоновом режиме без взаимодействия с пользователем - это здорово, но оно также создает некоторые проблемы для UX.
- На настольных компьютерах адаптивный веб-дизайн выходит на новый уровень, поскольку окна PWA могут быть крошечными, намного меньше, чем мобильная область просмотра. Это означает, что нам нужно создать определенные представления или небольшие виджеты для этого формата, как это происходит сегодня в Chrome OS.
- Push-уведомления должны приносить пользу только пользователю, поэтому научитесь спрашивать в нужный момент и не упускайте возможность отправлять сообщения, которые не являются полезными или интересными.
- Нам нужен дизайн для работы в Интернете и для автономного доступа.
Год PWA
С добавлением в этом году iOS и настольных компьютеров PWA сегодня повсюду. Но мы должны помнить, что их путешествие только начинается, поэтому ожидайте частых изменений и обязательно будьте в курсе последних технологий и идей, чтобы обеспечить отличный пользовательский интерфейс по мере развития платформы.
Эта статья изначально была опубликована в 308-м выпуске сеть, самый продаваемый журнал для веб-дизайнеров и разработчиков в мире. Купить выпуск 308 здесь или же подпишитесь здесь.
