Как сделать Progressive Web Apps: руководство новичка26.07.2017 13:36

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

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 адресная строка изменилась на светло-фиолетовый цвет темы. Появился значок «плюс», который позволяет добавлять сайт на главный экран, открывать его на весь экран и использовать в автономном режиме.

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

Полный текст статьи читайте на Нетология