Технология 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. Для этого нужно создать папку с любым удобным названием в корне сайта. Корень сайта, это где находятся папки:

• wp-admin
• wp-content
• wp-include

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

• icons
• wp-admin
• wp-content
• wp-include

В эту папку залейте все иконки, которые вы сделали. Теперь часть иконок, которые для айфонов, нужно подключить с помощью тега <link. Для этого, нужно открыть файл header.php и перед функцией <?php wp_head(); ?> вставляем подключение. Выглядеть это будет следующим образом:

<link rel="icon" href="https://wpmaster.kz/wp-content/uploads/2018/12/favicon.ico" type="image/x-icon"/>

<link rel="apple-touch-icon" sizes="57x57" href="https://wpmaster.kz/icons/apple-icon-57x57.png">

<link rel="apple-touch-icon" sizes="60x60" href="https://wpmaster.kz/icons/apple-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="https://wpmaster.kz/icons/apple-icon-72x72.png">

<link rel="apple-touch-icon" sizes="76x76" href="https://wpmaster.kz/icons/apple-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="https://wpmaster.kz/icons/apple-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="https://wpmaster.kz/icons/apple-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="https://wpmaster.kz/icons/apple-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="https://wpmaster.kz/icons/apple-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="https://wpmaster.kz/icons/apple-icon-180x180.png">

Шаг №3.

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

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

<link rel="manifest" href="https://wpmaster.kz/manifest.json">

<meta name="msapplication-TileColor" content="#ffffff">

<meta name="msapplication-TileImage" content="https://wpmaster.kz/icons/android-icon-144x144.png">

<meta name="theme-color" content="#ffffff">

Шаг №4.

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

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

<script src="https://wpmaster.kz/manUp.js"></script>

Шаг №5.

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

<script>

if (navigator.serviceWorker.controller) {

console.log('[PWA Builder] active service worker found, no need to register')

} else {

navigator.serviceWorker.register('pwabuilder-sw.js', {

scope: './'

}).then(function(reg) {

console.log('Service worker has been registered for scope:'+ reg.scope);

});

}

</script>

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

Если всё сделано правильно, вы увидите на рабочем столе иконку вашего сайта. Она будет выглядеть так же как обычное приложение, например 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.

Источник: https://wpmaster.kz/tehnologija-pwa/