как сделать pwa приложение

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

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

Прописать манифест

Следующее, что нужно сделать, это создать манифест. Манифест — это файл, содержащий данные о сайте: имя, цветовая тема, информация об иконках. У нас уже есть манифест, созданный генератором иконок, но мы его расширим.

Зайдите в генератор манифестов и заполните информацию о сайте. Если в чем-то не уверены, оставьте значение по умолчанию.

В правой части страницы есть данные 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:

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

3. Создать новый файл, назвать «sw.js» и вставить в него это:

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

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

Источник

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

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

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

— Создать новый файл, назвать «sw.js» и вставить в него это:

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

Источник

Превращаем веб-сайт в PWA

Согласно этой статье из CNBC, к 2025 году почти три четверти населения мира будут использовать для доступа к интернету только смартфоны. Поэтому, если вы планируете создать новый веб-сайт или редизайнить старый, вам следует задуматься о создании PWA.

PWA — идеальное начало для любого проекта, не требующее большого количества усилий, а созданное приложение работает на всех платформах!

Что такое PWA?

Прогрессивное веб-приложение (PWA) — это гибрид обычной веб-страницы и мобильного приложения. Оно сочетает в себе функции большинства современных браузеров с преимуществами мобильных приложений и создается с использованием стандартных веб-технологий, включая HTML, CSS и JavaScript. Функциональные возможности включают работу в автономном режиме, push-уведомления и доступ к аппаратуре, что создает аналогичный нативным приложениям опыт работы для пользователя.

Зачем создавать PWA?

На сайте pwastats.com представлена статистика самых известных компаний, использующих PWA, которые улучшили производительность своих веб-сайтов более чем на 100%.

Прогрессивное веб-приложение сокращает время загрузки, предоставляет пользователям возможность перехода в автономный режим, увеличивает проведенное на веб-сайте время, повышает доход, а также занимает намного меньше места, чем мобильное приложение.

Кто уже использует PWA?

Как видим, некоторые из крупнейших в мире компаний, такие как Twitter, Instagram, Uber, Pinterest, Forbes, Alibaba и другие, уже используют PWA.

Как создать PWA

Чтобы создать прогрессивное веб-приложение, для начала нужно разработать веб-сайт с отзывчивым дизайном. После выполнения первого пункта понадобятся только manifest.json и сервис-воркер.

Манифест веб-приложения

Манифест веб-приложения — это простой файл JSON, который сообщает браузеру о веб-приложении и о том, как оно должно вести себя при добавлении на мобильное устройство или компьютер пользователя.

Сервис-воркер

Это файл JavaScript, который запускается отдельно от основного потока браузера. С его помощью можно:

Жизненный цикл сервис-воркера

Создание PWA шаг за шагом за 5 минут

Пришло время реализовать прогрессивное веб-приложение!

Прежде чем начать, установим расширение Lighthouse — инструмент (от Google) для улучшения качества веб-страниц, который выдает следующий отчет:

С его помощью можно проверить, какие проблемы нужно решить для повышения производительности, доступности, лучших практик, SEO и PWA веб-сайта или веб-приложения.

Установить расширение для Chrome можно здесь.

Структура файла в нашем примере выглядит так:

Полный код на Github можно найти здесь. Вы также можете переключать ветки для отображения динамического или статического кэша.

В index.html вызываем manifest.json :

Это основные теги, но, конечно, их будет еще больше, а также у них могут быть разные пути!

Статический кэш

Начнем с реализации статического кэша: укажем вручную, какие ресурсы помещать в кэш, например, все изображения, файлы CSS и js.

Этот метод полезный, особенно если вам нужно загрузить все ресурсы веб-сайта и кэшировать их при первом переходе на страницу.

Начнем с manifest.json

Теперь запишем воркер в файл sw.js :

В массиве хранятся все ресурсы, которые нужно поместить в кэш.

Событие Install

Добавляем в кэш все статические ассеты, которые отображаются в консоли Chrome:

Событие Activate

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

Событие Fetch

Здесь мы проверяем наличие кэша. Если он уже есть, то мы больше не загружаем ресурсы, а извлекаем их из кэша, который снова отображается в консоли.

Примечание: при изменении файла воркера нужно изменить имя кэша. Благодаря этому воркер обновляется и создается новый кэш.

Динамический кэш

Динамический кэш автоматически кэширует все fetch-запросы во время навигации. Этот кэш следует применять осторожно, потому что, если использовать его во время вызова API, то изменения новых данных не будут отображены.

В предыдущей конфигурации необходимо изменить файл sw.js следующим образом:

Событие Active

Здесь мы выполняем те же действия, что и для статического кэша.

Событие Fetch

В событии fetch мы автоматически помещаем в кэш все fetch-запросы.

Если вы попробуете оба вида кэша, а затем запустите Lighthouse, то увидите, что сайт является PWA.

Здесь можно найти код статических и динамических кэшей.

Статический или динамический: какой следует использовать?

Все зависит от потребностей и особенностей проектов. Я использую динамический кэш при отсутствии вызовов API, а при их наличии предпочитаю самостоятельно выбирать, какие ресурсы хранить с помощью статического кэша.

Более подробно о PWA можно узнать здесь.

Источник

Основы прогрессивных веб-приложений

Видели когда-нибудь кнопку «Добавить на главный экран», которая появлялась на экране вашего Android-смартфона, когда вы просматривали какой-нибудь сайт? Если щёлкнуть по этой кнопке, то на телефон, в фоновом режиме, будет установлено некое приложение, значок для запуска которого попадёт на главный экран. Теперь это приложение можно запустить и работать с сайтом почти так же, как и раньше, но только в обычном телефонном интерфейсе.

То, о чём мы говорим, представляет собой мобильное приложение, которое было загружено из веб-приложения. Причём, как можно заметить, для установки такого приложения вам не приходится взаимодействовать с Play Market. В результате, установка таких приложений упрощается настолько, насколько это вообще возможно. Однако это — далеко не самое интересное. Запуская подобные программы, вы получаете возможность работать с теми данными, которые они выводят, даже без подключения к интернету. Они позволяют взаимодействовать с веб-страницами в оффлайне. Ну не замечательно ли это?

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

Вероятно, вы уже поняли, что мы только что говорили о так называемых прогрессивных веб-приложениях (Progressive Web App, PWA). Такое приложение можно установить прямо из окна браузера, значок для его запуска будет выглядеть как значок обычного мобильного приложения, и оно, как многие мобильные приложения, позволит вам работать с ним без подключения к интернету.

Кнопка «Добавить на главный экран»

Поговорим теперь о том, что такое «прогрессивность» в применении к веб-приложениям. Предлагаю познакомиться с ними поближе, выяснить, чем они отличаются от обычных веб-приложений, и, кроме того, хочу рассказать вам о том, почему я полагаю, что PWA лучше традиционных мобильных приложений.

Что такое прогрессивное веб-приложение?

Термин «Progressive Web App» придумали Алекс Рассел и Франсес Берриман. По словам Алекса, прогрессивные веб-приложения — это всего лишь веб-сайты, которые принимали правильные витамины. То, что лежит в основе PWA, нельзя назвать новым фреймворком или новой технологией. Это, фактически, набор передовых методов разработки, которые позволяют сделать так, чтобы поведение веб-приложения оказалось бы очень похожим на поведение классических настольных или мобильных приложений.

Значок PWA на главном экране

PWA дают пользователю новые удобные возможности посредством прогрессивных улучшений приложений. В целом, это означает, что PWA, на мобильных устройствах разных поколений, будут работать примерно одинаково. Конечно, некоторые возможности обычных телефонных приложений могут быть им недоступны, но такие приложения обычно работают на разных устройствах так, как они и должны на них работать.

Зачем нужны прогрессивные веб-приложения?

Прежде чем разобраться с тем, зачем вообще нужны PWA, поговорим о том, с какими проблемами мы сталкиваемся, проектируя веб-приложения и обычные мобильные приложения.

Есть множество причин использовать PWA, здесь хотелось бы выделить основные возможности, которые они дают. Если описать эти возможности одним словом, то тут подойдёт аббревиатура FIRE (Fast, Integrated, Reliable, Engaging), то есть, прогрессивное веб-приложение должно быть быстрым, интегрированным в рабочую среду устройства, надёжным, и иметь средства вовлечения пользователей в работу с ним.

Как создать прогрессивное веб-приложение?

Компания Google опубликовала контрольный список по разработке прогрессивных веб-приложений. Рассмотрим минимальные требования к приложению, соответствие которым позволяет называть его PWA.

▍1. Манифест приложения

Манифест PWA — это файл manifest.json примерно такого содержания:

Перед нами — обычный JSON-файл, который содержит мета-информацию о веб-приложении. Здесь есть данные о значках приложения (один из них пользователь видит на главном экране после установки приложения), о фоновом цвете приложения, о его полном и сокращённом названии, и так далее. Этот манифест можно написать самостоятельно, а можно использовать специальный инструмент, автоматизирующий создание таких файлов.

Сайт, облегчающий создание файла manifest.json

▍2. Сервис-воркеры

Сервис-воркеры — это воркеры, управляемые событиями, которые выполняются в фоне приложения и действуют в роли посредников между приложением и сетевыми ресурсами. Они могут перехватывать сетевые запросы и кэшировать информацию для приложения. Их можно использовать для загрузки данных, которые планируется использовать для обеспечения работы приложения в оффлайновом режиме. Сервис-воркеры представляют собой JavaScript-программы, которые перехватывают обработку определённых событий и выполняют некие задачи.

▍3. Значки

▍4. Безопасность

Для того чтобы некое приложение можно было бы называть PWA, оно, кроме прочего, должно поддерживать обмен данными по защищённому каналу связи с использованием HTTPS. SSL-сертификат для организации такого соединения несложно получить, воспользовавшись возможностями сервисов вроде Cloudflare и LetsEncrypt. Защита приложений — это не только то, что в наши дни прямо-таки обязательно, это ещё и способ продемонстрировать пользователю надёжность приложения и выстроить с ним доверительные отношения.

Итоги

В этом материале мы поговорили о прогрессивных веб-приложениях, рассказали о том, зачем они нужны, какие проблемы они решают, какие требования к ним предъявляются. Так же здесь мы затронули тему их разработки, в частности, поговорили о манифесте PWA, о сервис-воркерах, о значках приложений, и о том, что их нужно защищать, используя HTTPS. Технологию PWA нередко воспринимают как нечто, относящееся исключительно к Android-смартфонам, и до недавнего времени такая точка зрения вполне имела право на жизнь. Однако, учитывая события, произошедшие в этом году, можно говорить о том, что PWA ждёт очень интересное будущее на множестве платформ. Тема PWA, на самом деле, всем этим далеко не исчерпывается. Поэтому, вполне возможно, мы к ней ещё вернёмся.

Уважаемые читатели! Как вы относитесь к прогрессивным веб-приложениям?

Источник