Возможно, вы о них еще не слышали, но прогрессивные веб-приложения (PWA) изменят расположение сил во всей мобильной индустрии. Заявленные в 2015 году компанией Google прогрессивные мобильные приложения уже сейчас становятся популярным трендом. Итак, что это за новый инструмент?

Что же такое прогрессивные мобильные приложения?

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

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

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

Как и в обычном приложении, пользователи могут сохранить PWA на свой Главный (Домашний) экран, чтобы в любой момент быстро открыть приложение. PWA не нужно устанавливать, достаточно просто открыть его по ссылке, что исключает утомительные хлопоты со скачиванием его из магазина приложений.

PWA vs. Нативные мобильные приложения

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

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

Что касается разработчиков, отсутствие магазинов приложений означает, что им больше не нужно загонять себя и приложение в рамки, установленные правилами и политикой iOS и Android. Здесь не будет никакого процесса одобрения — приложение готово к использованию сразу после его создания. Также нет необходимости и в обновлении приложения вручную, поскольку обновленная версия автоматически и моментально становится доступной для всех.

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

На рисунке внизу вы видите, что каждый шаг в процессе установки нативного приложения приводит к потере 20% пользователей . Это утомительно и нудно искать приложение в магазине, ждать, пока оно загрузится, да еще и переживать, что оно займет много свободного места в памяти, прежде чем приступить к работе с этим приложением. И поскольку в случае с PWA количество требуемых шагов радикально уменьшено (по сути, это процесс в один шаг), шансов, что приложение действительно будет использоваться, намного больше. В действительности мы используем в 4 раза больше сайтов, чем мобильных приложений , а следовательно, база потенциальных пользователей приложений на основе ВЕБ намного, намного больше.

Другое существенное отличие для разработчиков заключается в том, что им не нужно адаптировать приложение под разные ОС — iOS или Android. Суть в том, что PWA используют интернет-технологии, а значит, они являются кроссплатформенными и работают в большинстве браузеров, выводя операционную систему из уравнения. Вам нужно создать лишь одно веб-приложение, и оно будет одинаково выглядеть и работать на всех устройствах. На любом устройстве интерфейс приложения и его восприятие пользователями будут идентичными.

Наконец, PWA очень легко найти. То есть такие приложения легко идентифицируются поисковыми системами, позволяя им находить поисковые запросы точно так же, как и любой другой веб-контент. PWA будет обрабатываться с помощью традиционной SEO, поэтому оно индексируется не просто как имя приложения, но и как контент в приложении. Оно не будет рассматриваться как конкретно приложение, но как часть контента, которая может «ответить» на чей-то «вопрос».

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

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

PWA vs. Мобильный веб-сайт

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

В отличие от «старых» мобильных сайтов PWA работают быстрее. Обращаем ваше внимание, что 53% пользователей покинут сайт , если его загрузка займет более 3 секунд. PWA загружаются мгновенно, независимо от состояния сети, и имеют быстро реагирующие интерфейсы. Это исключает их зависимость от сети, как это бывает у мобильных сайтов, обеспечивая мгновенную и надежную эксплуатацию. Также PWA обновляется в фоновом режиме, поэтому пользователям не нужно ждать загрузки нового контента.

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

Кто уже видит успех?

Для увеличения трафика и повторного привлечения клиентов косметическая компания Lancôme запустила прогрессивное веб-приложение для быстрого и удобного использования.

В 2016 году специалисты Lancôme впервые оценили, что мобильный трафик превышает трафик стационарного интернета. Несмотря на растущее число посетителей мобильных сайтов, коэффициент мобильной конверсии не совпадал с коэффициентом для обычного интернета. 38% заказов в корзине рабочего стола дошли до стадии покупки, в то время как мобильная конверсия составила всего 15%. Эти цифры показали, что клиенты испытывали значительные препятствия при попытке совершить покупку со своего мобильного устройства.

Во-первых, Lancôme рассматривала приложение для электронной коммерции как решение. Однако они поняли, что приложение имеет смысл только для клиентов, которые регулярно его посещают. Мобильные покупатели не будут еженедельно возвращаться к e-commerce приложению, не говоря уже о ежедневном, поэтому для них загрузка такого приложения не представляет никакой ценности. Компания захотела создать решение с эффективным пользовательским интерфейсом для всех устройств.

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

Результаты его использования ошеломительные:

• на 84% снизилось время загрузки,

• на 17% увеличилась конверсия,

• на 53% увеличилось количество мобильных сеансов на iOS,

• 18% push-уведомлений открываются пользователями,

• 8% потребителей, которые открыли push-уведомление, совершали покупку.

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

Как же выглядит будущее?

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

PWA представляет собой интеграцию лучших характеристик двух миров: полный объем функционала нативных приложений и общедоступность всемирной сети.

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

Открыв спойлер можно узнать, что такое PWA

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

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

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

Эти приложения получат собственное окно и ярлык на панели задач (в Windows 10 и любой версии Chrome) или значок на главном экране (на устройствах Android и других смартфонах). Когда вы их открываете, они быстро загружаются благодаря API Cache и IndexedDB, который хранит ресурсы и данные приложения на вашем устройстве, что позволяет им работать, даже без интернета.

Новый Chrome 70 позволяет устанавливать PWA приложения на Windows 10. Они запускаются из меню "Пуск" и появляются так же, как родные приложения без адресной строки и без вкладок.

Chrome 70, уже доступный сейчас, позволяет устанавливать «Прогрессивные веб-приложения» / PWA в Windows. Когда вы посещаете веб-сайт с помощью PWA, например Twitter или Google Maps, вы можете теперь «установить» его так, чтобы он больше похож на обычное настольное приложение. Сейчас Google обновил сайт Google Фото (photos.google.com), чтобы функционировать в качестве прогрессивного веб-приложения.

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

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

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

Это означает, что они будут запускаться как приложения на родном языке в Windows 10 и будут присутствовать в Windows Store . Это значительно повлияет на решение проблемы магазина корпорации microsoft, поскольку Google не хочет поддерживать универсальную Windows-платформу Microsoft (UWP). Другие разработчики, которые не хотели создавать отдельные приложения UWP, внезапно смогут поддерживать Windows 10 с помощью PWA в собственном стиле.

Как установить PWA в Windows 10

Чтобы установить PWA на компьютер под управлением операционной системы Windows, вам сначала нужно посетить веб-сайт, который имеет «Прогрессивное веб-приложение». В настоящее время, сравнительно мало сайтов предлагают PWA. Twitter предлагает PWA, YouTube, который использует свой мобильный интерфейс.

Когда вы находитесь на веб-сайте, который предлагает PWA, вы можете щелкнуть меню> Install , чтобы установить его. Например, открываем сайт ampbyexample и выбрать меню > Установить приложение AМP ampbyexample.

Если вы не видите этот параметр, веб-сайт, который вы посещаете, не предлагает PWA. Большинство веб-сайтов этого не делают.

установка PWA в Windows 10

Вам будет предложено установить приложение в вашей системе. Нажмите «Установить».

Вы получите приложение со своим окном, значком в панели задач и записью в меню «Пуск».

Чтобы удалить PWA, нажмите кнопку меню в верхней части окна приложения и нажмите «Удалить [Имя приложения]».

Кстати, это приложение Twitter - это тот же PWA, который предлагается, когда вы устанавливаете Twitter через Store в Windows 10. Однако Google не доволен Microsoft, так как браузер Microsoft Edge не имеет никакого способа установить PWA из веб.

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

Поддержка устанавливаемых PWA доступна начиная с Chrome 67, в Chrome OS и подходит к MacOS и Linux с Chrome 72. Если вы являетесь пользователем Mac или Linux, вы можете протестировать эту функцию сегодня, включив #enable-desktop-pwas flags.

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

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

Каталоги, витрины, и примеры где можно подобрать интересные приложения (прогрессивные)

скриншот с сайта pwa-directory

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

PWA.Rocks-витрина прогрессивных веб-приложений.

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

Помните, что сайты не являются «мобильными», поэтому лучшие PWA отлично смотрятся на рабочем столе и на устройствах.

Витрина Google PWA : витрина Google для компаний, которые были подобраны из PWA.

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

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

Appcope, один из каталогов для Progressive Web Apps (PWA)

Список PWA / Лучшие примеры PWA приложений

Name	Description	Link	Audit score
ReSTbasis	Web Starter Kit.		100
The Air Horner	An Air horn.		100
chromestatus	Chrome Platform Status		100
Serene Notes	text & picture notes, retrievable by context		100
Dev.Opera	Web features and implementations		73
Appscope	Directory of PWAs		100
Bet Calculator	Online bet calculator		91
emojoy			82
Expense Manager	Example expense manager
Firefox Platform Status	Roadmap for web platform features
Flipkart Lite	Online shopping		55
GitHub Explorer
Google I/O			82
Guitar Tuner	Tune a guitar		82
Instant Website Maker	Make A Website		100
Kite OnAir network	Kite Network
koolsol	solitaire card game		100
Memory Game PWA

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

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

В 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 - известный французский косметический бренд.

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); }); } }

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 файла.

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

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

PWA могут также использовать функциональные возможности, предоставляемые операционной системой. Например, в Windows 10 приложения могут использовать центр уведомлений операционной системы или учитывать определенные правила и политики операционной системы.

Примечание: Пользователи Linux и Mac OS X должны включить в браузере политику chrome://flags/#enable-desktop-pwas , установив ее в значение Enabled . Google планирует добавить поддержку PWA по умолчанию для этих систем только в Chrome 72.

Установка PWA в Chrome

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

Пользователи Chrome должны посетить страницу PWA, например страницу приложения для заметок ">Notepad , и выбрать в основном меню Установка приложения “Notepad”... для установки.

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

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

Chrome также выводит список установленных прогрессивных веб-приложений и предоставляет пользователям опции для управления. Google приняла решение интегрировать их с приложениями в браузере. Таким образом, что посмотреть полный список установленных приложений, откройте страницу chrome://apps/ .

Вы можете открыть любое установленное приложение с помощью клика или нажатия на сенсорном экране. В меню правой кнопки мыши доступно несколько полезных опций: удаление PWA из Chrome, создание ярлыка или отключение опции “Открыть в новом окне” для открытия запуска в новой вкладке браузера.

Chrome и PWA

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

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

Пользователи Chrome, которые хотят использовать PWA, вынуждены каждый раз посещать точный адрес приложения, чтобы установить его в основном меню Chrome. Искать подобные приложения можно вручную, а можно воспользоваться сторонними списками, например списком на ">Outweb .

Нашли опечатку? Нажмите Ctrl + Enter