Что такое прогрессивные веб-приложения (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 в качестве нашего первого прогрессивного веб-приложения. Ключевыми компонентами будут:
|