как сделать веб приложение для сайта

Что нужно знать для разработки веб-приложения с нуля

Дата публикации: 2021-06-08

От автора: в данной статье речь пойдет о разработке веб-приложений с нуля. О том, что лучше использовать для разработки back-end, а что — для front-end части приложений.

Разработка любого веб-приложения состоит из создания его front-end и back-end частей.

Front-end

Front-end — это то, что пользователь видит на сайте, его визуальная составляющая. Сюда входят HTML, CSS и, по большей части, JavaScript.

В современной разработке наиболее популярными frontend-фреймворками являются Angular, Vue и React. У каждого есть свои плюсы и минусы. Но все они представляют собой JavaScript-фреймворки, поскольку JavaScript — бесспорный лидер в этой области.

Если вы новичок в разработке front-end, количество доступных фреймворков может показаться вам огромным. Мы не будем углубляться в рассмотрение каких-либо других фреймворков, так как это выходит за рамки этой статьи — но скажем, что выбор Angular сделает вашу жизнь намного проще.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Удобный Angular CLI

Angular CLI является одной из тех вещей, которые делают путь обучения таким коротким. Он может быть сокращен еще больше с помощью сторонних приложений, таких как Angular Console (независимо от того, новичок вы в Angular или нет, вам понравится это приложение, но оно не обязательно), который дает вам визуальный инструмент для CLI.

Одно из главных преимуществ CLI: он позаботится обо всем, что вам нужно сделать, от создания нового проекта Angular — до разворачивания служб, компонентов и пр.

Многим людям нравится, что для каждого нового компонента, сервиса, пайпа и т. д., CLI создает соответствующий тест. Он также дает вам стандартизированный способ запуска всех тестов. Это дает дополнительную гибкость — вы знаете, что в каждом новом файле есть тест, и можете обновлять тесты на любом этапе разработки.

Стандарты Angular

У CLI есть еще одно дополнительное преимущество — он очень конкретный. Для некоторых людей это проблема, но на самом деле это должно помогать вам.

Когда вы используете Angular CLI, он автоматически устанавливает собственный набор стандартов для проекта — по сути, делая правильные шаги для Angular. Это поможет избежать множества ошибок, особенно когда вы подключаете проект.

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

TypeScript

Даже если вы никогда в жизни не написали ни строки кода и хотите начать, TypeScript — довольно хороший первый язык. Он познакомит вас со многими принципами ООП, которые можно напрямую перенести на другие языки, чего в случае с JavaScript у вас не получится.

Библиотеки компонентов

На самом деле, все фреймворки имеют множество библиотек компонентов, однако, команда Angular создала Angular Material. Если вы не знакомы с ним, расскажем немного из истории.

В 2014 году хорошие люди из Google создали язык дизайна под названием Material Design. Если вы когда-либо использовали Gmail, то знакомы с этим типом дизайна. Он сразу приобрел большую популярность.

Angular Material — это уникальная реализация Google Material Design для Angular, которая просто великолепна. Он инкапсулирует и стандартизирует большинство компонентов, которые необходимы для создания любого сайта или приложения. Если вы не найдете в ней нужный компонент — то можете легко создать его.

Если говорить о примерах сайтов, использующих Angular, то можно привести такие популярные во всем мире ресурсы: Netflix, PayPal, Lego, The Guardian.

Backend-разработка

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

В backend-разработке вы можете выбирать из большого количества языков, которые подходят под разные задачи. Эту часть вы можете писать, к примеру, на PHP, Java, Node.js, Python, Ruby и т. д. И если для нее выбирается язык PHP, то фреймворк Laravel будет отличным выбором.

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

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

Подробное рассмотрение Laravel выходит за рамки данной статьи, а тут мы рассмотрим преимущества фреймворка и обсудим, почему это будет лучший выбор.

Основные преимущества Laravel:

большая экосистема с мгновенным разворачиванием своей платформы;

официальный сайт предоставляет множество мануалов и информации для ознакомления;

документация Laravel близка к совершенству;

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

есть свой движок для шаблонов Blade;

«красивый» синтаксис языка, который способствует выполнению необходимых задач (например, аутентификации, сессии, кэширования и маршрутизации RESTful);

собственная ORM — Eloquent ORM, предлагающая простые и удобные средства для работы с БД;

великолепная система маршрутизации запросов.

Отдельно стоит сказать и о преимуществах встроенных механизмов.

Во-первых, Laravel имеет понятный механизм обработки исключений.

Во-вторых, интегрированные механизмы авторизации и аутентификации можно перенастраивать под конкретные требования.

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

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

Наконец, этот фреймворк предоставляет свободный доступ к сервисам биллинга по подпискам Braintree и Stripe.

Популярность

Чтобы оценить популярность фреймворка, предлагаем обратиться к нескольким источникам статистики.

Популярность по статистике запросов, которую предоставляет Google Trends:

Как видно из графика популярности Google Trends, фреймворк Laravel занимает уверенное первое место и постоянно набирает популярность, не сбавляя обороты. Что, в общем, очень хорошо — учитывая, что это общемировая статистика.

Если мы возьмем статистику запросов в Google Trends по России, то картинка сильно не изменится:

Как видно из графика, в 2016 году Laravel перехватил лидерство у фреймворка Yii2 и не только продолжает до сих пор удерживать его, но и набирает популярность.

Это значит, что большинство новых проектов в стране теперь создаются с использованием активно развивающегося Laravel. Учитывая тренды и выбрав Laravel в качестве фреймворка для разработки back-end части вашего веб-приложения, вы поступите правильно!

Видео презентация курса «Laravel+Angular. Создание CRM-системы»

Источник

Создание универсального веб-приложения сайта Habrahabr.ru при помощи Web App Template

Хабровчане, привет!

В предыдущей статье мы с вами познакомились с шаблоном для создания универсальных веб-приложений – Web Application Template. Если кратко, то Web Application Template позволяет вам «превратить» сайт в приложение для Windows, Windows Phone или Android, добавив в него возможности интеграции с ОС и механизм распространения через магазин приложений.

Сегодня мы рассмотрим практический пример: как при помощи Web Application Template быстро и просто создать веб-приложение для Windows и Windows Phone на основе сайта habrahabr.ru.

Создание универсального веб-приложения для сайта Habrahabr.ru

Для начала создадим в Visual Studio новый WAT проект. Напомню, он находится по пути: File> New > Project > Templates > JavaScript > Web App Template for Universal Apps

Сразу перейдем к файлу config.json и поменяем start_url на адрес habrahabr.ru.

В качестве стартового проекта укажем проект Windows. Запускаем приложение и, вот, что мы видим на экране:

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

Для того, чтобы убрать лишние элементы со страницы, я прописала дополнительные css настройки стилей в файле injected-styles.css. Например, чтобы убрать панель «Рубрика» и «Популярное за сутки», не потребовалось ничего, кроме следующего кода:

Теперь приложение выглядит лучше, не правда ли?!

Но на этом модификация не закончена. Я хочу упростить навигацию по сайту при помощи панели навигации. Для того, чтобы ее добавить, в config.json вставьте следующий код:

Мы создали панель навигации с четырьмя кнопками, которые будут располагаться в один ряд.
Обратите внимание, что вы можете настроить navbar так, чтобы он отображался постоянно («makeSticky»: true). Теперь поменяем цвет добавленной панели, переопределив ее стиль в файле wrapper-styles.css:

Также, для удобства, вынесем ссылки на «пользовательское соглашение», «правила» и «помощь» на боковую панель, в раздел настроек. Добавим в config.json следующий блок кода:

Теперь на панели настроек появились прописанные выше ссылки:

Оффлайн режим приложения

Очень важно, чтобы у пользователя была возможность работать с приложением в случае, если интернет соединение отсутствует. Шаблон Web Application Template поддерживает работу с оффлайн режимом приложения.

Есть несколько вариантов обработки события перехода приложения в оффлайн режим:

Для включения поддержки оффлайн режима, присвойте свойству enabled значение true.

Для настройки страницы – заглушки, которую пользователь увидит на экране в случае потери соединения, используйте файл offline.html, расположенный по адресу template > offline.html. Если корневой адрес не определен, то укажите в message сообщение-заглушку, которое вы хотите вывести на экране в случае потери соединения.

Если вы хотите, чтобы работа с вашим приложением сохранялась и при отсутствии соединения, включите режим SuperCache (внутри настройки SuperCache присвойте свойству enabled значение true).

Укажите адреса тех страниц, которые вы хотите закэшировать заранее в настройке preCacheURLs, а в случае, если вы не хотите, чтобы кэш страницы создавался – пропишите необходимые адреса в ignoreURLs.

Web Application Template поддерживает работу с базами данных IndexedDB (свойство addIndexedDBSupport), а также встроенные (inline) изображения (свойство imagesGuardBand).

С основными необходимыми настройками для приложения Windows мы закончили, теперь перейдем к созданию приложения для Windows Phone.

Создаем приложение для Windows Phone

Теперь пришло время для Windows Phone версии приложения. Поскольку у ресурса Habrahabr.ru есть специальная мобильная версия сайта, то создать веб-приложение для мобильного будет еще проще, чем Windows версию. Скопируем папку config из shared-проекта отдельно в Windows и в Windows Phone проект. Откроем файл config.json в Windows Phone проекте, удалим все лишнее и изменим start_url на сайт мобильной версии хабра: m.habrahabr.ru.

Сразу после запуска, приложение выглядит неплохо, но, давайте, модифицируем его.

В Windows приложении мы вынесли основные ссылки на панель навигации и на панель настроек.

Для удобства, добавим панель приложения и поместим на нее некоторые ссылки, например, на профиль, хабы и правила сайта.
Обратите внимание, что, если вы делаете приложение для стороннего ресурса, вам необходимо дать ссылку на пользовательское соглашение (privacy policy).

Прежде чем добавить панель приложения, добавьте следующую настройку:

Далее добавляем блок wat_appBar и указываем необходимые кнопки.

Вот, что получилось:

Обратите внимание на ссылку “Сhange Config Host Address”, которая появляется при добавлении панели приложения в Windows Phone версию, а также является стандартной для панели настроек в Windows приложении. Вы можете менять config файл вашего приложения удаленно. О том, как это сделать, смотрите в MVA курсе «Создание универсальных веб-приложений при помощи Web App Template» или в статье Создание универсальных веб-приложений при помощи Web App Template.

Наше универсальное приложение почти готово, осталось поменять иконки в приложении.

Меняем иконки в приложении

Со стандартными иконками приложение выглядит очень неэстетичным. Давайте посмотрим, как поменять иконки (бейджи, тайлы, картинку стартового экрана).

Откройте файл package.appxmanifest (он свой для каждого Windows и Windows Phone проекта, необходимо добавлять изображения отдельно для каждого проекта). Перейдите во вкладку Visual Assets и прикрепите необходимые изображения. Например, если вы хотите поменять иконку, которая расположена слева в окне приложения, то меняем картинку Square 30×30 Logo, для изменения картинки toolbar’a – Square 150×150 Logo, а для картинки экрана загрузки меняем изображение Splash Screen.

Обратите внимание на возможность добавления живых плиток. Для того, чтобы добавить их, загрузите соответствующие картинки в манифест приложения (вкладка Visual Assets), затем перейдите во вкладку Application и в разделе Tile Update укажите частоту обновления плитки и ссылку на RSS поток, с которого будет подгружаться информация для обновления плитки.

Также в файл config.json необходимо добавить следующий код:

Теперь на плитке приложения будет отображаться информация о новых постах.

На этом основная работа с приложением закончена. Можно заполнять манифест и готовить приложение к публикации.

В заключение про будущее

В Windows 10 мы анонсировали идею «Web apps» как часть платформы. Подробности о том, как это работает можно посмотреть в руководстве для разработчиков (см. серию «Evolving the Web Platform, начиная с 16 минуты).

Манифест WAT, сделанный на базе стандарта Manifest for Web Apps (W3C) хранится на вашем сайте, в настройках приложения вы указываете политики доступа к WinRT API. Готовое приложение можно будет разместить в магазине приложений.

Вы можете начать создавать веб-приложения сегодня с помощью WAT, публикуя приложения для Windows 8.1, Windows Phone 8.1 или Android, и переключиться на модель Windows 10 Web Apps, как только новая ОС выйдет в релиз.

Источник

Как разработать веб-приложение за 8 шагов

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

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

Второе — есть по меньшей мере 6 путей к разработке веб-приложения, самым современным из которых является реализация фронтенда как single page application, где контакт с бэкендом реализуется через REST API. Данный путь к созданию веб-приложения достигается за 8 шагов.

1. Работа с бизнес-логикой бэкенда

Есть два способа такой работы: вы можете сгруппировать бизнес-логику бэкенда в одном сервисе (монолитная логика) или реализовать каждый ее компонент в отдельном микросервисе. Работая с небольшим проектом, используйте первый способ, а при работе с крупным проектом идеально подойдет второй.

2. Выбор языка программирования

Если вам менее важна производительность веб-приложения, пишите на Python (фреймворки Django, Flask), Node JS (фреймворки Express JS, Koa JS, Gatsby JS), Ruby (фреймворки Ruby on Rails, Grape). Если в приоритете скорость приложения — используйте Golang (фреймворки Gingonic, Beego, Revel). Еще вы можете использовать популярный язык программирования от Microsoft — C#, который произносится как «си шарп». Он разработан в качестве языка прикладного уровня для CLR. С# вобрал в себя многое от C++, Модула, Delphi, Smalltalk и Java, но разница состоит в том, что С# исключает модели, которые зарекомендовали себя как проблемные при разработке ПС. К примеру, C# в отличие от C++ не поддерживает множественное наследование классов, но допускает множественную реализацию интерфейсов. Главное, какой бы язык вы не выбрали, кодить на том, который вы хорошо знаете.

3. Реализация бизнес-логики

Сперва ориентируйтесь на паттерн MVC, а когда поймете, что бизнес-логика начинает усложняться, используйте presenter и interactor. Но помните, что presenter и interactor находится на разных уровнях и выполняют различные смысловые и функциональные нагрузки.

Presenter обрабатывают события от пользовательского интерфейса (UI) и выполняют роль callback из внутренних уровней (Interactors). Presenters легко тестировать и их задача состоит в том, чтобы получить информацию от веб-приложения и преобразовать ее для перемещения presenters на экран с помощью представления (View).

Interactor по факту вмещают бизнес-логику веб-приложения, то есть проверку условий и обработку информации. Interactor работают фоном и перемещают события и информацию на верхний уровень, presenters, c помощью callback.

4. QA-тестирование бэкенда

Тестирование нужно обязательно делать для того, чтобы знать, правильно ли работает бизнес-логика вашего веб-приложения, а также для того чтобы не проверять постоянно «вручную» работоспособность кода. Используйте автоматическое тестирование для модулей и библиотек, соответствия UI/UX и API. Пропишите несколько вариантов тестирования. Разработайте roadmap для платформы, чтобы управлять испытаниями для всех типов тестирования. Обязательно сделайте подключение инструментов отслеживания текущего покрытия кода, чтобы убедиться в том, что ваше веб-приложение не «виснет» и работает без багов и перебоев.

5. Добавление поддержки сваггера

Swagger – это «умная» документация RESTful web-API. По сути, это фреймворк для спецификации REST API, дающий возможность не только просматривать спецификацию в интерактивном режиме, но и отправлять запросы, именуемые Swagger UI. А теперь на счет веб-приложения.

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

Рекомендую вам добавить поддержку сваггера, при этом очень здорово, если сваггер еще и поддерживает генерацию через тесты. Таким образом, он поможет вам документировать API.

6. Работа с бизнес-логикой фронтенда

Сложность работы с бизнес-логикой фронтенда заключается в том, что тут очень много фреймворков. Обычно в современном програмировании используются Angular, React, Vue. У них у всех есть как свои достоинства, так и свои недостатки. Но я рекомендую вам выбирать для работы с фронтендом React, так как он легче, проще и более гибкий.

7. QA-тестирование фронтенда

Фронтенд тестируют двумя основными видами тестов — на логику и на отображение. Тесты на логику проверяют логическую реализацию функций и классов. Тесты на отображение отвечают за то, чтобы наполнение демонстрировалось пользователю в том виде, который вы задумали, прописывая фронтенд. Для осуществления QA-тестирования фронтенда используйте такие фреймворки, как Mocha, Chai, Jest, Ava, Enzyme, Jest — они самые ходовые, простые в эксплуатации и наиболее понятные из всех.

8. Мониторинг качества веб-приложения

Когда вы завершили седьмой этап, ваше веб-приложение, можно сказать, готово. Ну, или оно находится на финальной стадии готовности — 98%. Что вам нужно знать по итогу? Естественно, первое, что нужно, — это понять, насколько качественно реализовано приложение, как оно будет работать и на какое время хватит его износостойкости. В этом вам поможет Lighthouse — автоматизированный инструмент с открытым исходным кодом для мониторинга качества вашего веб-приложения. Lighthouse проводит системный аудит производительности и доступности веб-приложения для понимания обычного пользователя.

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

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

Источник

Как сделать 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 можно здесь.

Источник