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

https://medium.com/samsung-internet-dev/a-beginners-guide-to-making-progressive-web-apps-beb56224948e
  • Перевод
  • Tutorial
Светлана Шаповалова, редактор блога «Нетологии», адаптировала статью пользователя uve, в которой рассказывается, как сделать Progressive Web Apps.

Уверен, вы слышали о Progressive Web Apps, или сокращенно PWA. Не буду вдаваться в подробности о том, что это и как работает. Для наших целей подойдет простое определение PWA — сайт, который можно добавить на главный экран телефона, и он будет работать в автономном режиме.



Мне знакомы HTML, CSS, JavaScript и я умею пользоваться GitHub. Однако я все еще новичок в веб-разработке и мне не всегда охота глубоко вникать в принципы работы того или иного явления. Чаще всего мне просто нужен понятный способ сделать нужную вещь, не просматривая при этом тонны статей. Поэтому я надеюсь, что этот пост даст вам все необходимое для создания собственного PWA.

Итак, чтобы сделать 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 можно в три этапа.

— Зарегистрировать service worker, добавив этот код в вашего 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>

— Добавить sw-toolbox в свой проект — просто закинуть этот файл в корневую папку.

— Создать новый файл, назвать «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



Код
Готовый сайт

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

В статье я рассказал далеко не все о PWA: можно, например, отправлять push-уведомления, когда выходит новый контент. Узнать больше о PWA можно здесь.
  • +3
  • 31,5k
  • 3
Нетология
133,00
Университет интернет-профессий
Поделиться публикацией

Похожие публикации

Комментарии 3

    0

    Это не «пользователь uve», это Уве Тульсиани (Uve Tulsiani) из команды Samsung Internet.

      0

      Как-то туториалы на этой неделе больше смахивают на парочку советов, достойных максимум твиттера. В данном случае всю статью можно свести к твитту "Э, народ, зацените тулы для PWA bit.ly/link1 bit.ly/link2"

        +1
        Подскажите зачем в манифесте экранируются слэши (причём только первый) в параметрах src и type. И как будет производится поиск иконки? От текущего положения файла manifest или от корня? Например если сайт лежит не в корне а скажем в /public/site-template/.

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое