Progressive Web App – от А до Я что это Как создать прогрессивное веб приложение

Что такое прогрессивные веб-приложения (PWA)?

Прогрессивные веб-приложения ( PWA ) популярны в наши дни. Многие известные сайты используют PWA.

Давайте познакомимся с этим новым форматом поближе.

PWA — это просто лучшее веб-приложение

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

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

Быстро стартуют. Быстро работают.

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

Являются отзывчивыми и адаптивными

Пользователи должны получать доступ к контенту на различных устройствах и размерах экрана! Хорошее PWA будет работать хорошо на всех них.

Без проблем справляются с прерывистым соединением

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

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

Также можно предоставлять полностью автономную версию своего контента, в которой все кэшируется.

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

Заимствуют нужные функции у нативных приложений

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

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

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

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

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

Технические стандарты, на которые должно полагаться PWA

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

• HTTPS для безопасной доставки контента .
• Укажите манифест веб-приложения, чтобы предоставить дополнительные мета-данные. В прошлом у нас были мета-теги, которые предоставляли поисковым системам дополнительную информацию контенте. Манифест веб-приложения похож на мета-теги 2.0:

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

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

Кроме этого service worker позволяет перехватывать все сетевые события приложения. Это позволяет написать собственный JavaScript-код, чтобы разрешить сетевой запрос, заблокировать запрос, вернуть файл из кэша, обработать push-уведомление и так далее. Если вы хотите узнать больше, прочитайте Service Workers: Введение .

Является ли PWA просто другим названием веб-приложений?

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

Основная причина, почему progressive web app вызвали настолько большой интерес, заключается в названии. Так как термин веб-приложения используется уже в течение долгого времени.

Заключение

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

Данная публикация представляет собой перевод статьи « What are Progressive Web Apps (PWA)? » , подготовленной дружной командой проекта Интернет-технологии.ру

Разработка вашего первого Progressive Web App c React

Progressive Web Apps это разрекламированное будущее интернета. Давайте разработаем такое приложение!

Google продвигает PWA как решение многих проблем современного веба — в частности вопросов связанных с мобильными пользователями: https://developers.google.com/web/progressive-web-apps/.

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

Крупные игроки, такие как Twitter или Flipboard недавно запустили свои PWA, которые можно попробовать посетив с мобильного устройства страницы http://flipboard.com или https://lite.twitter.com/.

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

Настройка

Для начала, давайте создадим базовое React приложение с помощью create-react-app.

Перейдите в каталог в котором вы будете хранить ваше приложение и запустите следующие команды:

Теперь давайте установим React Router:

Наконец, скопируйте этот код в файл App.js. Он даст нам простой макет страницы с навигацией:

Запустите npm start чтобы протестировать ваше приложение. Смотреть ещё нечего, но для наших целей это хорошее начало. Давайте начнём конвертировать всё это в Progressive Web App.

1. Установка Lighthouse

Lighthouse — это бесплатный инструмент от Google, который оценивает ваше приложение на основе чек листа PWA. https://developers.google.com/web/tools/lighthouse/.

Давайте установим его в Chrome, а после этого оценим нашем приложение. Вы можете запустить аудит Lighthouse кликнув по иконке в правом верхнем углу браузера, а затем нажав на кнопку «Generate Report».

Пока что наше приложение быстрое (так как у нас очень мало контента), но оно проваливается в большинстве ключевых областей.

Вы можете увидеть чек лист, который используется в Lighthouse здесь: https://developers.google.com/web/progressive-web-apps/checklist.

Давайте работать с проблемами по порядку.

2. Настройка Service Worker

Service worker — это JavaScript код, который находится между нашим приложением и сетью. Мы будем использовать его для перехвата сетевых запросов и обслуживания закэшированных файлов — это позволит нашему приложению работать оффлайн.

Чтобы начать работу с Service Worker’ом, нам необходимо сделать 3 вещи:

• Создать файл service-worker.js в папке public ;
• Зарегистрировать worker через наш index.js ;
• Настроить кэширование;

Давайте сделаем это.

Первый шаг довольно понятен. В папке pwa-experiment/public , создаём пустой JavaScript файл названный service-worker.js .

Второй шаг немного запутаннее. Мы хотим проверить если браузер поддерживает service worker’ы, и тогда регистрировать его с помощью service-worker.js .

Чтобы сделать это, давайте добавим тег script в файл public/index.html.

Этот код очень простой — если браузер поддерживает его, то мы ждём пока страница загрузится, а после этого регистрируем наш Service Worker загружая файл service-worker.js .

Завершающий шаг: Настройка кэширования!

Мы собираемся скопировать настройки Service Worker’а отсюда написанные Addy Osmani, а также отключим кэширование в целях разработки (и предпримем меры удаления всего кэша, когда Service Worker инициализируется).

Перезапустите ваш приложение с помощью npm run start и вы должны увидеть следующее в консоле:

Давайте закроем консоль и запустим аудит Lighthouse снова:

Мы делаем успехи! Теперь у нас есть зарегистрированный Service Worker. Так как у нас отключено кэширование, вторая галочка ещё не отмечена, но как только мы включим кэширование она будет работать!

3. Добавление прогрессивных улучшений

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

Прямо сейчас, файл index.html отображает пустой div (#root) , который подхватывает наше React приложение.

Вместо этого, мы хотим отображать какой-то базовый HTML и CSS, ещё до того как React приложение будет инициализировано.

Самый простой способ сделать это — переместить некоторые из наших основных HTML структур в этот самый div#root . Этот HTML будет перезаписан как только ReactDOM отобразит компонент App, но покажет пользователю что-то вместо пустой страницы на которую пришлось бы глазеть пока загружается bundle.js.

Вот наш новый index.html . Обратите внимание, что стили находятся в head , а HTML в div#root .

(Кстати, теперь мы можем удалить дубликаты стилей в App.css и index.css — просто чтобы сделать код чище.)

Одобрит ли это Lighthouse?
Ага!

4. Возможность добавления на домашний экран

Мы можем пропустить требования касающиеся HTTPS — которые будут учтены после деплоя.

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

Чтобы это сделать, нам нужно добавить файл manifest.json в папку public .

Если у вас нету значка, то можете использовать этот (любезность моей компании MuseFind), или создайте свой собственный (должен быть 192 на 192 пикселя):

Добавьте icon.png и manifest.json в папку public , а также добавьте следующие строки в ваш index.html файл:

Хорошо, что теперь мы делаем?

Всё что нам не хватает, это кэширование и HTTPS.

5. Деплой через Firebase

Во-первых, включите кэширование. Измените doCache на true в файле service-worker.js .

После этого, в консоле Firebase создайте новый проект и назовите его pwa-experiment .

Вернитесь в папку с проектом и запустите следующее:

После того как вы пройдёте авторизацию и начнётся инициализация: ответьте на следующие вопросы:

Когда он спросит What Firebase CLI features do you want to setup for this directory? , с помощью пробела снимете галочки везде кроме «Hosting».

Нажмите Enter, а после этого выберите pwa-experiment в качестве проекта.

Когда он спросит What do you want to use as your public directory? , наберите на клавитуре «build» и нажмите Enter.

На вопрос про одностраничное приложение, выберите «No».

После этого процесс должен завершиться. Теперь можно запустить команду:

Это соберёт наш проект в папку build , которую Firebase будет деплоить.

Firebase вернёт нам URL. Давайте откроем его в Chrome и запустим аудит Lighthouse в заключительный раз.

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

Куда двигаться дальше

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

Однако, по мере роста вашего приложения, файл main.js будет увеличиваться и увеличиваться, и Lighthouse будет всё меньше и меньше доволен вами.

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

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

Как сделать PWA устанавливаемым

На этой странице

В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанвливать веб-приложения на поддерживающие мобльные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».

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

Требования

Чтобы сделать сайт доступным для установки, ему необходимы соедующие вещи:

• Веб-манифест с правильно заполненными полями
• Сайт должен использовать защищенный (HTTPS) домен
• Иконка для предоставления приложения на устройстве
• Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)

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

Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.

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

Файл js13kpwa.webmanifest веб-приложения js13kPWA включен в раздел содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.»> файла index.html с помощью средующей строчки кода:

Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.

Содержимое файла может выглядеть так:

Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:

• name : Полное название вашего приложения.
• short_name : Короткое название для отображения на домашнем экране.
• description : Одно-два предложения, описывающих приложение.
• icons : Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше пдходила под устройство пользователя
• start_url : Загружаемый исходный документ при запуске приложения
• display : Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
• theme_color : Основной цвет для интерфейса, используемый операционной системой
• background_color : Цвет для фона, используемый при установке и на заставке

Минимальные требования к манифесту — name и хотя бы один значок (с src , size и type ). Поля description , short_name , и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.

Добавить на домашний экран

«Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берет информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.

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

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

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

При подтверждении ярлык будет добавлен на рабочий стол.

После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу значка отображется иконка браузера, чтобы инормировать пользователя о его веб-характере.

Экран загрузки

В некоторых браузерах, на основе информации из манифеста, создается заставка, отображаемая при запуске PWA

Иконка и фоновый цвет использовались для создания заставки.

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

Для получения большей информации, можете почитать наш Add to Home screen гайд. В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.

Теперь давайте перейдём к последнему фаргменту PWA-головоломки — повторному запуску с помощю push-уведомлений.

Делаем собственное Progressive Web App. Пример готового приложения

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

Откройте страничку «Установить приложение» и установите приложение. О том, как это сделать вы можете просмотреть начиная с первого урока.

Чтобы посмотреть работу PWA приложения на Android — нажмите Установить приложение. Появится сообщение — «Добавить на рабочий стол Good Day»? — нажмите Да, и на экране телефона установится эта страничка. Кстати на 4.4 не работает.

Теперь в телефоне откройте Календарь и Транслит. Затем выключите интернет, откройте приложение и вы увидите, что даже без сети те страницы, которые вы открывали ранее вам все равно доступны, а Часы (если вы их не открывали) — требуют интернета.

Давайте запустим Lighthouse плагин, чтобы посмотреть, насколько правильное приложение. Нажимаем Generate Report и получаем скриншот — почти все на 100%. Это очень приятно. Но с другой стороны в нашем pwa почти нет файлов, так что по другому быть и не может.

Что еще сказать про pwa — это действительно прогрессивные приложения, за ними будущее. Надеюсь с каждым годом они станут более востребованными и все больше платформ будут их поддерживать. Пользователю не нужно будет искать приложение в Apple Store или Play Market, а то что они еще устанавливаются без проблем на Windows делают их особой изюминкой. Да и программисту будет гораздо проще сделать одно приложение, вместо 3-5.

НКО | Progressive Web Apps: как создать приложение, когда на это нет средств

Ната­лья Бара­но­ва

Всего материалов: 585

Progressive Web Apps: как создать приложение, когда на это нет средств

Если вы меч­та­е­те о сво­ем мобиль­ном при­ло­же­нии, но пони­ма­е­те, что денег на него нет, при­смот­ри­тесь к про­грес­сив­ным веб-при­ло­же­ни­ям (Progressive Web Apps). Для неком­мер­че­ских орга­ни­за­ций это воз­мож­ность создать при­ло­же­ние без боль­ших финан­со­вых затрат.

О том, что такое Progressive Web Apps, замре­дак­то­ра Теп­ли­цы Ната­лье Бара­но­вой рас­ска­за­ли веб-дизай­нер и раз­ра­бот­чик, спе­ци­а­ли­зи­ру­ю­щий­ся на созда­нии про­ек­тов для неком­мер­че­ских орга­ни­за­ций, Анна Ладо­шки­на и руко­во­ди­тель уни­вер­саль­ной реклам­ной систе­мы Webartex Рус­лан Бай­бе­ков.

Progressive Web Apps (PWA) – про­грес­сив­ные веб-при­ло­же­ния, или гибрид­ный сайт-при­ло­же­ние. По сути это сайт, кото­рый вза­и­мо­дей­ству­ет с поль­зо­ва­те­лем как пол­но­цен­ное при­ло­же­ние. Он при­сы­ла­ет уве­дом­ле­ния и обнов­ля­ет­ся. Ком­па­ния Google анон­си­ро­ва­ла созда­ние этой тех­но­ло­гии в 2015 году, а пре­зен­то­ва­ла ее в 2020‑м.

«В опре­де­лен­ный момент воз­мож­но­сти бра­у­зе­ров в сово­куп­но­сти с push-интер­фей­са­ми теле­фо­нов дали воз­мож­ность уста­нав­ли­вать при­ло­же­ние сра­зу на домаш­ний экран, при этом вы може­те полу­чать уве­дом­ле­ния и, конеч­но же, рабо­тать в авто­ном­ном режи­ме», – объ­яс­нил Рус­лан Бай­бе­ков.

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

Плюсы

1. Нет необ­хо­ди­мо­сти реги­стри­ро­вать при­ло­же­ние в мага­зине при­ло­же­ний и огра­ни­че­ний, свя­зан­ных с пра­ви­ла­ми этих плат­форм (в App Store и Google Play).

2. Поль­зо­ва­те­лям не нуж­но уста­нав­ли­вать при­ло­же­ние. «На эта­пе уста­нов­ки отва­ли­ва­ет­ся до 30% ауди­то­рии, – гово­рит о плю­сах Анна Ладо­шки­на. – Кро­ме того, в прин­ци­пе, попасть в чис­ло уста­нов­лен­ных при­ло­же­ний труд­но. У поль­зо­ва­те­лей на теле­фоне в сред­нем поряд­ка 30 при­ло­же­ний, из кото­рых регу­ляр­но исполь­зу­ют­ся око­ло 10, попасть в это чис­ло неболь­шо­му нише­во­му про­ек­ту прак­ти­че­ски нере­аль­но».

«Мы пере­ста­ем ска­чи­вать при­ло­же­ния. При­чин тому море – кому-то лень, кто-то уже наиг­рал­ся. А вот на ваш сайт поль­зо­ва­те­ли могут пере­хо­дить по ссыл­кам из ВКон­так­те или Facebook, во вре­мя про­смот­ра сай­тов или непо­сред­ствен­но из поис­ко­вой выда­чи. То есть у вас как у вла­дель­ца ресур­са про­па­да­ет необ­хо­ди­мость кон­ку­рен­ции с мил­ли­о­на­ми при­ло­же­ний в сто­рах». Рус­лан Бай­бе­ков

3. Кросс-плат­фор­мен­ность. Не нуж­но раз­ра­ба­ты­вать отдель­ную вер­сию для раз­лич­ных плат­форм.

4. Мож­но исполь­зо­вать суще­ству­ю­щий ресурс (сайт) и суще­ству­ю­щий кон­тент.

«Еще один важ­ный аспект – поль­зо­ва­те­лям ниче­го не нуж­но уста­нав­ли­вать на свой смарт­фон. В стра­нах, где суще­ствен­ны огра­ни­че­ния в досту­пе к Интер­не­ту или где не очень рас­про­стра­не­ны мощ­ные совре­мен­ные смарт­фо­ны, напри­мер в Афри­ке, – это важ­ное пре­иму­ще­ство, поз­во­ля­ю­щее эко­но­мить на тра­фи­ке. В то вре­мя как про­ник­но­ве­ние тра­ди­ци­он­ных при­ло­же­ний на этих тер­ри­то­ри­ях очень огра­ни­че­но». Анна Ладо­шки­на

5. Ско­рость. Уста­нав­ли­ва­ет­ся такое при­ло­же­ние момен­таль­но, по сло­вам Рус­ла­на Бай­бе­ко­ва, так как все его ком­по­нен­ты уже под­гру­же­ны в кэш еще при пер­вом посе­ще­нии ваше­го сай­та.

6. Все функ­ции PWA рабо­та­ют даже в том слу­чае, если посе­ти­тель не уста­но­вил при­ло­же­ние, но сер­фит по ваше­му сай­ту.

Минусы

«Несмот­ря на три года суще­ство­ва­ния, к сожа­ле­нию, не все зна­ют о PWA, и най­ти раз­ра­бот­чи­ка, осо­бен­но в реги­о­нах, будет труд­но», – гово­рит об основ­ной про­бле­ме Рус­лан Бай­бе­ков.

Из огра­ни­че­ний, по сло­вам Анны Ладо­шки­ной, пока не все «натив­ные» функ­ции смарт­фо­нов доступ­ны в виде бра­у­зер­ных API. «Поэто­му не все воз­мож­но­сти, доступ­ные раз­ра­бот­чи­кам при­ло­же­ний, могут быть реа­ли­зо­ва­ны в таком фор­ма­те», – отме­ти­ла спе­ци­а­лист.

Надо ли НКО использовать эту технологию?

Спе­ци­а­ли­сты убеж­де­ны, что для НКО PWA отлич­ный вари­ант. « Тех­но­ло­гия раз­ра­бот­ки сай­тов PWA подой­дет прак­ти­че­ски любо­му сай­ту, – гово­рит Рус­лан Бай­бе­ков. – Но тех­ни­че­ская реа­ли­за­ция может зави­сеть от неко­то­рых фак­то­ров, напри­мер, какую CMS вы исполь­зу­е­те».

Если коман­да бла­го­тво­ри­тель­но­го фон­да или нефор­маль­но­го сооб­ще­ства хочет раз­ра­ба­ты­вать мобиль­ное при­ло­же­ние, то сто­ит рас­смот­реть вари­ант созда­ния имен­но PWA. «Плюс в сни­же­нии сто­и­мо­сти раз­ра­бот­ки и под­держ­ки, а так­же в воз­мож­но­сти пере­ис­поль­зо­вать суще­ству­ю­щий кон­тент. Осо­бен­но если при­ло­же­ние пре­иму­ще­ствен­но кон­тент­ной направ­лен­но­сти и не пред­по­ла­га­ет актив­но задей­ство­вать систем­ные функ­ции смарт­фо­на», – объ­яс­ни­ла Анна Ладо­шки­на.

«Кро­ме того, это может быть хоро­шим реше­ни­ем для про­ек­тов и при­ло­же­ний, направ­лен­ных на сла­бо соци­а­ли­зи­ро­ван­ную ауди­то­рию, – ведь что­бы ска­чать при­ло­же­ние из аппсто­ра, нуж­но иметь учет­ную запись и смарт­фон соот­вет­ству­ю­ще­го каче­ства, а в слу­чае с PWA это не обя­за­тель­но, доста­точ­но полу­чить более менее при­лич­ный доступ в Интер­нет, напри­мер, через какой-то пуб­лич­ный wi-fi». Анна Ладо­шки­на

Примеры

1. Плат­фор­ма по поис­ку изоб­ра­же­ний Pinterest.com исполь­зу­ет PWA. Резуль­та­ты были эффект­ны­ми: уве­ли­чи­лось чис­ло актив­ных поль­зо­ва­те­лей за неде­лю на 103%, уве­ли­чи­лось коли­че­ство новых под­пис­чи­ков на 843%, а вес стра­ни­цы изме­нил­ся с 490 КБ до 190 КБ.

Изоб­ра­же­ние с сай­та www.monterail.com

2. О том, как Tinder исполь­зу­ет PWA и как это повли­я­ло на про­из­во­ди­тель­ность, мож­но про­чи­тать на Medium.

3. Круп­ный сер­вис по поис­ку оте­лей и срав­не­ния цен на них в режи­ме онлайн Trivago исполь­зу­ет PWA. Так­же эту тех­но­ло­гию при­ме­ня­ет и попу­ляр­ный сер­вис поис­ка жилья по все­му миру Airbnb.

4. По сло­вам Анны Ладо­шки­ной, боль­шое пре­иму­ще­ство PWA дает онлайн-мага­зи­нам, так как им в этом слу­чае не надо раз­ра­ба­ты­вать спе­ци­аль­ные при­ло­же­ния. Поэто­му наи­бо­лее актив­но этот под­ход исполь­зу­ет­ся в элек­трон­ной ком­мер­ции. PWA исполь­зу­ет, напри­мер, Aliexpress и дру­гие онлайн-мага­зи­ны .

Технология PWA

Сайт без интернета или технология PWA.

Салют, всем читателям моего блога! Сегодня я хочу вас познакомить с новой технологией в сайтостроении. И называется она – Технология PWA. Давайте сначала разберемся что она из себя представляет и что может. А потом будем пошагово подключать сайт на WordPress или любой другой (не принципиально).

Что такое PWA? – Аббревиатура от латинского словосочетания Progressive Web Apps. Что в переводе означает – Прогрессивное веб-приложение. В нашем случае, это тот же сайт, только он может работать на смартфонах без подключения к интернету. Заинтересовались? Я когда в первый раз прочел об этом на форуме, вообще не поверил.

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

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

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

ВАЖНО! Приложение работает только по защищенному протоколу https. Если вы ещё не перешли на этот протокол, подключение не получится.

Как подключить PWA к сайту WordPress?

В первом случае подключения вам необходимо будет иметь хотя-бы базовые знания в разметке html и структуре php кода WordPress движка. Так же для тех, кто предпочитает пользоваться плагинами, в конце статьи я покажу как и каким плагином воспользоваться. Но давайте всё по порядку.

Способ первый: Вручную (примитивный).

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

Шаг №1.

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

• Иконки для apple
• 57×57
• 60×60
• 72×72
• 76×76
• 114×114
• 120×120
• 144×144
• 152×152
• 180×180

• Иконки для android
• 36×36
• 48×48
• 72×72
• 96×96
• 144×144
• 192×192
• 512×512

Как вы успели заметить, некоторые размеры повторяются, их можно заново не создавать. Их можно даже не переименовывать, работать будет и так. Чтобы проще было делать одинаковые иконки, создайте сначала самую большую, то есть 512х512 и уже из неё сохраняйте меньшие размеры. В фотошопе перед сохранением можно поставить нужный размер, вот тут и ставите нужный вам. Файл -> Сохранить для Web.

Шаг №2.

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

Рядом с ними создайте новую папку, у меня она называется icons. В итоге, получилось так:

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

Шаг №3.

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

Как видите, и в первом и во втором случае, подключение происходит напрямую с папки icons и ссылка имеет полный путь. После создания этого файла, заливаете его в корень сайта рядом папкой icons и подключаете его в файле header.php после подключения иконок, перед функцией

Шаг №4.

Теперь, нужно создать файл скрипта, который и будет создавать кэш в телефоне. Файл будет называться manUp.js.

После создания, так же как и в предыдущем случае, заливаем этот файл в корень сайта и подключаем в header.php.

Шаг №5.

Теперь создаем ещё один файл с названием pwabuilder-sw.js и так же заливаем его в корень сайта. Теперь подключаем этот файл в том же header.php:

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

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

Уверен, глаз уже радуется, не так ли?

Теперь осталось выключить интернет и попробовать перейти на сайт по иконке. Сайт откроется как обычное приложение и будет полностью функционировать. Будет функционировать только сам сайт, а те скрипты которые требуют интернет подключение (например реклама от Гугла или Яндекса, видео с Ютуба), естественно работать не будут.

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

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

Способ второй: Автоматический (рекомендуемый).

Как многие уже из вас заметили, я переписал статью. Зачем? Дело в том, что на начальном этапе тестирования, я установил самый популярный плагин PWA для WP. Но как оказалось зря. А зря, потому-что этот плагин работает немного некорректно. Речь идет о Super Progressive Web Apps.

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

Плагин Progressive Web Apps For WP

Для поиска этого плагина просто введите ключевое слово в поиск «PWA», данный плагин второй по популярности. Но как бы то не было, просто установить плагин и радоваться новой функцией своего сайта, не получится. Именно по этому я решил переписать статью и предоставить вам максимально понятную расшифровку настроек и инструкцию как правильно его настраивать.

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

Первая вкладка Dashboard.

На данной вкладке всё должно быть точно так же как и на скрине выше. Если у вас последняя галочка не зеленая, значит ваш сайт работает по незащищенному протоколу http. Это означает, что на этом сайте приложение работать не будет. Чтобы подключить приложение PWA к WordPress’у нужно сначала перевести сайт на защищенный протокол https.

Вторая вкладка General.

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

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

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

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

Третья вкладка Design.

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

Четвертая вкладка Push Notification.

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

Пятая вкладка Advanced.

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

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

• Stale While Revalidate – При каждом запуске приложения отдает параметр «Кэш устарел». Я так понял, эта настройка показывает сообщение что кэш старый и не соответствует настоящим данным на сайте.
• Network First – Посылает запрос сначала на наличие интернета и если интернет есть загружает страницу и обновляет кэш приложения. Если же интернета нет, показывает страницу из кэша.
• Cache First – Сначала обращается к кэшу и если страница в кэше есть, вытаскивает эту страницу пользователю. Если нет страницы в кэше, пытается загрузить из интернета.
• Network Only – Сайт работает только через интернет, как обычный сайт. Приложение не обращается к кэшу.

В чем соль? А соль в том, что предыдущий плагин Super Progressive Web Apps работает по настройкам Cache First. Именно поэтому пользователь не видел обновленной версии сайта. Алгоритм был следующим: пользователь заходит на страницу блог (где появилась новая статья), а приложение нашло в своем кэше эту страницу и по закону отдает её пользователю. Ведь у приложения четкая инструкция, загружать в кэш только тогда, когда страницы ещё нет в нем. В остальных случаях, просто отдавать пользователю страницы с кэша. Вот такие дела.

Шестая вкладка Tools.

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

Ну о последней вкладке сказать нечего. Думаю и так понятно для чего она. На этой ноте можно смело закончить настройку PWA приложения для WordPress сайта. Теперь, когда всё настроено, можете зайти на свой сайт и добавить его на рабочий стол. После этого выключите интернет и попробуйте открыть сайт нажав на свою иконку сайта (она будет находиться на главном экране рядом с другими приложениями). Если сайт открылся, поздравляю! Вы всё сделали правильно.

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

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

Друзья, блогу нужна ваша поддержка. Если вам понравилась статья или она вам помогла решить задачу, поделитесь ею в одной из соцсетей. Этим вы поможете дальнейшему развитию. Всем активистам — спасибо!

Favicon

Блог по web технологиям. Веб студия г. Воронеж. Создание и поддержка сайтов на заказ.

• Главная
• /
• Фронтенд
• /
• Ваше первое прогрессивное веб-приложение (PWA)

Ваше первое прогрессивное веб-приложение (PWA)

1. Введение

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

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

Прогрессивное веб-приложение это:

• Прогрессивность — работает для каждого пользователя, независимо от выбора браузера, потому что в качестве основного принципа заложено прогрессивное улучшение.
• Отзывчивость — подходит для любого форм-фактора: десктоп, мобильный телефон, планшет или что-либо еще.
• Независимость от подключения — с помощью service workers может работать в автономном режиме или в медленных сетях.
• Подобно приложению — выглядит как приложение, потому что модель оболочки приложения отделяет функциональность приложения от содержимого приложения.
• Свежесть — всегда обновляется благодаря процессу обновления service worker.
• Безопасность — обслуживается через HTTPS для предотвращения перехвата или подмены данных.
• Обнаруживаемый — идентифицируется как «приложение», однако благодаря манифесту W3C и регистрации service worker-а позволяет поисковым системам находить его.
• Возможность повторного подключения — упрощает повторное взаимодействие с помощью таких функций, как push-уведомления.
• Устанавливаемость — позволяет пользователям добавлять приложения на свой домашний экран, которые они находят наиболее полезными, без использования магазина приложений.
• Linkable — легко поделиться приложением по URL-адресу, не требует полноценной установки.

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

Что мы будем делать?

В этом кодлабе мы собираемся сделать погодное веб-приложение — Weather, с использованием технологий Progressive Web App.

Ваше приложение будет:

• Использовать и демонстрировать вышеуказанные принципы Progressive Web Apps.
• Использовать живые данные о погоде.
• Предоставлять взаимодействия подобные нативным приложениям, позволяющие пользователю добавлять города.

Что вы узнаете?

• Как спроектировать и создать приложение с помощью метода «app shell»
• Как заставить приложение работать в оффлайн режиме
• Как хранить данные для последующего использования в автономном режиме

Что вам потребуется?

• Последняя версия Chrome. Обратите внимание, что приложение работает и в других браузерах, но мы будем использовать некоторые функции Chrome DevTools, чтобы лучше понять, что происходит на уровне браузера.
• Web Server for Chrome, или ваш собственный веб-сервер на выбор.
• Пример кода.
• Текстовый редактор.
• Базовые знания HTML, CSS, JavaScript и Chrome DevTools.

Этот кодлаб ориентирован на Progressive Web Apps (PWA). Некоторые понятия и блоки кода не объясняются и предоставляются для простого копирования и вставки в проект.

2. Начнем установку

Скачиваем код

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

Распакуйте скачанный zip-файл. Файл распакуется в корневую папку your-first-pwapp-master , которая содержит папку для каждого шага этого кодлаба, а также все необходимые вам ресурсы.

Папки step-NN содержат конечный результат каждого шага этого кодлаба. Они там для справки. Мы будем кодить в каталоге work .

Установка и проверка веб сервера

Вы можете свободно использовать свой собственный веб-сервер, но этот кодлаб рассматривает работу с веб сервером Chrome Web Server. Если у вас еще не установилено это расширение, вы можете установить его через интернет-магазин Chrome Web Store.

После установки расширения Web Server for Chrome, нажмите кнопку Apps в панели закладок:

Нажмите кнопку choose folder и выберите рабочую папку. Это позволит вам отслеживать изменения по URL, приведенному в диалоговом окне веб-сервера (в разделе Web Server URL(s) ).

В разделе Options установите флажок Automatically show index.html , как показано ниже:

Затем остановите и перезапустите сервер, сдвинув переключатель Web Server: STARTED влево, а затем обратно вправо.

Теперь посетите свой рабочий сайт в своем веб-браузере (нажав на выделенный Web Server URL ), и вы увидите страницу, которая выглядит примерно так:

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

3. Архитектура оболочки приложения (App Shell)

Что такое app shell?

App shell (оболочка приложения) — это минимальный код HTML, CSS и JavaScript, который необходим для запуска пользовательского интерфейса прогрессивного веб приложения и также является одним из компонентов, который обеспечивает производительность. Его первая загрузка должна быть чрезвычайно быстрой и немедленно кэшироваться. «Кэшироваться» означает то, что файлы оболочки загружаются один раз по сети и затем сохраняются на локальном устройстве. В каждый последующий момент, когда пользователь открывает приложение, файлы оболочки загружаются из кэша локального устройства, что приводит к молниеносному запуску.

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

Service worker — это скрипт, который работает в фоновом режиме браузера, отдельно от веб-страницы, открывая дверь к возможностям, которые не нуждаются в веб-странице или взаимодействии с пользователем.

Иными словами, оболочка приложения похожа на тот код, который вы публикуете в магазине приложений (app store) при создании нативного приложения. Это ядро компонентов, необходимых для того, чтобы ваше приложение могло запуститься, но, не содержащее данных.

Зачем использовать архитектуру App Shell?

Использование оболочки приложения (app shell) позволяет сфокусироваться на скорости, придавая вашим прогрессивным веб-приложениям свойства аналогичные нативным приложениям: мгновенная загрузка и регулярные обновления, без использования магазина приложений.

Создаем App Shell

Первый шаг — разбить конструкцию на его основные компоненты.

• Что должно выводиться на экран немедленно?
• Какие другие UI компоненты являются ключевыми для нашего приложения?
• Какие вспомогательные ресурсы необходимы для оболочки приложения? Например, изображения, JavaScript, стили и т. д.

Мы собираемся создать приложение Weather в качестве нашего первого прогрессивного веб-приложения. Ключевыми компонентами будут:

При разработке более сложного приложения, контент, который не требуется для начальной загрузки, может запрашиваться позже, а затем кэшироваться для будущего использования. Например, мы могли бы отложить загрузку диалогового окна New City (Новый город) до первого взаимодействия с этим диалоговым окном.

4. Реализация оболочки приложения (App Shell)

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

Создание HTML для App Shell

Сейчас мы добавим основные компоненты, которые обсуждались в Архитектуре оболочки приложения (App Shell).

Вспомним, что ключевые компоненты будут состоять из:

• Хедер с заголовком и кнопками добавления/обновления
• Контейнер для прогнозов
• Шаблон карточки прогноза
• Диалоговое окно для добавления новых городов
• Индикатор загрузки

Ваше первое прогрессивное веб-приложение

Введение

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

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

быстро и надежно

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

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

Устанавливается

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

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

Mobile & Desktop

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

Что вы будете строить

В этой кодовой метке вы создадите веб-приложение для погоды с использованием методов Progressive Web App. Ваше приложение будет:

• Используйте адаптивный дизайн, чтобы он работал на настольном или мобильном устройстве Быть быстрым, используя работника службы для предварительного кэширования ресурсов приложения (HTML, CSS, JavaScript, изображений), необходимых для запуска, и кэшировать данные о погоде во время выполнения для повышения производительности
• beforeinstallprompt установки с использованием манифеста веб-приложения и события beforeinstallprompt чтобы уведомить пользователя о возможности его установки

Что вы выучите

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

Эта кодовая метка ориентирована на прогрессивные веб-приложения. Нерелевантные концепции и блоки кода затенены и предназначены для простого копирования и вставки.

Что вам нужно

• Недавние версии Chrome (74 или более поздних) — это веб-приложения, которые работают во всех браузерах, но мы будем использовать некоторые функции Chrome DevTools, чтобы лучше понимать, что происходит на уровне браузера, и использовать его для проверить опыт установки.
• Знание HTML, CSS, JavaScript и Chrome DevTools .

Начало работы

Получите ключ для API Dark Sky

Наши погодные данные Dark Sky API из Dark Sky API . Чтобы использовать его, вам нужно запросить ключ API. Он прост в использовании и бесплатен для некоммерческих проектов.

Убедитесь, что ваш ключ API работает правильно

Чтобы проверить, работает ли ваш ключ API, сделайте HTTP-запрос к API DarkSky. Обновите приведенный ниже URL-адрес, чтобы заменить DARKSKY_API_KEY вашим ключом API. Если все работает, вы должны увидеть последний прогноз погоды для Нью-Йорка.

Получить код

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

Настоятельно рекомендуется: используйте Glitch для импорта репо

Использование Glitch — рекомендуемый метод для работы с этим кодовым ярлыком.

1. Откройте новую вкладку браузера и перейдите к https://glitch.com .
2. Если у вас нет учетной записи, вам необходимо зарегистрироваться.
3. Нажмите New Project, затем Clone из Git Repo .
4. Клонируйте https://github.com/googlecodelabs/your-first-pwapp.git и нажмите OK
5. После загрузки .env отредактируйте файл .env и обновите его с помощью ключа API DarkSky.
6. Нажмите кнопку Show Live, чтобы увидеть PWA в действии.

Альтернатива: скачать код и работать локально

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

1. Распакуйте загруженный zip-файл.
2. Запустите npm install чтобы установить зависимости, необходимые для запуска сервера.
3. Отредактируйте server.js и установите ваш ключ API DarkSky.
4. Запустите node server.js чтобы запустить сервер на порту 8000.
5. Откройте вкладку браузера для http://localhost:8000

Установить базовый уровень

Какая наша отправная точка?

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

Некоторые вещи, чтобы попробовать .

1. Добавьте новый город с синей кнопкой «плюс» в правом нижнем углу.
2. Обновите данные с помощью кнопки обновления в правом верхнем углу.
3. Удалите город, используя крестик в правом верхнем углу каждой карты города.
4. Посмотрите, как это работает на настольных и мобильных устройствах.
5. Посмотрите, что происходит, когда вы выходите из сети.
6. С помощью панели «Сеть» Chrome узнайте, что происходит, когда сеть переключается в режим медленной 3G.
7. Добавьте задержку на сервер прогноза, изменив FORECAST_DELAY в server.js

Аудит с Маяком

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

Мы будем использовать Lighthouse для аудита нашего приложения Weather и проверки внесенных нами изменений.

1. Откройте ваш проект в новой вкладке. 2. Откройте Chrome DevTools и перейдите на вкладку Audits, DevTools отобразит список категорий аудита, оставив их включенными. 3. Нажмите Run Audits, через 60-90 секунд Lighthouse предоставит вам отчет на странице.

прогрессивного веб-приложения

Мы собираемся сосредоточиться на результатах аудита Progressive Web App.

И есть много красного, чтобы сосредоточиться на:

• ❗FAILED: Текущая страница не отвечает 200 в автономном режиме.
• ❗FAILED: start_url не отвечает 200 в автономном режиме.
• ❗FAILED: Не регистрирует работника службы, который контролирует страницу и start_url.
• ❗FAILED: Манифест веб-приложения не соответствует требованиям к установке.
• ❗FAILED: Не настроен для настраиваемой заставки.
• ❗FAILED: Не устанавливает цвет темы адресной строки.

Давайте перейдем к решению некоторых из этих проблем!

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

К концу этого раздела наше приложение погоды пройдет следующие аудиты:

• Манифест веб-приложения не соответствует требованиям к установке.
• Не настроен для собственного заставки.
• Не устанавливает цвет темы адресной строки.

Создание манифеста веб-приложения

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

Используя манифест веб-приложения, ваше веб-приложение может:

• Сообщите браузеру, что вы хотите, чтобы ваше приложение открывалось в отдельном окне ( display ).
• Определите, какая страница открывается при первом запуске приложения ( start_url ).
• Определите, как приложение должно выглядеть на short_name приложений или в short_name запуска ( short_name , icons )
• Создать заставку ( name , icons , colors ).
• Скажите браузеру, чтобы открыть окно в альбомном или портретном режиме ( orientation ).
• И plenty more .

Создайте файл с именем public/manifest.json в своем проекте и скопируйте / вставьте следующее содержимое:

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

Добавить ссылку на манифест веб-приложения

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

public/index.html

DevTools Detour

DevTools предоставляет быстрый и простой способ проверить ваш файл manifest.json . Откройте панель Manifest на панели Application. Если вы правильно добавили информацию о манифесте, вы сможете увидеть ее проанализированной и отображенной в удобном для человека формате на этой панели.

Добавить метатеги и иконки iOS

Safari на iOS не поддерживает манифест веб-приложения ( yet ), поэтому вам нужно добавить traditional meta tags в вашего файла index.html :

public/index.html

Бонус: Easy Lighthouse исправления

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

Установите мета-описание

В ходе SEO-аудита компания Lighthouse отметила, что наши Document does not have a meta description. « Document does not have a meta description. » могут отображаться в результатах поиска Google. Высококачественные уникальные описания могут сделать ваши результаты более релевантными для пользователей поиска и увеличить поисковый трафик.

Чтобы добавить описание, добавьте следующий meta тег в части документа:

public/index.html

Установить цвет темы адресной строки

В ходе аудита PWA компания Lighthouse отметила наше приложение « Does not set an address-bar theme color ». Тематическое отображение адресной строки браузера в соответствии с цветами вашего бренда обеспечивает более полное погружение пользователя.

Для того, чтобы установить цвет темы на мобильный, добавьте следующий meta тег в части документа:

public/index.html

Проверьте изменения с Lighthouse

Снова запустите Lighthouse (нажав на значок + в левом верхнем углу панели Audits) и проверьте внесенные изменения.

SEO Аудит

• ✅ PASSED: В документе есть мета-описание.

Прогрессивный аудит веб-приложений

• ❗FAILED: Текущая страница не отвечает 200 в автономном режиме.
• ❗FAILED: start_url не отвечает 200 в автономном режиме.
• ❗FAILED: Не регистрирует работника службы, который контролирует страницу и start_url.
• ✅ PASSED: Манифест веб-приложения соответствует требованиям к установке.
• ✅ PASSED: Настроен для собственного заставки.
• ✅ PASSED: Устанавливает цвет темы адресной строки.

Обеспечить базовый опыт работы в автономном режиме

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

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

• Текущая страница не отвечает 200 в автономном режиме.
• start_url не отвечает 200 в автономном режиме.
• Не регистрирует сервисного работника, который контролирует страницу и start_url.

В следующем разделе мы заменим нашу пользовательскую страницу в автономном режиме на полноценную работу в автономном режиме. Это улучшит работу в автономном режиме, но, что более важно, значительно улучшит нашу производительность, потому что большинство наших ресурсов (HTML, CSS и JavaScript) будут храниться и обслуживаться локально, устраняя сеть как потенциальное узкое место.

Сервисные работники на помощь

Если вы не знакомы с работниками сферы обслуживания, вы можете получить Introduction To Service Workers представление, прочитав Introduction To Service Workers о том, что они могут сделать, как работает их жизненный цикл и многое другое. После того, как вы закончите эту кодовую лабораторию, обязательно ознакомьтесь с Debugging Service Workers code lab для более глубокого изучения работы с сервисными работниками.

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

Зарегистрируй сервисного работника

Первым шагом является регистрация сервисного работника. Добавьте следующий код в файл index.html :

public/index.html

Этот код проверяет, доступен ли API сервисного работника, и если он есть, сервисный работник на /service-worker.js регистрируется, как только страница становится loaded .

Обратите внимание, что обслуживающий работник обслуживается из корневого каталога, а не из каталога /scripts/ . Это самый простой способ установить __ scope __ вашего сервисного работника. scope работника службы определяет, какие файлы контролирует работник службы, другими словами, по какому пути работник службы будет перехватывать запросы. scope умолчанию является местоположением рабочего файла сервиса и распространяется на все каталоги ниже. Таким образом, если service-worker.js находится в корневом каталоге, работник службы будет контролировать запросы со всех веб-страниц в этом домене.

Precache офлайн страница

Во-первых, нам нужно сообщить работнику сервиса, что нужно кэшировать. Мы уже создали простой offline page ( public/offline.html ), который будет отображаться каждый раз, когда нет сетевого подключения

В вашем service-worker.js добавьте ‘/offline.html’, в массив FILES_TO_CACHE , конечный результат должен выглядеть следующим образом:

public/service-worker.js

Затем нам нужно обновить событие install чтобы указать работнику сервиса предварительно кэшировать автономную страницу:

public/service-worker.js

Наше событие install теперь открывает кеш с caches.open() и предоставляет имя кеша. Предоставление имени кэша позволяет нам создавать версии файлов или отделять данные от кэшированных ресурсов, чтобы мы могли легко обновить одно, но не влиять на другое.

Когда кеш открыт, мы можем вызвать cache.addAll() , который берет список URL-адресов, выбирает их с сервера и добавляет ответ в кеш. Обратите внимание, что cache.addAll() будет отклонен, если какой-либо из отдельных запросов потерпит неудачу. Это означает, что вам гарантировано, что, если этап установки пройдет успешно, ваш кеш будет в согласованном состоянии. Но если по какой-то причине произойдет сбой, он автоматически попытается снова при следующем запуске сервисного работника.

DevTools Detour

Давайте посмотрим, как вы можете использовать DevTools для понимания и отладки сервисных работников. Перед перезагрузкой страницы откройте DevTools, перейдите на панель Service Workers на панели Application Это должно выглядеть так:

Когда вы видите пустую страницу, подобную этой, это означает, что на текущей открытой странице нет зарегистрированных сервисных работников.

Теперь перезагрузите страницу. Панель Service Workers теперь должна выглядеть так:

Когда вы видите такую информацию, это означает, что на странице запущен сервисный работник.

Рядом с меткой статуса есть номер (в данном случае 34251), следите за этим номером, когда вы работаете с работниками сферы обслуживания. Это простой способ узнать, обновился ли ваш сервисный работник.

Очистить старые офлайн-страницы

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

Добавьте следующий код в событие activate :

public/service-worker.js

DevTools Detour

Открыв панель «Service Workers», обновите страницу, вы увидите, что установлен новый «Service Worker», и увеличится номер статуса.

Обновленный сервисный работник немедленно получает управление, потому что наше событие install заканчивается с self.skipWaiting() , а событие activate заканчивается с self.clients.claim() . Без них старый сервисный работник продолжал бы контролировать страницу, пока есть открытая вкладка.

Обработка неудачных сетевых запросов

И, наконец, нам нужно обработать события fetch . Мы собираемся использовать network, falling back to cache strategy . Сервисный работник сначала попытается извлечь ресурс из сети, если это не удастся, он вернет автономную страницу из кэша.

public/service-worker.js

Обработчик fetch должен обрабатывать только fetch по страницам, поэтому другие запросы могут быть выгружены из обработчика и обычно обрабатываются браузером. Но, если запрос .mode — это navigate , используйте fetch чтобы попытаться получить элемент из сети. Если это не удается, обработчик catch открывает кеш с caches.open(CACHE_NAME) и использует cache.match(‘offline.html’) для получения предварительно кэшированной автономной страницы. Затем результат передается обратно в браузер с помощью evt.respondWith() .

Key Point: fetch вызова fetch в evt.respondWith() предотвращает обработку выборки по умолчанию в браузерах и сообщает браузеру, что мы хотим обработать ответ самостоятельно. Если вы не evt.respondWith() внутри обработчика fetch , вы просто получите поведение сети по умолчанию.

DevTools Detour

Давайте проверим, чтобы убедиться, что все работает так, как мы ожидаем. Открыв панель «Service Workers», обновите страницу, вы увидите, что установлен новый «Service Worker», и увеличится номер статуса.

Мы также можем проверить, что было кэшировано. Перейдите на панель Cache Storage на панели Application DevTools. Щелкните правой кнопкой мыши Cache Storage, выберите Refresh Caches, разверните раздел, и вы увидите название вашего статического кэша, приведенное в левой части. Нажатие на имя кэша показывает все файлы, которые кэшируются.

Теперь давайте проверим автономный режим. Вернитесь к панели Service Workers DevTools и установите флажок Offline. После проверки вы увидите небольшой желтый значок предупреждения рядом с вкладкой панели Network. Это указывает на то, что вы не в сети.

Перезагрузите страницу и . это работает! Мы получаем our офлайн панда, а не офлайн dino Chrome!

Советы по тестированию сервисных работников

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

Используйте DevTools

На панели Service Workers панели Application есть несколько флажков, которые значительно облегчат вашу жизнь.

• Offline — Если этот флажок установлен, имитирует работу в автономном режиме и предотвращает отправку любых запросов в сеть.
• Обновить при перезагрузке — Когда установлен флажок, вы получите последнюю версию сервисного работника, установите его и немедленно активируйте
• Bypass for network — Когда проверенные запросы обходят работника сервиса и отправляются непосредственно в сеть.

Начни с

В некоторых случаях вы можете загружать кэшированные данные или что-то не обновляется, как вы ожидаете. Чтобы очистить все сохраненные данные (localStorage, данные indexedDB, кэшированные файлы) и удалить всех сервисных работников, используйте панель «Очистить хранилище» на вкладке «Приложение». Кроме того, вы также можете работать в окне инкогнито.

• Как только сервисный работник был незарегистрирован, он может оставаться в списке, пока не будет закрыто содержащее его окно браузера.
• Если открыто несколько окон для вашего приложения, новый работник сервиса не вступит в силу, пока все окна не будут перезагружены и обновлены до последней версии работника сервиса.
• Отмена регистрации сервисного работника не очищает кеш!
• Если сервисный работник существует и новый сервисный работник зарегистрирован, новый сервисный работник не будет управлять, пока страница не будет перезагружена, если вы не take immediate control .

Проверьте изменения с Lighthouse

Запустите Lighthouse снова и проверьте изменения. Не забудьте снять флажок Оффлайн, прежде чем проверять изменения

SEO Аудит

• ✅ PASSED: B документе есть мета-описание.

Прогрессивный аудит веб-приложений

• ✅ PASSED: Текущая страница отвечает 200 в автономном режиме
• ✅ PASSED: start_url отвечает 200 в автономном режиме
• ✅ PASSED: Регистрирует сервисного работника, который контролирует страницу и start_url.
• ✅ PASSED: Манифест веб-приложения соответствует требованиям к установке.
• ✅ PASSED: Настроен для собственного заставки.
• ✅ PASSED: Устанавливает цвет темы адресной строки.

Обеспечить полный опыт работы в автономном режиме

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

Сервисный рабочий жизненный цикл

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

install событие

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

Обычно событие install используется для кэширования всего, что вам нужно для запуска приложения.

activate событие

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

fetch событие

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

Обновление сервисного работника

Браузер проверяет, есть ли новая версия вашего работника службы при каждой загрузке страницы. Если он находит новую версию, новая версия загружается и устанавливается в фоновом режиме, но не активируется. Он находится в состоянии ожидания, пока не откроются страницы, которые используют старый сервисный работник. Как только все окна, использующие старый сервисный работник, закрыты, новый сервисный работник активируется и может взять на себя управление. Обратитесь к разделу Updating the service worker документа по жизненному Updating the service worker сервисного работника для получения дополнительной информации.

Выбор правильной стратегии кэширования

Выбор правильных caching strategy зависит от типа ресурса, который вы пытаетесь кэшировать, и того, как он может понадобиться вам позже. Для нашего приложения погоды мы разделим ресурсы, которые нам необходимо кэшировать, на две категории: ресурсы, которые мы хотим предварительно кэшировать, и данные, которые мы будем кэшировать во время выполнения.

Кэширование статических ресурсов

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

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

Извлечение из локального кэша устраняет любую изменчивость сети. Независимо от того, в какой сети находится пользователь (WiFi, 5G, 3G или даже 2G), ключевые ресурсы, необходимые для работы, доступны практически сразу.

Caution: в этом примере статические ресурсы обслуживаются с использованием стратегии cache-first , в результате чего копия любого кэшированного содержимого возвращается без обращения к сети. Хотя стратегия cache-first проста в реализации, она может вызвать проблемы в будущем.

Кэширование данных приложения

stale-while-revalidate strategy идеально подходит для определенных типов данных и хорошо работает для нашего приложения. Он выводит данные на экран как можно быстрее, а затем обновляет их, как только сеть вернула последние данные. Stale-while-revalidate означает, что нам нужно запустить два асинхронных запроса, один в кэш и один в сеть.

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

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

Обновление логики приложения

Как упоминалось ранее, приложению необходимо запустить два асинхронных запроса: один — в кэш, а другой — в сеть. Приложение использует объект caches доступный в window для доступа к кешу и получения самых последних данных. Это отличный пример прогрессивного улучшения, поскольку объект caches может быть доступен не во всех браузерах, и если это не так, сетевой запрос все равно должен работать.

Обновите функцию getForecastFromCache() , чтобы проверить, caches объект caches в глобальном объекте window , и, если это так, запросить данные из кэша.

public/scripts/app.js

Затем нам нужно изменить updateData() чтобы он updateData() два вызова, один для getForecastFromNetwork() чтобы получить прогноз из сети, и один для getForecastFromCache() чтобы получить последний кэшированный прогноз:

public/scripts/app.js

Наше приложение погоды теперь делает два асинхронных запроса данных, один из кеша и один через fetch . Если в кеше есть данные, они будут возвращены и обработаны очень быстро (десятки миллисекунд). Затем, когда fetch , карта будет обновлена самыми свежими данными непосредственно из API погоды.

Обратите внимание, как запрос кеша и запрос fetch заканчиваются вызовом для обновления карты прогноза. Как приложение узнает, отображает ли оно последние данные? Это обрабатывается в следующем коде из renderForecast() :

public/scripts/app.js

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

Предварительно кешировать ресурсы нашего приложения

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

public/service-worker.js

Не забудьте также обновить CACHE_NAME ; мы также изменим все наши статические ресурсы.

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

Обновите массив FILES_TO_CACHE списком файлов:

public/service-worker.js

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

Обновление обработчика события активации

Для того, чтобы обеспечить наше activate событие не случайно удалить наши данные, в activate случае service-worker.js , заменить if (key !== CACHE_NAME) < с:

public / service-worker.js

Обновление обработчика событий выборки

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

Обновите fetch событий fetch для обработки запросов к API данных отдельно от других запросов.

public/service-worker.js

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

Нам нужно удалить проверку evt.request.mode !== ‘navigate’ потому что мы хотим, чтобы наш сервисный работник обрабатывал все запросы (включая изображения, скрипты, CSS-файлы и т. Д.), А не только навигацию. Если мы оставим эту регистрацию, только кеш будет обслуживаться из кэша рабочего сервиса, все остальное будет запрашиваться из сети.

Попробуйте это

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

Затем перейдите на панель Cache Storage на панели Application в DevTools. Разверните раздел, и вы увидите название вашего статического кеша и кеша данных, перечисленных слева. Открытие кеша данных должно показывать данные, хранящиеся для каждого города.

Затем откройте DevTools и переключитесь на панель Service Workers и установите флажок Offline, затем попробуйте перезагрузить страницу, а затем перейдите в автономный режим и перезагрузите страницу.

Если вы на быструю сеть и хотите увидеть , как прогноз погоды данные обновляются на медленном соединении, установите FORECAST_DELAY свойство в server.js в 5000 . Все запросы к API прогноза будут задерживаться на 5000 мс.

Проверьте изменения с Lighthouse

Это также хорошая идея, чтобы снова запустить Маяк.

SEO Аудит

• ✅ PASSED: B документе есть мета-описание.

Прогрессивный аудит веб-приложений

• ✅ PASSED: Текущая страница отвечает 200 в автономном режиме
• ✅ PASSED: start_url отвечает 200 в автономном режиме
• ✅ PASSED: Регистрирует сервисного работника, который контролирует страницу и start_url.
• ✅ PASSED: Манифест веб-приложения соответствует требованиям к установке.
• ✅ PASSED: Настроен для собственного заставки.
• ✅ PASSED: Устанавливает цвет темы адресной строки.

Добавить опыт установки

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

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

Аудит с Маяком

Чтобы пользователь мог установить ваше Progressive Web App, оно должно соответствовать certain criteria . Самый простой способ проверить это — использовать Lighthouse и убедиться, что он соответствует установленным критериям.

Если вы работали с этой кодовой меткой, ваш PWA уже должен соответствовать этим критериям.

Добавить install.js в index.html

Сначала добавим install.js в наш файл index.html .

public/index.html

Прослушать событие beforeinstallprompt

Если выполнено добавление на главный экран criteria , Chrome beforeinstallprompt событие beforeinstallprompt , которое можно использовать, чтобы указать, что ваше приложение можно «установить», а затем предложит пользователю установить его. Добавьте код ниже, чтобы прослушать событие beforeinstallprompt :

public/scripts/install.js

Сохранить событие и показать кнопку установки

В нашей функции saveBeforeInstallPromptEvent мы сохраним ссылку на событие beforeinstallprompt чтобы мы могли позже вызвать prompt() , и обновим наш пользовательский интерфейс, чтобы отобразить кнопку установки.

public/scripts/install.js

Показать подсказку / скрыть кнопку

Когда пользователь нажимает кнопку установки, нам нужно вызвать .prompt() для сохраненного события beforeinstallprompt . Нам также нужно скрыть кнопку установки, поскольку .prompt() можно .prompt() только один раз для каждого сохраненного события.

public/scripts/install.js

Вызов .prompt() покажет пользователю модальное диалоговое окно с просьбой добавить ваше приложение на домашний экран.

Зарегистрировать результаты

Вы можете проверить , чтобы увидеть , как пользователь ответил на диалог установки путем прослушивания обещания возвращенного userChoice свойство сохраненного beforeinstallprompt событий. Обещание возвращает объект со свойством outcome после того, как приглашение было показано, и пользователь ответил на него.

public/scripts/install.js

Один комментарий о userChoice , spec defines it as a property , а не функция, как вы могли ожидать.

Журнал всех событий установки

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

public/scripts/install.js

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

public/scripts/install.js

Обновить сервисный работник

Не забудьте обновить CACHE_NAME в файле service-worker.js так как вы внесли изменения в файлы, которые уже кэшированы. Включение флажка Bypass for network на панели Service Workers панели Application в DevTools будет работать в процессе разработки, но не поможет в реальном мире.

Попробуйте это

Давайте посмотрим, как прошел наш шаг установки. Чтобы быть в безопасности, используйте кнопку Clear site data на панели приложений DevTools, чтобы убрать все и убедиться, что мы начинаем все заново. Если вы ранее установили приложение, обязательно удалите его, иначе значок установки больше не появится.

Убедитесь, что кнопка установки видна

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

1. Откройте URL-адрес в новой вкладке Chrome.
2. Откройте трехточечное меню Chrome (рядом с адресной строкой). ▢ Убедитесь, что вы видите «Install Weather . » в меню.
3. Обновите данные о погоде, используя кнопку обновления в верхнем правом углу, чтобы убедиться, что мы встречаем user engagement heuristics . Ify Убедитесь, что значок установки отображается в заголовке приложения.

Убедитесь, что кнопка установки работает

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

1. Откройте Chrome и в новой вкладке браузера перейдите к своему Weather PWA.
2. Откройте DevTools и переключитесь на панель консоли.
3. Нажмите кнопку установки в правом верхнем углу. Ify Убедитесь, что кнопка установки исчезла. Ify Убедитесь, что отображается диалоговое окно установки.
4. Нажмите Отмена. ▢ Убедитесь, что «Пользователь отклонил запрос A2HS» отображается в выводе консоли. Ify Убедитесь, что кнопка установки появляется снова.
5. Снова нажмите кнопку установки, затем нажмите кнопку установки в модальном диалоговом окне. ▢ Убедитесь, что «Пользователь принял приглашение A2HS» отображается в выводе консоли. ▢ Убедитесь, что в выводе консоли отображается «Приложение погоды было установлено». ▢ Убедитесь, что приложение Погода добавлено в место, где вы обычно находите приложения.
6. Запустите Weather PWA. ▢ Убедитесь, что приложение открывается как отдельное приложение, либо в окне приложения на рабочем столе, либо в полноэкранном режиме на мобильном телефоне.

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

Убедитесь, что установка iOS работает правильно

Давайте также проверим поведение на iOS. Если у вас есть устройство iOS, вы можете использовать его, или если вы на Mac, попробуйте симулятор iOS, доступный с Xcode.

1. Откройте Safari и в новой вкладке браузера перейдите к Weather PWA.
2. Нажмите Поделиться! Кнопка 8ac92dd483c689d3.png .
3. Прокрутите вправо и нажмите кнопку Добавить на главный экран. ▢ Проверьте правильность заголовка, URL-адреса и значка.
4. Нажмите Добавить. ▢ Убедитесь, что значок приложения добавлен на главный экран.
5. апустите Weather PWA на главном экране. ▢ Убедитесь, что приложение запускает полный экран.

Bonus: обнаружение, запущено ли ваше приложение с домашнего экрана

Медиа-запрос display-mode позволяет применять стили в зависимости от того, как было запущено приложение, или определять, как оно запускалось с помощью JavaScript.

Вы также можете проверить display-mode медиа — запрос в JavaScript to see if you’re running in standalone .

Bonus: удаление вашего PWA

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

Android

На Android PWA удаляются так же, как и другие установленные приложения.

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

ChromeOS

В ChromeOS PWA легко удаляются из окна поиска программы запуска.

• Откройте лаунчер.
• Введите «* Погода *» в поле поиска, ваш Weather PWA должен появиться в результатах
• Щелкните правой кнопкой мыши (alt-click) на Weather PWA.
• Нажмите Удалить из Chrome .

macOS и Windows

На Mac и Windows PWA должны быть удалены через Chrome.

• В новой вкладке браузера откройте chrome: // apps.
• Щелкните правой кнопкой мыши (alt-click) на Weather PWA.
• Нажмите Удалить из Chrome .

Поздравляем

Поздравляем, вы успешно создали свое первое Progressive Web App!

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

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

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

Справочные документы

Нашли проблему или есть отзывы?

Помогите нам сделать наши лаборатории кода лучше, отправив issue сегодня. И спасибо!

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

PWA для сайтов,что это, как использовать и как установить

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

До появления технологии PWA для установки на сайт предлагалось мобильное приложение. Эксперты оценивали его создание от самых скромных 1000 долларов до 80 000 долларов. Цена зависела от того, какого уровня приложение вы хотели бы дать своему пользователю или скажем так: какое по цене приложение вы могли бы себе позволить.

В ТЕМУСТАТЬИ

UDP против TCP, или Будущее сетевого стека (highload обсуждение)

Обзор Elementor Pro: мощный визуальный конструктор для WordPress

PWA для сайта, что это такое?

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

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

Плюсы работы с PWA для сайта

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

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

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

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

Без ограничений appstore магазинов. Чтобы запустить мобильное приложение надо было сделать их два, под Android для Google market и для IOS под Apple. С этой технологией проблема просто забывается. Единственно, что Safari от Apple пока не объявил о своих планах по поддержке PWA, тем не менее все основные игроки на рынке мобильных браузеров: Хром, Опера, Мозилла уже внедрили поддержку.

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

Конкуренция. Сейчас в магазинах приложений звучат цифры от 2.5 млн до 3 млн приложений. Представьте какая конкуренция для сайта. Здесь ваша аудитория, попав на сайт уже имеет возможность установить сайт на смартфон или планшет.

Никаких лишних шагов. Чтобы поставить приложение надо делать лишние шаги для пользователя. В ситуации с использованием PWA никаких шагов. Всплыло уведомление, если пользователь нажал да, в незаметном режиме все установилось и загрузилось из кэша браузера. Специалисты отмечали, что на каждом шаге для установки приложения, сайт мог терять до 20% пользователей. Здесь потерь нет. Так как нет и собственно никаких шагов.

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

Как установить и использовать PWA на сайте

Для использования PWA не требуется каких-либо особых усилий. Для многих cms особенно популярных уже есть готовые решения, там, где их нет, скоро они также будут. Я расскажу, как установить и настроить на примере сайта с cms WordPress. Заходите в плагины, установить новый, в репозитарии ищете плагин Super Progressive Web Apps, устанавливаете этот плагин и получаете окно настроек.

Желательно перед началом установки заказать или нарисовать красивую иконку для своего сайта на мобильных устройствах. Я вот поспешил и иконка получилось некрасивой. Итак, вы готовы, графическая иконка создана. Понадобится два размера: 192 х 192 пикселя и 512х512 пикселей.

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

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

Настраиваем цвета фона, плюс указываем страницы, с которых должен открываться сайт при переходе с приложения. Указываем ориентацию приложения, я ставил универсальную. Дальше плагин сам сформирует манифест, service worker и собственно сохранить настройки останется.

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

Что такое Progressive Web Apps и какие возможности они открывают для вашего бизнеса

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

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

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

Отличия PWA от нативных приложений

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

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

3. Не нужно API с поддержкой обратной совместимости. В случае с PWA пользователи запускают ту же версию кода сайта (в отличие от классических приложений).

Анимированный пример баннера с предложением установить PWA на домашний экран от Google Developers.

И это только начало. Microsoft уже занимается решением задачи, как добавить прогрессивные веб-приложения в Windows Store. Google в мае 2020 озвучил длинный список идей для развития прогрессивных приложений. И то, что поисковые системы будут уделять особое внимание 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. И при всем этом его не надо загружать многократно на каждое из устройств.

После внедрения прогрессивного веб-приложения AliExpress увеличил конверсии c iOS-устройств на 82%. При том, что iOS пока не поддерживает PWA.

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

1. AliExpress увеличил коэффициент конверсии для новых пользователей на 104%.
2. United eXtra Electronics показал 4-кратное увеличение возвратов посетителей и на 100% повысил уровень продаж от пользователей, которые приходят в результате взаимодействия со всплывающими уведомлениями.
3. 5miles снизил показатель отказов на 50% и увеличил конверсии на 30%.
4. Konga используют на 92% меньше данных для первоначальной загрузки по сравнению с загрузкой их родного приложения.

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

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

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

1. Посмотрите и «пощупайте» Progressive Web Apps.
2. Разберитесь в работе PWA и сделайте свое первое приложение с курсом от Udacity.
3. Разберитесь в прогрессивных веб-приложениях вместе с представителем Google Андреем Липатцевым. Он рассказал об этой технологии на WebPromoExperts SEO Day.

Вам также может быть интересно

Обучение программированию

Эффект линзы (watcom c)

Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита,

Обучение программированию

Язык xml xml в microsoft internet explorer 5 0

Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language,

Обучение программированию

Языки программирования

Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя

Обучение программированию

Эффект пламени

По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый

Обучение программированию

Язык xml введение

Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть

Обучение программированию

Якоря HTML

Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело

Обучение программированию

Эффект разбитого текста

Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося

Обучение программированию

Язык xml использование java xml обработчиков

Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX,

Обучение программированию

Яндекс — крупнейшая поисковая система русскоязычного Интернета!

Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта,

Обучение программированию

Эффект скручивания

Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг

Обучение программированию

Язык xml описание технологии

Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML

Обучение программированию

Ячейка заголовка

17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти

Обучение программированию

Эффективное использование gnu make

Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание

Обучение программированию

Язык xml практическое введение

Описание данных с помощью XML Если вы программируете на Java, за последние пару лет

Обучение программированию

Эффективный копирайтинг, как писать копирайтинг

Как написать эффективный продающий текст. Часть первая. Подготовка Грамотно написанный продающий текст позволяет превращать

Обучение программированию

Язык xml просмотр xml документов

Чем открыть XML Web — это место, где миллионы людей ежедневно связываются друг с

Обучение программированию

Эффективный способ применения интерфейсов в mdi приложениях

Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать

Обучение программированию

Язык xml стилевые таблицы xsl

Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в

Обучение программированию

Эффекты с изображениями

Как сделать — визуальные эффекты изображениям Узнайте, как добавить визуальные эффекты к изображениям. Фильтры

Обучение программированию

Язык xml схемы данных

Понимание XML Узнайте, как Расширяемый язык разметки (Extensible Markup Language — XML) облегчает универсальный

Обучение программированию

Юмор пиво для программиста

ХАЙФХАК: ПРОГРАММИСТ ВЗЛОМАЛ СИСТЕМУ, ЧТОБЫ ПОПИТЬ ПИВО БЕСПЛАТНО / пиво :: geek новости ::

Обучение программированию

Язык обработки данных awk

Примеры команды AWK в Linux Введение AWK назван в честь фамилии его авторов: Альфред

Обучение программированию

Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными

Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными? Элемент управления ImageList содержит

Обучение программированию

Язык преобразований xsl (xslt)

Введение в XSLT XSLT представляет собой способ для XML-документов в другие XML или документы