Превращение веб-сайта в высококачественное приложение PWA
Превращение веб-сайта в полнофункциональное высококачественное веб-приложение (Прогрессивное веб-приложение) можно сделать в обеденное время! В этой статье вы можете ознакомиться с комплексным процессом.
Шаг 1. Создание карта отчета в Построителе PWA
Во-первых, вам потребуется проверка, есть ли у вашего веб-сайта функции и метаданные, необходимые большим PWA.
- Перейдите к Построителю PWA
- Введите URL-адрес веб-сайта, который вы хотите преобразовать в PWA, и нажмите кнопку Пуск.
- В построителе PWA отобразится карточка отчета PWA, указывающая функции, которые есть у вашего веб-сайта и отсутствуют.
Шаг 2. Проверка карточки отчета PWA
Карточка отчета PWA содержит оценку вашего веб-сайта из максимального значения 100. Оценки основаны на трех категориях функций.
манифеста
PWA оценивает манифест веб-приложения веб-сайта , если он доступен, и определяет обязательные, рекомендуемые и необязательные поля или значения. Вы можете улучшить оценку, добавив отсутствующие значения, изменив и повторно опубликовав файл манифеста или используя редактор манифеста в Интернете.
Изменения, внесенные в онлайн-редактор манифеста, не будут опубликованы на веб-сайте. Внесенные изменения будут использоваться построителем PWA только при создании PWA.
Должны присутствовать обязательные значения, в противном случае построитель PWA не сможет создать PWA. Обязательные поля включают просто манифест, значки, имя, короткое имя и start_url.
Рекомендуемые поля не являются обязательными, но они важны для взаимодействия с пользователем PWA. Настоятельно рекомендуется указать все рекомендуемые значения, хотя PWA Builder может создать PWA без них. Рекомендуемые значения: режим отображения, цвет фона экрана-заставки, описание, ориентация, снимки экрана, значок с высоким разрешением, маскируемый значок, категории и ярлыки.
Необязательные поля не являются обязательными, но при необходимости их можно указать. Необязательные поля включают возрастную категорию и связанные приложения.
Рабочая роль службы
Рабочая роль службы запускается в фоновом режиме, чтобы включить функции полнофункционированных веб-приложений, где в противном случае произошли бы ошибки 404. Для создания PWA Builder требуется рабочая роль службы, но если у вас ее нет, можно использовать один из нескольких предварительно созданных рабочих ролей службы, предоставляемых PWA Builder. Чтобы использовать предварительно созданную рабочую роль службы, выполните следующие действия.
- В меню выберите вкладку Параметры рабочей роли службы .
- Выберите соответствующую рабочую роль службы из курированного списка. Обратите внимание, что существует множество предварительно созданных параметров. убедитесь, что выбрана рабочая роль службы, наиболее подходящая для конкретного варианта использования.
- Выбрав рабочую роль службы, которую вы хотите использовать, вы вернетесь в карточку отчета PWA.
Безопасность
Все PWA, созданные с помощью PWA Builder, требуют трех протоколов безопасности.
- Сайт должен использовать ПРОТОКОЛ HTTPS.
- У сайта должен быть соответствующий сертификат HTTPS. Если на веб-сайте нет сертификата HTTPS, вы можете опубликовать его в Azure, чтобы получить встроенную поддержку HTTPS. Кроме того, существуют бесплатные сторонние средства, такие как Letsencrypt , которые позволяют получить сертификат HTTPS бесплатно.
- Сайт не должен содержать смешанное содержимое. Смешанное содержимое — это когда страница, обслуживаемая по протоколу HTTPS, содержит ресурсы, загруженные по протоколу HTTP. Смешанное содержимое нарушает безопасность HTTPS и PWA.
Шаг 3. Сбор важных сведений из Центра партнеров
Для создания PWA потребуется несколько сведений из учетной записи Центра партнеров. Если у вас нет MSA, щелкните здесь, чтобы получить инструкции по началу работы. Вам также потребуется зарегистрироваться в программе для разработчиков Windows.
Если вы еще не сделали этого, необходимо создать приложение PWA, зарезервировав новое имя. После того как вы зарезервируете свое имя, нажмите кнопку Начать отправку , чтобы создать новую отправку приложения.
Затем перейдите на вкладку Управление продуктами и выберите Идентификатор продукта. На странице идентификатора продукта будет указан идентификатор пакета продукта, идентификатор издателя и отображаемое имя издателя. Сохраните эти значения и вернитесь в PWA Builder.
Шаг 4. Создание PWA в Построителе PWA
Теперь у вас есть все необходимое для создания PWA в PWA Builder. Вернитесь на сайт Построителя PWA и щелкните Создать.
Построитель PWA предложит вам ввести сведения, полученные из Центра партнеров на шаге 3. Введите значения и нажмите кнопку Создать.
После создания PWA Builder браузер автоматически скачит его. PWA упаковается в файл .zip, содержащий шесть файлов.
Msix-файл — это пакет приложения main PWA. Этот файл установит PWA на компьютере пользователя.
Файл appx является классическим пакетом приложения. Он используется для установки PWA в более ранних версиях Windows. Дополнительные сведения см. в разделе Классические пакеты приложений .
Шаг 5. Отправка пакетов приложений в Microsoft Store
Эти пакеты можно отправлять в Microsoft Store так же, как и любое другое приложение, упакованое в файл MSIX. Дополнительные инструкции по отправке пакетов PWA в магазин см. в разделе Отправка приложений.
Как сделать веб-сайт приложением
Что же такое это волшебное PWA? Это набор современных спецификаций таких как сервис-воркеры, манифесты и другие функции веб-платформы. По сути это обычный сайт, но теперь вы можете добавить его иконку на экран смартфона или на рабочий стол, отправлять push уведомления, пользоваться как приложением даже без доступа к интернету и все это независимо от вашей операционной системы �� Рассмотрим как же сделать такую конфетку, но сначала немного подготовки.
Подготовка к внедрению PWA
Для внедрения PWA нужно иметь любой готовый веб-сайт с адаптивным дизайном, который задеплоен с использованием https протокола. Как пример я возьму самый простой сайт со списком дел, который я задеплоила с помощью Vercel.
Добавление манифеста
Первое, что нужно сделать — это добавить файл manifest.json и подключить его в ваш html файл. Это JSON файл, который содержит метадату про приложение (имя, иконку, описание и тд). Именно он предоставляет браузеру информацию, которая позволяет установить сайт как мобильное или десктопное приложение. Пример нашего manifest.json :
"lang": "en-us", "name": "Todo list", "short_name": "TodoList", "description": "App for making todo list", "start_url": "/", "background_color": "#FFF", "theme_color": "#FFF", "orientation": "any", "display": "standalone", "icons": [ "src": "icon.png", "sizes": "512x512" > ] > И подключить его в head в html файле:
link rel="manifest" href="manifest.json" /> Добавление сервис-воркеров
После добавления манифеста нам потребуется добавить сервис-воркеры . Это ключевая технология, которая используется для реализации PWA, можно сказать сердце прогрессивных веб-приложений. Это посредник между клиентом и сервером, пропускающий через себя все запросы к серверу. Именно сервис-воркеры обеспечивает возможность работы offline, с помощью разных стратегий кэширования. Базовые стратегии:
Я покажу пример стратегии Cache First , когда первым делом мы стучимся в кэш и если там есть нужные файлы, то берем их оттуда, если же нету, то уже отправляем запрос на их получение. Вот как sw.js будет выглядеть :
//определяем название кэша и файлы которые хотим кэшировать const APP_CACHE_NAME = 'app-cache-v1'; //определяем файлы для кэширования const ASSETS_URLS = [ 'index.html', '/scripts/script.js', '/scripts/index.js', '/css/style.css', ]; //добавляем событие при установке приложения self.addEventListener('install', (evt) => //ждем пока все файлы кэшируются evt.waitUntil(handleInstall()); >); const handleInstall = async () => const cache = await caches.open(APP_CACHE_NAME); //кэшируем контент при установке await cache.addAll(ASSETS_URLS); >; //добавляем событие на каждый запрос self.addEventListener('fetch', (evt) => evt.respondWith(handleRequest(event)); >); const handleRequest = async (evt) => const r = await caches.match(evt.request); //проверяем есть ли в кэше то что запрашивается if (r) return r; > //запрашиваем то что нам нужно, если этого нету в кэше const response = await fetch(evt.request); return response; >; Рассмотрим подробней этот файл :
- Определяем название кэша и файлы которые кэшируем. Название кэша — это ключ, по которому мы будем к нему доступаться. Сменив название, вы создадите новый кэш.
- Используем self вместо this , потому что он работает не только в window контексте, но и в worker контексте
- Далее добавляем обработчики событий. install при установке и fetch при запросах
- В install мы кэшируем контент
- В fetch описываем логику работы при запросе. В нашем случае применяем стратегию Cache First
Кэшировать можно данные, которые можно передавать по HTTP. Размер всех кэшируемых данных должен быть в пределах лимита для размеров кэша. В зависимости от браузера, при превышении этого лимита старый кэш либо будет удаляться, либо браузер запросит разрешение на увеличение лимита для размеров кэша. Вы можете кэшировать статические файлы, ответы на запросы и т. д., главное подобрать правильную стратегию кэширования. К примеру, если контент меняется очень редко или практически не меняется (статика), стоит использовать Cache Only , если нужно показывать обновленный контент, но допускается отображение старого (к примеру смена аватара пользователя) — подойдет стратегия Network First .
Главное отличие кэширования сервис-воркеров от браузерного, это то, что вы сами его контролируете. То есть, сервис-воркер проверяет, находится ли ресурс в его кэше, и решает возвращать ли сам ресурс, основываясь на стратегиях кэширования, которые вы сами запрограммировали.
Чтобы сервис-воркер заработал, нам нужно зарегистрировать его в нашем html файле:
script> // проверяем поддержку сервис-воркеров if ('serviceWorker' in navigator) // ожидаем полной загрузки страницы window.addEventListener('load', () => navigator.serviceWorker?.register('./sw.js'); >); > script> После регистрации сервис-воркеров, благодаря кэшированию файлов, приложение будет работать даже без подключения к интернету.
Можем также увидеть, что появилось предложение скачать приложение на десктопном и мобильном устройствах:
Как и любая технология, PWA имеет как преимущества, так и недостатки. Рассмотрим подробнее:
- Скорость работы приложения
- Низкая цена и время разработки
- Один код для всех платформ
- Занимает мало памяти
- Потребление батареи
- Ограниченная функциональность — PWA поддерживает только то что поддерживает HTML5. К примеру на данный момент PWA не имеет доступа к вашим мобильным контактам. Так как PWA разрабатывали в Google, многие функции IOS по сей день не доступны для прогрессивных приложений
Примеры известных PWA
Рассмотрим на примере нескольких компаний, которые сделали выбор в пользу прогрессивного веб приложения, каких целей они добились внедрив PWA ��
- Pinterest
- Тенденция к росту вовлеченности пользователей и дохода до 40%
- Время нахождения на сайте увеличилось до 30 %
- Количество новых пользователей увеличилось на 50%
- Страницы загружаются в среднем в 4 раза быстрее
- В 4 раза больше людей посетили страницы продаж BMW
- Увеличение посещаемости сайта на 49%
- На 43% больше сессий на пользователя
- В три раза увеличилась глубина прокрутки
- Увеличение числа пользователей в месяц до 130%
- Увеличение среднего количества часов прослушивания.
Большую роль достижении таких результатов сыграло увеличение скорости работы сайтов. Вот например сколько пользователи готовы ждать загрузки сайта:
Как видно, чем быстрее загружается и работает сайт, тем больше людей будут им пользоваться. Наличие отдельной иконки на экране смартфона упрощает доступ к приложению и увеличивает время пользования. Пользователю легче и удобней открыть его просто нажав на иконку, которую он видит каждый раз при пользовании смартфоном. Также постоянная коммуникация, например через push уведомления, помогает увеличивать уровень вовлеченности пользователей, так как всегда напоминает о приложении.
Инструменты для разработки PWA ��
Lighthouse — для проверки PWA. Его можно найти с помощью Dev Tools в Chrome. Это расширение подсказывает, что еще нужно, для того чтобы сайт стал PWA, и анализирует уже готовые прогрессивные приложения. Так вы сразу видите, что именно нужно добавить к вашему веб-сайту.
PWABuilder — предоставляет много крутых плюшек при разработке и использует современные технологии. У них даже есть расширение в VSCode. Но для работы с их стартовой сборкой нужно знание современных технологий (lit, web-component, Vite, Vaadin Router, TS).
Workbox — упрощает работу с сервер-воркерами и предоставляет многое из коробки. Также, множество библиотек и фреймворков при создании PWA темплейта используют именно его (React, Vue, Next)
Вывод
Как по мне PWA — это прорыв в мире веб разработки. Но на данном этапе эта технология только развивается и большой преградой к развитию становится компания Apple. Магазины приложений — это большой бизнес, с их продажи компании получают процент и конечно терять такой заработок они не хотят. Это видно по тому, насколько доступный функционал отличается для IOS и Android. Даже не смотря на это, существует несколько десятков удачных примеров PWA от крупных компаний. К тому же, разработка и поддержка PWА намного дешевле, чем, например, мобильных приложений, даже если разрабатывать кроссплатформенные приложения. В конце концов выбор всегда за вами, но обязательно попробуйте создать свое маленькое, а может и большое полноценное PWA ��
Полезные ссылки
Вдобавок хочу оставить некоторые интересные статьи на тему PWA ��
Как сделать PWA устанавливаемым
В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанавливать веб-приложения на поддерживающие мобильные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».
Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное
Требования
Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:
- Веб-манифест с правильно заполненными полями
- Сайт должен использовать защищённый (HTTPS) домен
- Иконка для предоставления приложения на устройстве
- Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)
Файл манифеста
Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.
Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.
Файл js13kpwa.webmanifest веб-приложения js13kPWA включён в раздел файла index.html с помощью следующей строчки кода:
link rel="manifest" href="js13kpwa.webmanifest" />Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.
Содержимое файла может выглядеть так:
"name": "js13kGames Progressive Web App", "short_name": "js13kPWA", "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.", "icons": [ "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" >, // . "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" > ], "start_url": "/pwa-examples/js13kpwa/index.html", "display": "fullscreen", "theme_color": "#B12A34", "background_color": "#B12A34" >
Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:
- name : Полное название вашего приложения.
- short_name : Короткое название для отображения на домашнем экране.
- description : Одно-два предложения, описывающих приложение.
- icons : Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше подходила под устройство пользователя
- start_url : Загружаемый исходный документ при запуске приложения
- display : Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
- theme_color : Основной цвет для интерфейса, используемый операционной системой
- background_color : Цвет для фона, используемый при установке и на заставке
Минимальные требования к манифесту — name и хотя бы один значок (с src , size и type ). Поля description , short_name , и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.
Добавить на домашний экран
«Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берёт информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.
Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.
После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.
Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.
При подтверждении ярлык будет добавлен на рабочий стол.
После этого пользователь может запустить приложение и сразу начать его использовать. Обратите внимание, иногда у PWA (в зависимости от браузера и/или операционной системы) в правом нижнем углу отображается иконка браузера, чтобы пользователи понимали, что работают с веб-приложением.
Экран загрузки
В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA
Иконка и фоновый цвет использовались для создания заставки.
Итог
В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.
Для получения большей информации, можете почитать наш Add to Home screen гайд (en-US) . В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.
Теперь давайте перейдём к последнему фрагменту PWA-головоломки — повторному запуску с помощью push-уведомлений.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как сделать 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» и вставить в него это:
‘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 можно здесь.
- прогрессивное веб-приложение
- progressive web apps
- pwa
- перевод
- нетология
- Блог компании Нетология
- Веб-разработка
- Разработка мобильных приложений