Преодоление разрыва между веб-приложениями и мобильными приложениями

1656651139 preodolenie razryva mezhdu veb prilozheniyami i mobilnymi prilozheniyami

от Ajay NS

wlEBAJGHiky1KlYc3w--k9288cTG66oikY55

Если вы не жили под камнем, вы наверняка слышали о PWA или прогрессивных веб-приложениях. Сейчас это горячая тема, поскольку ее поддержка растет на многих платформах, и крупные компании решают работать над версиями своих веб-программ PWA, включая Twitter, Lyft, Starbucks, NASA и т.д.

Недавно это привлекло больше внимания, когда Apple объявила о поддержке Service Worker и Web Manifest Safari. Корпорация Майкрософт представила PWA в магазине Windows, а Chrome имеет экспериментальную поддержку PWA для всех платформ.

Ладно, этого должно быть достаточно, чтобы убедить вас, что они достойны того, чтобы пройти через них.

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

Учеба хорошо объясняет, как все работает вместе, а также переносит вас непосредственно в код. Здесь также может помочь курс Udacity Mobile Web Specialist.

Почему PWA?

dC96dvAcZ241P7xcT3R0P1vt-4GXq-JWBJdu
Время, затраченное средними пользователями в Интернете против приложений

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

Почему это так?

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

По словам Алекса Рассела, который ввел этот термин, PWA – это:

Просто веб-сайты, принимавшие все необходимые витамины

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

aEKANAk-nfEiXs-SRPOL05qVmDEh9U8LacSF
Сравнение веб-, нативных и прогрессивных веб-приложений по результатам обучения PWA от Google

Что делает PWA такими, какие они есть

Основные функции по версии Google:

  1. Надежный: Во-первых, офлайн, то есть он должен предоставлять интерфейсы даже при плохом подключении к Интернету или его отсутствии. Но это также не означает, что приложение должно просто работать в автономном режиме, а скорее обеспечивает бесперебойное обслуживание в любых условиях сети.
  2. быстро: Мгновенная загрузка и плавная работа даже при загрузке содержимого.
  3. Привлечение: Должен обеспечивать увлекательный опыт, эквивалентный нативному приложению. Может иметь Push-уведомления, веб-платежи, управление учетными данными и т.д. Возможность установки также является ключевой особенностью здесь.

Но это только понятие: как мы думаем о внедрении с технической точки зрения? Питер О’Шонесси из Samsung Internet имеет хороший подход для этого:

ZcYyAHiWU1fGXX5oPhYOk-fRFNa6frEkS8Jr
Стандарты PWA

Итак, давайте разберемся поочередно:

Обслуживающий работник

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

mDv4XvnYgfsotIUSEOP7-iIwAsQwBWrQgs76
Блок-схема для Service Workers, перехватывающая сетевые запросы

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

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

Ознакомление с сервисными работниками можно найти здесь, и у Google есть несколько помощников с открытым исходным кодом в своем Service Worker Toolbox.

HTTPS

Hypertext Transfer Protocol Secure – это адаптация для безопасной HTTP связи с использованием шифрования SSL или TLS. Но давайте не будем вдаваться в это – скорее мы остановимся на том, почему это важно.

Кроме того, что PWA ожидается как высокозащищенный, использующие их служащие могут перехватывать сетевые запросы и изменять ответы. Это можно легко использовать для серьезных атак. Существует множество служб, которые помогают получить сертификат SSL для вашего сайта, например LetsEncrypt и SSLforfree.

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

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

A5vD1Vw7DTXejsWsc124V8uWz8CqgHNfPEqs

Простой манифест будет выглядеть так:

{  "name": "HackerWeb",  "short_name": "HackerWeb",  "start_url": ".",  "display": "standalone",  "background_color": "#fff",  "description": "A simply readable Hacker News app.",  "icons": [{    "src": "images/touch/homescreen48.png",    "sizes": "48x48",    "type": "image/png"  }, {    "src": "images/touch/homescreen72.png",    "sizes": "72x72",    "type": "image/png"  }, {    "src": "images/touch/homescreen96.png",    "sizes": "96x96",    "type": "image/png"  }, {    "src": "images/touch/homescreen192.png",    "sizes": "192x192",    "type": "image/png"  }],  "related_applications": [{    "platform": "play",    "url": "  }]}

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

Узнайте больше о них в веб-документах Mozilla и создайте их здесь.

Для значков разных размеров вы можете создать их из одного высококачественного изображения с помощью Favicon-Generator и темы. Цвет фона можно выбрать из палитры приложения.

Push-сообщения и фоновая синхронизация

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

ncx23EVESHpPFgbcxpXKQqGAJXrb1RqQntSb

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

Дополнительные понятия

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

Контрольный список Lighthouse и PWA

fzop4QpaTHgwxutmtCZx7ko-JPk-KAb5goj2
Аудит Lighthouse проведен для AliExpress PWA

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

Вы можете понять, чего не хватает вашей веб-приложению и как ее улучшить, воспользовавшись предложениями проверок Lighthouse, а также этим контрольным списком PWA от Google, содержащим все общие указания, которые следует придерживаться, и способы решения проблем. И самое приятное то, что прямо сейчас Lighthouse встроен в Chrome DevTools!

Хранение

По словам Эдди Османи (из команды Google Chrome), лучшая практика хранения в PWA:

Использовать API кэша для URL адресованные ресурсы (часть Service Worker). Для всех других данных используйте IndexedDB (с оберткой Promises).

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

Чтобы быстро понять, что такое IndexedDB, можно обратиться к этому ресурсу.

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

Кэширование

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

RVLZ0I1tzR95WCKrzfjZdM1eQpSJ4XJkn27M
Пример оболочки программы в Flipkart Lite PWA

Одним из популярных шаблонов для подходов к работе в автономном режиме и работы, похожей на нативную программу, кэширование оболочки программы. Это включает в себя все базовые HTML, CSS и JavaScript, составляющие навигацию/панели инструментов или любой другой общий макет. Таким образом, оболочка программы загружается мгновенно и показывает экран загрузки при получении содержимого, обеспечивая оптимизированную работу.

Fetch и Promises

Для получения ресурсов последним и рекомендуемым способом является использование Fetch API из Promises.

// A basic fetch example with promisesfetch(‘examples/example.json’).then(function(response) {   // Do stuff with the response}).catch(function(error) {   console.log(‘Looks like there was a problem: \n’, error);});

Запросы XMLHttpRequest (XHR) слишком многословны, как и обратные вызовы, которые фрагментируют код и вызывают путаницу, когда используются длинные цепочки обратных вызовов.

Обещания являются предпочтительным способом обработки асинхронного кода.

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

Адаптивный дизайн

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

bluXA0ACI9qf0KuVi8fqjs77avSYwsEZ89ZZ
Шаги для манипулирования содержимым

Современные системы компоновки CSS, такие как CSS Grid (обучайтесь с этим бесплатным курсом от Веса Босса) или Flexbox, могут стать большим подспорьем для управления разными макетами и расположением экранов разных размеров.

Оптимизация изображения

rxc-8mnQTfIeBdLHQ2oS3Iw0ZgZg1iU173Mi
Распространение данных в веб-приложениях

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

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

Истории и примеры

CLx2fiuhFfqkS4pK3FeOS9IR7chAlZqgaC3E
Несколько реальных примеров PWA

Вывод

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

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

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

Прогрессивное веб-приложение BookMyShow способствует увеличению конверсий на 80%.

Создание Flipkart Lite: прогрессивное веб-приложение

Прекрасные примеры прогрессивных веб-приложений в одной комнате.

Дальнейшее чтение

6 мифов о прогрессивных веб-приложениях
Такие термины, как «прогрессивные веб-приложения» (PWA), полезны для распространения концепций, но они связаны с риском неправильного использования и…medium.comПрактический пример производительности прогрессивного веб-приложения Tinder
Tinder недавно смахнул прямо в Интернете. Их новое адаптивное прогрессивное веб-приложение – Tinder Online – доступно для…medium.com

Преобразование программ React в PWA:

Прогрессивные веб-приложения React — Часть 1
Прогрессивные веб-программы (PWA) сегодня приобретают большую популярность, и с одним из обновлений этого года (2017)…medium.com

Превращение программ Angular в PWA:

Новый Angular Service Worker – создание автоматических прогрессивных веб-приложений. Часть 1: теор
Объявление: доступна «Часть 2: практика» настоящей статьи.medium.com

Надеюсь, вам понравилась эта статья, и вы ее хорошо прочли! Вы можете просмотреть все мои проекты на Github и не стесняйтесь связаться со мной в Twitter!

Добавить комментарий

Ваш адрес email не будет опубликован.