Главная › Интернет › PWA — это просто. Где можно получить прогрессивные веб-приложения

PWA — это просто. Где можно получить прогрессивные веб-приложения

Перевод

Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.

То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это - далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?

Вероятно, вы уже поняли, что мы только что говорили о так называемых прогрессивных веб-приложениях (Progressive Web App, PWA). Такое приложение можно установить прямо из окна браузера, значок для его запуска будет выглядеть как значок обычного мобильного приложения, и оно, как многие мобильные приложения, позволит вам работать с ним без подключения к интернету.

Кнопка «Добавить на главный экран»

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

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

Термин «Progressive Web App» придумали Алекс Рассел и Франсес Берриман. По словам Алекса, прогрессивные веб-приложения - это всего лишь веб-сайты, которые принимали правильные витамины. То, что лежит в основе PWA, нельзя назвать новым фреймворком или новой технологией. Это, фактически, набор передовых методов разработки, которые позволяют сделать так, чтобы поведение веб-приложения оказалось бы очень похожим на поведение классических настольных или мобильных приложений.

Значок PWA на главном экране

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

Зачем нужны прогрессивные веб-приложения?

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

Низкая скорость подключения к интернету. Возможно, там, где вы живёте, с быстрым интернетом всё в порядке, поэтому данная проблема вас не затрагивает. Но 60% населения Земли всё ещё пользуется 2G-интернетом. Даже в США некоторым пользователям доступны лишь скорости, сравнимые со скоростями обычных модемов, использующих простые телефонные линии.
Медленная загрузка веб-сайта. Если сайт загружается очень медленно, знаете, сколько пользователь ждёт, прежде чем нажать на кнопку закрытия окна? Три секунды! 53% пользователей уходят со слишком медленных сайтов.
Трудоёмкость установки приложений. Пользователи не стремятся устанавливать обычные мобильные приложения. Средний пользователь устанавливает 0 приложений в месяц.
Вовлечение пользователей в работу с приложением. Пользователи тратят большую часть времени в обычных мобильных приложениях, но охват пользователей мобильными веб-приложениями примерно в три раза больше. В результате, большинство пользователей не особенно активно вовлечено в работу с приложениями, хотя эти пользователи и тратят 80% времени в трёх мобильных приложениях, которыми они пользуются чаще всего.

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

PWA в действии

Есть множество причин использовать PWA, здесь хотелось бы выделить основные возможности, которые они дают. Если описать эти возможности одним словом, то тут подойдёт аббревиатура FIRE (Fast, Integrated, Reliable, Engaging), то есть, прогрессивное веб-приложение должно быть быстрым, интегрированным в рабочую среду устройства, надёжным, и иметь средства вовлечения пользователей в работу с ним.

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

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

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

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

Манифест PWA - это файл manifest.json примерно такого содержания:

{ "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icons/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icons/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "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-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }
Перед нами - обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный инструмент , автоматизирующий создание таких файлов.

Сайт, облегчающий создание файла manifest.json

▍2. Сервис-воркеры

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

Вот пример файла serviceworker.js .

Self.addEventListener("fetch", event => { // кэширование данных для работы без подключения к сети const {request} = event; const url = new URL(request.url); if(url.origin === location.origin) { event.respondWith(cacheData(request)); } else { event.respondWith(networkFirst(request)); } }); async function cacheData(request) { const cachedResponse = await caches.match(request); return cachedResponse || fetch(request); }

▍3. Значки

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

▍4. Безопасность

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

Итоги

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

Progressive Web App использует современные возможности веб для обеспечения пользователя удобным интерфейсом. Любой веб-сайт может быть PWA, а статья поможет вам это сделать.

Max Böck — фронт-энд разработчик из Австрии написал статью, в которой показал насколько прост процесс превращения обычного сайта в Progressive Web App. Мы перевели ее для вас и всё, что вам остается — скорее приступать к работе.

Превращение сайта в Progressive Web App – дело несложное и имеет кучу достоинств, поэтому в этой статье я в три шага расскажу, как это сделать. Но для начала, давайте рассмотрим некоторые распространенные заблуждения:

1. Вашему проекту не обязательно быть «приложением», чтобы быть Progressive Web App.

Progressive Web App может быть блогом, рекламным сайтом, магазином или коллекцией кошачьих мемов. По своей сути, Progressive Web App — это всего лишь способ оптимизировать ваш код для лучшей и быстрой доставки пользователю. Вы можете и должны использовать эти возможности независимо от вашего контента.
Замечание: термин «приложение» в Progressive Web App активно обсуждается, поскольку некоторые люди считают, что он передает неверную идею. ИМХО, это просто название и в любом случае в наши дни трудно определить разницу между веб-сайтами и веб-приложениями.

2. Вашему проекту не обязательно быть одностраничником на основе Javascript.

Если вы не используете передовой React-Redux SPA, то это не причина уклоняться от использования этой технологии. Мой личный сайт — это всего лишь куча статического HTML, работающего на Jekyll, и он по-прежнему остается действующим прогрессивным веб-приложением. Если вы запускаете что-то в Интернете, это может пригодиться.

3. Progressive Web App не сделаны специально для Google или Android.

Вся красота заключается в том, что Progressive Web App предлагают лучшее из обоих миров — deep linking и URL-адреса с www, автономный доступ, push-уведомления и многое другое из родных приложений — при этом остаются полностью независимыми от платформы. Никаких play market и app store, никаких отдельных кодов для iOS / Android, только веб.

4. Progressive Web App сразу готовы и безопасны для использования.

«P» отвечает за прогрессивность, что означает, что все, что с этим связано можно рассматривать как новое улучшение. Если старый браузер не поддерживает Progressive Web App, оно не сломается; оно просто вернется к виду по умолчанию — обычный веб-сайт.

OK, зачем мне это делать?
Превращение вашего сайта в Progressive Web App обладает серьезными преимуществами:
● Более быстрый, более безопасный UX
● Лучший рейтинг Google
● Удобство использования
● Лучшая производительность
● Автономный доступ

Даже если вы не ожидаете, что ваши пользователи «установят» ваше Progressive Web App (например, поместят ярлык на своем главном экране), все еще многое предстоит сделать для переключения. Все шаги, необходимые для создания Progressive Web App, улучшат ваш сайт и обычно рассматриваются как best practice.

Шаг 1: Манифест.

Manifest – это просто файл JSON, который описывает все метаданные вашего Progressive Web App. Такие штуки, как название, язык и значок вашего приложения. Эта информация укажет браузерам, как отображать ваше приложение, когда оно будет сохранено в виде ярлыка. Это выглядит примерно так:

{ "lang": "en", "dir": "ltr", "name": "This is my awesome PWA", "short_name": "myPWA", "icons": [ { "src": "/assets/images/touch/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" } ], "theme_color": "#1a1a1a", "background_color": "#1a1a1a", "start_url": "/", "display": "standalone", "orientation": "natural" }

"lang" : "en" ,

"dir" : "ltr" ,

"name" : "This is my awesome PWA" ,

"short_name" : "myPWA" ,

"icons" : [

"src" : "/assets/images/touch/android-chrome-192x192.png" ,

"sizes" : "192x192" ,

"type" : "image/png"

"theme_color" : "#1a1a1a" ,

"background_color" : "#1a1a1a" ,

"start_url" : "/" ,

"display" : "standalone" ,

"orientation" : "natural"

Обычно он называется «manifest.json» и связан с тегом вашего сайта:

< link rel = "manifest" href = "manifest.json" >

Cовет: вам не нужно писать этот файл самостоятельно. Разные системы имеют разные размеры, но заниматься этим самостоятельно очень утомительно. Вместо этого можно создать одно изображение 500×500 для иконки вашего приложения (возможно, ваш логотип), а затем нужно перейти к Real Favicon Generator . Они предоставляют все нужные размеры, метатеги и генерируют файл манифеста. Это просто потрясающе.

Шаг 2. Перейдите на HTTPS.

Progressive Web App должны работать через безопасное соединение, поэтому протокол HTTPS — это верное решение. HTTPS шифрует данные пользователей, отправляемые на сервер, и защищает соединение от вмешательства злоумышленников. В последнее время Google активно поддерживает сайты с HTTPS и оценивает их выше небезопасных конкурентов.
Чтобы перейти на HTTPS, вам понадобится сертификат SSL от доверенного органа. Способ получения напрямую зависит от ситуации с хостингом, но обычно есть всего два способа сделать это:

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

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

Шаг 3: Service worker.

Здесь творится вся магия. Service worker — это, по сути, часть Javascript, которая выступает посредником между браузером и хостом. Он автоматически устанавливается в поддерживаемых браузерах, может перехватывать запросы, отправленные на ваш сайт, и по-разному на них реагировать.
Вы можете настроить новый SW, просто создав файл Javascript в корневом каталоге вашего проекта. Назовем его sw.js. Содержимое этого файла зависит от того, чего вы хотите достичь — мы займемся этим через секунду.
Чтобы браузер знал, что мы намерены использовать этот файл в качестве Service Worker, нам нужно сначала его зарегистрировать. В главном скрипте вашего сайта включите такую функцию:

function registerServiceWorker () {

// регистрирует скрипт sw в поддерживаемых браузерах

if ("serviceWorker" in navigator ) {

navigator . serviceWorker . register ("sw.js" , { scope : "/" } ) . then (() = > {

console . log ("Service Worker registered successfully." ) ;

} ) . catch (error = > {

console . log ("Service Worker registration failed:" , error ) ;

} ) ;

Параметр scope определяет, какие запросы может перехватывать SW. Это относительный путь к корню домена. Например, если вы установите его в / articles, то сможете управлять запросами на yourdomain.com/articles/my-post, но не в yourdomain.com/contact.

Offline — это новый черный

Существует много крутых вещей, которые можно сделать с Service Workers. Одна из них — возможность кэшировать контент, хранить его локально и, таким образом, делать его доступным, когда пользователь находится в офлайне. Даже если он находится в сети, это значительно повлияет на время загрузки страницы, так как запросы могут просто обходить сеть, и доступ к ассетам будет мгновенным.
Помимо традиционного кеширования браузера, при установленном service worker вы можете определить список ресурсов для кеширования — так, что пользователю не нужно будет переходить на страницу для кэширования. Вот как это может выглядеть:

// sw.js self.addEventListener("install", e => { e.waitUntil(// после установки service worker // открыть новый кэш caches.open("my-pwa-cache").then(cache => { // добавляем все URL ресурсов, которые хотим закэшировать return cache.addAll([ "/", "/index.html", "/about.html", "/images/doggo.jpg", "/styles/main.min.css", "/scripts/main.min.js", ]); })); });

// sw.js

self . addEventListener ("install" , e = > {

e . waitUntil (

// после установки service worker

// открыть новый кэш

caches . open ("my-pwa-cache" ) . then (cache = > {

// добавляем все URL ресурсов, которые хотим закэшировать

return cache . addAll ([

"/" ,

"/index.html" ,

"/about.html" ,

"/images/doggo.jpg" ,

"/styles/main.min.css" ,

"/scripts/main.min.js" ,

] ) ;

} ) ;

🔥 Совет. Если вы хотите быстро начать работу в автономном режиме, я настоятельно рекомендую использовать sw-precache. Этот инструмент, был сделан ребятами из Google, он легко интегрируется в процесс сборки Gulp или Grunt для создания service worker файла.

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

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

В 2015 году компания Google заявила о создании новой технологии - прогрессивных веб-приложениях/Progressive Web App (PWA). Однако тогда мало кто воспринял это новшество всерьез. Тем не менее сегодня PWA становится популярным трендом.

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

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

Благодаря данной технологии выигрывают и заказчики, и пользователи.

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

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

Одно из самых важных преимуществ PWA перед нативными приложениями - это отсутствие посредника в лице магазинов приложений App Store и Google Play. Технология прогрессивных веб-приложений это лишнее звено полностью исключает.

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

При этом можно установить иконку такого приложения на экран телефона. Для этого в автоматически открывшемся диалоговом окне нужно согласиться с установкой.

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

Но преимущества преимуществами, а что же на практике?

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

Так, одной из первых компаний, примеривших на себя PWA, стала Lancôme - известный французский косметический бренд.

От автора: для чего нужны PWA приложения? За последние несколько лет отмечался стремительный рост числа пользователей мобильных устройств. Сегодня более 60% общего использования Интернета осуществляется через мобильный телефон.

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

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

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

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

JavaScript. Быстрый старт

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

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

Концепция прогрессивных веб-приложений

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

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

Для чего нужны PWA и каковы их характеристики?

Давайте рассмотрим некоторые основные атрибуты, отсутствующие в распространенных не прогрессивных веб-приложениях.

1. Надежность

Приложение должно загружаться молниеносно и так же быстро открываться, когда нет сети или при довольно низкоскоростной сети, такой как 2G. В Google установили, что 53% пользователей покидают сайт, если для загрузки страницы требуется более 3 секунд.

2. Скорость

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

3. Адаптивность

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

4. Устанавливаемость

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

5. Заставка

PWA добавляет заставку во время запуска приложения. Это делает PWA более похожим на оригинальное приложение.

6. Вовлечение

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

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

PWA и современные UI-фреймворки

Мало кто думает, что PWA сочетается с новейшими UI-фреймворками, такими как ReactJs, Angular 6 или Vue.js. Ну, не обязательно. PWA не имеет ничего общего с используемым фреймворком, ему нужны только соответствующие компоненты.

Как PWA делает веб-сайты доступными в автономном режиме?

Это была моя первая мысль о PWA. Как именно веб-приложения могут открываться без Интернета?

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

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

Каковы технические компоненты PWA?

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

Давайте рассмотрим каждый из них.

1. Service Worker

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Экран, когда мы не можем подключиться к Интернету

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

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

Вот как Service Worker осуществляет расширение возможностей обычных веб-сайтов

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

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

2. Файл манифеста

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

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

Ниже приведен пример файла манифеста:

JavaScript

{ "short_name": "Spinner", "name": "Fidget spinner", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/home/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/home/", "theme_color": "#3367D6" }

"short_name" : "Spinner" ,

"name" : "Fidget spinner" ,

"icons" : [

"src" : "/images/icons-192.png" ,

"type" : "image/png" ,

"sizes" : "192x192"

"src" : "/images/icons-512.png" ,

"type" : "image/png" ,

"sizes" : "512x512"

"start_url" : "/home/?source=pwa" ,

"background_color" : "#3367D6" ,

"display" : "standalone" ,

"scope" : "/home/" ,

"theme_color" : "#3367D6"

На скриншотах ниже вы можете оценить файл манифеста в действии.

3. HTTPS

Service Workers имеют возможность перехватывать сетевые запросы и могут изменять ответы. Service Workers выполняют все действия на стороне клиента. Следовательно, для PWA требуется защищенный протокол HTTPS.

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

Демо-время

На сегодняшний день доступно много различных PWA. Если вы хотите поэкспериментировать с PWA и задействовать Service Workers, посетите fidgetspin.xyz и перейдите на вкладку «Приложение» в Инструментах для разработчиков Chrome.

Статус: Сообщает нам, что Service Worker активирован и запущен.

Оффлайн: Проверяя этот параметр, Chrome рассматривает приложение, если оно отключено. Обновите вкладку, и Chrome эмулирует реакцию PWA при отсутствии подключения к сети. Вы также можете отключить Wi-Fi или передачу данные для проверки PWA.

Кэш. В этом разделе показано, что все файлы сохраняются Service Worker в кэше.

Push и синхронизация: Эти разделы используются во время разработки для тестирования push-уведомления и синхронизации в фоновом режиме.

Вы можете посетить https://pwa.rocks/ , где представлена подборка PWA-приложений.

Инструменты и библиотеки

Существует несколько инструментов с открытым исходным кодом, которые улучшают и облегчают разработку PWA.

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

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

Успешные реализации PWA

Google публикует истории успешной реализации компаниями PWA. Посетите эту страницу , чтобы узнать больше о том, как компании решили проблемы, связанные с работой в медленной сети, как они оптимизировали опыт пользователя и до 80% увеличили конверсии и эффективность SEO.

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

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

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

Progressive Web Apps (PWA) Google анонсировал еще в 2015 году. Этот формат создания мобильных сайтов привлек внимание благодаря относительной простоте разработки и почти мгновенному взаимодействию с пользователем. Уже в мае 2016 на конференции разработчиков Google I/O The Washington Post продемонстрировал свой мобильный гибридный сайт-приложение .

И это только начало. Microsoft уже занимается решением задачи, как добавить прогрессивные веб-приложения в Windows Store. Google в мае 2016 озвучил длинный список идей для развития прогрессивных приложений. И то, что поисковые системы будут уделять особое внимание PWA в будущем, кажется неизбежным.

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

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

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

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

Почему прогрессивные веб-приложения изменят ситуацию?

1. Пользователи могут переходить на прогрессивные приложения из ссылок в соцсетях, во время просмотра веб-страниц или непосредственно из выдачи. Согласитесь, это гораздо удобнее, чем конкурировать за просмотры с двумя миллионами доступных приложений на IOS App Store или Google Play Store.

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

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

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

5. Всплывающие уведомления, работа в автономном режиме и все другие функции прогрессивного приложения будут работать, даже если посетитель никогда его не устанавливал.

6. Обычные приложения могут быть использованы только на той платформе, для которой они созданы. Вы не можете использовать приложение на вашем компьютере так же, как на Android или iOS устройстве. Кроме того, использовать приложение могут только те, кто его установил.

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

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

7. Когда вы не в магазине приложений, то не ограничены правилами App Store и не должны платить 30% от объема продаж.

Недостатки Progressive Web Apps

1. PWA — новая технология, поэтому существует не так много примеров реализации этого формата. Те, кто рискнет, станут первопроходцами.

2. На момент публикации прогрессивные веб-приложения не доступны повсеместно. Да, Chrome и Opera начали поддержку прогрессивных Web Apps. Firefox и Microsoft взяли на себя обязательство по поддержке. Пока намерений по поддержке этого формата нет только у Apple.

Впрочем, ни одна из этих причин не является препятствием для тестирования PWA как формата уже сегодня.

В чем именно «прогрессивность» нового формата?

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

The Washington Post создали Progressive Web App, который установлен в фоновом режиме, когда люди читают их AMP страницы в результатах поиска Google. В результате количество посещений статей выросло на 12%. От загрузки статей по 8 секунд в 2013 они пришли к 80 миллисекундам в Progressive Web App.

Почему стоит поторопиться?

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