Свeтлaнa Шaпoвaлoвa, рeдaктoр блoгa Нeтoлoгии, aдaптирoвaлa стaтью пoльзoвaтeля uve, в кoтoрoй рассказывается, как сделать Progressive Web Apps.
Уверен, вы слышали о Progressive Web Apps, или сокращенно PWA. Не буду вдаваться в подробности о том, что это и как работает. Для наших целей подойдет простое определение PWA — сайт, который можно добавить на главный экран телефона, и он будет работать в автономном режиме.
Мне знакомы HTML, CSS, JavaScript и я умею пользоваться GitHub. Однако я все еще новичок в веб-разработке и мне не всегда охота глубоко вникать в принципы работы того или иного явления. Чаще всего мне просто нужен понятный способ сделать нужную вещь, не просматривая при этом тонны статей. Поэтому я надеюсь, что этот пост даст вам все необходимое для создания собственного PWA.
Программа обучения: «Курс JavaScript в браузере: создаем интерактивные веб-страницы»
Итак, чтобы сделать PWA, нужен сайт. Здесь предполагается, что вы умеете делать хорошо масштабируемые на всех экранах и устройствах сайты. К счастью, если не умеете, можно взять шаблон. Мне нравятся те, что на HTML5 UP и Start Bootstrap. Выберите и загрузите тему, заменив весь контент своим собственным в index.html. Можно даже изменить цвета, если хватит смелости влезть в CSS.
Для своего проекта я сделал лендинг Web Community Leads UK and IE. Большинству пользователей он не нужен в формате PWA, и я не ожидаю, что кто-то добавит его себе. Просто мне для примера нужен был какой-то небольшой и несложный сайт.
Мне понравился Hacksmiths, и так как он был open source, я его загрузил и распотрошил. Также сохранил ссылку на него и на код, чтобы можно было разветвить.
Теперь, когда есть сайт, можно превращать его в PWA. Что для этого нужно, расскажу далее.
Протестировать PWA
Чтобы проверить, работает ли сайт как PWA, можно взять Lighthouse. Lighthouse — это расширение для Chrome, которое покажет, насколько PWA годен и можно ли его улучшить.
После установки откройте сайт и нажмите значок маяка в верхнем правом углу браузера, а затем «Generate Report». Через несколько секунд откроется новая вкладка с информацией о сайте: её можно прочесть целиком, а можно сосредоточиться на числах сверху и проигнорировать остальное:
Результаты Lighthouse 36/100 еще до начала работы — это не так уж плохо, учитывая, что я еще ничего не сделал с сайтом
Сделать иконку приложения
Сайт будет располагаться на экране, а значит, нужна иконка. Не надо быть дизайнером, чтобы сделать хороший логотип. Для большинства небольших проектов я иду на the noun project и подыскиваю парочку значков, которые мне нравятся. Затем совмещаю их с помощью GIMP и добавляю фон. Вы, конечно, можете использовать любой другой способ, главное, убедитесь, что иконка вышла квадратная.
Моя иконка. Задним умом понимаю, что надо было скруглить углы
Теперь у вас есть значок приложения. Самое время прикрепить его к сайту. Я сделал это с помощью онлайн-генератора иконок. Скормите ему значок, и он выплюнет кучу разноразмерных версий, приправленных HTML-кодом. Далее:
из файла index.html
- скачайте файл, который вам предложит генератор, и разархивируйте его.
- поместите иконки в папку с остальной частью вашего сайта.
- добавьте код, выданный генератором, в
- убедитесь, что путь к значкам работает. Я поместил их все в подпапку, поэтому пришлось дописать «icons/» в каждую строку.
Прописать манифест
Следующее, что нужно сделать, это создать манифест. Манифест — это файл, содержащий данные о сайте: имя, цветовая тема, информация об иконках. У нас уже есть манифест, созданный генератором иконок, но мы его расширим.
Зайдите в генератор манифестов и заполните информацию о сайте. Если в чем-то не уверены, оставьте значение по умолчанию.
В правой части страницы есть данные JSON. Скопируйте и вставьте их поверх вашего файла manifest.json, убедившись, что форматирование не сломалось: возможно, где-то понадобится добавить запятую или удалить скобку. Мой манифест в конечном счете выглядит так. Запустите Lighthouse снова и посмотрите, работает ли манифест.
Данные Lighthouse после добавления манифеста и иконок
Добавить service worker
Service worker — это еще один файл, который мы добавляем в наш проект, он позволит сайту работать в автономном режиме. Наличие service worker — это также требование PWA, поэтому он определенно необходим.
Service worker — довольно сложная штука. К счастью, мне порекомендовали попробовать sw-toolbox и дали ссылку на код. Я скопировал код и слегка упростил его, удалив один из дополнительных файлов JavaScript, вместо этого прописав все в service worker.
Создать service worker можно в три этапа.
1. Зарегистрировать service worker, добавив этот код в head вашего index.html:
script
if (serviceWorker in navigator) {
window.addEventListener (load, function () {
navigator.serviceWorker.register (/sw.js).then (
function (registration) {
// Registration was successful
console.log (ServiceWorker registration successful with scope: , registration.scope); },
function (err) {
// registration failed:(
console.log (ServiceWorker registration failed: , err);
});
});
}
/script
2. Добавить sw-toolbox в свой проект — просто закинуть этот файл в корневую папку.
3. Создать новый файл, назвать «sw.js» и вставить в него это:
use strict;
importScripts (sw-toolbox.js);
toolbox.precache ([index.html, style/style.css]);
toolbox.router.get (/images/*, toolbox.cacheFirst);
toolbox.router.get (/*, toolbox.networkFirst, {
networkTimeoutSeconds: 5});
Проверьте, чтобы все пути к файлам выглядел правильно, отредактируйте исходную документацию и перечислите все файлы, которые хотите сохранить в автономном режиме. Я использую для своего сайта только index.html и style.css, но у вас могут быть и другие.
Теперь снова протестируем сайт с помощью Lighthouse:
После добавления service worker — протестировано на localhost
Если вы хотите, чтобы service worker делал что-то еще, кроме простого сохранения определенных страниц, например, показывал конкретную автономную страницу, когда нет доступа в интернет, попробуйте pwabuilder, у него есть несколько различных скриптов service worker, которые можно использовать.
Размещение на GitHub
Теперь у вас есть PWA, пришло время поделиться им с миром. Я нашел самый простой способ сделать это бесплатно и безопасно — через GitHub Pages. GitHub GUI поможет вам разместить свой код в Github, создать репозиторий и поместить в него код. После этого найдите свой репозиторий на сайте, перейдите в настройки, прокрутите вниз и включите GitHub Pages, выбрав ветку master. Должен предоставиться живой URL-адрес вашего PWA.
Теперь результаты Lighthouse лучше, и можно поделиться своим сайтом с друзьями или загрузить его на экран телефона:
Результаты Lighthouse после размещения сайта на страницах GitHub Pages
Код: https://github.com/webcommunityukie/webcommunityukie.github.io
Готовый сайт: https://webcommunityukie.github.io/
Читать еще: «Пишем простого чат-бота для Telegram на PHP»
Сайт выглядит точно так же, как вначале, но при просмотре через Samsung Internet адресная строка изменилась на светло-фиолетовый цвет темы. Появился значок «плюс», который позволяет добавлять сайт на главный экран, открывать его на весь экран и использовать в автономном режиме.
Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.
