Светлана Шаповалова, редактор блога Нетологии, адаптировала статью пользователя uve, в которой рассказывается, как сделать 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:

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/

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

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.