Progressive web app что это

PWA (Progressive Web App) – что это такое и в чем его особенности

В этом материале мы поговорим о относительно молодой технологии — Progressive Web App (PWA).

Інтенсивний курс від laba: Project Manager.
Ведіть проекти до успішного завершення.

Что такое PWA

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

История развития Progressive Web App

История Progressive Web Apps (PWA) началась с появлением в 2007 году первых HTML5 API, когда стало возможным создавать многофункциональные интерактивные веб-приложения. До этого веб-приложения не могли работать в автономном режиме, не имели доступа к аппаратному обеспечению устройства и поэтому отставали от нативных приложений.

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

Професійний курс від skvot: Системний геймдизайн.
Розробка ігор знати як.

Service Worker — это как бы промежуточный слой между веб-приложением и сервером, который может кэшировать запросы (а также ответы на них), чтобы приложение могло быстро работать без доступа к Интернету. Это значительно ускоряет загрузку страниц и уменьшает нагрузку на сервер.

Кроме того, Google предложил использовать Web App Manifest — JSON-файл, который описывает основные параметры приложения, такие как название, значок, цветовую схему и другие характеристики, которые обычно ассоциируются с нативными приложениями.

Web App Manifest дает возможность установить PWA на главный экран устройства и создать более реалистичный интерфейс пользователя, похожий на native.

Одним из первых PWA стало приложение Trivago, разработанное одноименной немецкой компанией. Приложение предоставляло информацию о гостиницах и было оптимизировано для работы в медленных сетях. Оно также поддерживало добавление на домашний экран устройства и работу в офлайн-режиме.

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

Особенности внедрения PWA и его архитектура

В зависимости от того, какой подход разработчики решили использовать для проектирования PWA-приложения, оно может быть как SPA (Single-Page Application), так и MPA (Multi-Page Application) — это не принципиально.

Архитектура PWA основывается на стандартных веб-технологиях, таких как HTML, CSS и JavaScript, и имеет три основных компонента:

• клиентскую сторону (frontend);
• серверную сторону (backend);

Практичний курс від skvot: Артменеджер.
Управляйте творчим процесом.

Клиентская сторона — это фронтенд-часть приложения, которая работает на стороне клиента (то есть в браузере). Она написана на HTML, CSS и JavaScript и отвечает за визуальное представление приложения и формирует пользовательский интерфейс, с определенной логикой взаимодействия с пользователем. Клиентская сторона PWA может быть написана с использованием любых фреймворков и библиотек, таких как React, Vue, Angular и др.

Чтобы научиться создавать прогрессивные веб-приложения, надо сначала освоить верстку и фронтенд. Получить знания по HTML, CSS вы можете на курсе школы Hillel Front-end Basic, в потом продолжить изучать JavaScript на курсе Front-end Pro.

Серверная сторона — это бэкэнд-часть приложения, которая отвечает за обработку запросов и предоставление данных для клиентской стороны. В PWA серверная сторона может быть создана на любом языке программирования, например, PHP, Node.js, Python и других.

Вот как это работает:

1. При запуске PWA сначала загружается HTML, CSS и JavaScript-код.
2. Затем запускается Service Worker, фоновый процесс, который работает в браузере, отвечает за кэширование контента и управление офлайн-режимом и может использоваться для предварительной загрузки ресурсов и кэширования данных. При этом кэшированные ресурсы могут быть использованы без подключения к Интернету.
3. Для хранения данных используется объектно-ориентированное хранилище IndexedDB, где можно хранить структурированные данные, включая объекты JavaScript. Процесс сохранения структурированных данных запускается отдельным потоком, что обеспечивает его отделение от основного потока веб-страницы, и позволяет работать независимо от состояния страницы или приложения.

Изучай Python на курсах от Mate Academy, или приходи сразу на Fullstack программу, где ты овладеешь и фронтенд, и бэкэнд за 4 месяца. Учиться можно бесплатно и оплатить курсы уже после трудоустройства.

Манифест приложения — это JSON-файл, который включает в себя метаданные приложения (имя, иконку, описание, цветовую схему и прочие настройки). Файл manifest содержит ссылки на другие ресурсы, такие как файлы скриптов, которые также загружаются при запуске PWA. Содержимое этого файла анализируется браузером в процессе установки PWA-приложения.

Професійний курс від laba: Проджект-менеджмент в ІТ.
Ефективне управління проектами.

Манифест приложения позволяет установить PWA на главный экран устройства и дает ему возможность работать как нативное приложение.

Еще одно требование к архитектуре progressive-приложений — поддержка HTTPS. PWA должно работать по протоколу HTTPS, чтобы обеспечить безопасную передачу данных между клиентом и сервером. HTTPS также необходим для использования Service Worker и доступа к некоторым API браузера, таким как, например, API геолокации.

PWA в ecommerce и преимущества архитектуры

PWA получили широкое распространение, и многие крупные компании (Uber, Pinterest, Starbucks и другие) начали создавать свои PWA-приложения. Особенно популярны PWA стали среди компаний, которые желают предоставить пользователям легкий и быстрый доступ к своим сервисам без необходимости устанавливать приложения из AppStore.

Для решения задач, связанных с ведением онлайн бизнеса progressive-приложение — отличный выбор.

Можно найти немало аргументов в пользу этой архитектуры:

• PWA могут повысить конверсию сайта. Поскольку пользователи быстро получают доступ к функциям, например, магазина, это увеличивает вероятность того, что клиент выполнит желаемое действие — совершит покупку, сделает заказ услуги и т.д.
• Использование PWA означает снижение затрат на разработку. PWA задействуют одинаковый код для работы на разных платформах, поэтому их создание может быть более экономичным, чем мобильная разработка для каждой платформы отдельно.
• Упрощается процедура внесения обновлений — пользователь не должен постоянно обновлять приложение через магазин приложений. Кроме того, у прогрессивных приложений быстрый отклик и скорость работы за счет кэширования.
• Благодаря своей независимости от платформы, PWA может работать на любых устройствах, включая iOS и Android. Это помогает достичь максимальный охват аудитории, что особенно важно для магазинов, которые хотят расширить свой бизнес на новые рынки.

Недостатки PWA и как с ними бороться

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

1. Технология не универсальна — она может не поддерживаться некоторыми браузерами. Хотя в большинстве современных браузеров с совместимостью проблем не наблюдается, отдельные устаревшие версии могут оказаться «за бортом». Решение проблемы: использовать свежии версии браузеров.
2. PWA постоянно записывает данные в кэш и обращается к нему в офлайн-режиме по мере надобности. Это удобная фича, но по этой же причине технология дополнительно расходует память. Эта проблема решается комплексным подходом и постоянной оптимизацией:
   (1) Применяйте «ленивую загрузку ресурсов». Это означает, что ресурсы (изображения, скрипты и стили) загружаются только тогда, когда они действительно нужны.
   (2) Сжимайте данные, чтобы сократить трафик. Обязательно проводим оптимизацию изображений.
   (3) Сведите к минимуму число сторонних фреймворков и библиотек, а само приложение тщательно тестируйте на предмет утечек памяти. Приложение должно регулярно удалять неиспользуемые объекты и данные для освобождения памяти.
3. Опять же, по причине кэширования файлов и данных для офлайн-режима, PWA-приложение может занимать больше места в устройстве по сравнению с обычным веб-приложением. Здесь остается только делать выбор в пользу экономии памяти/разработки PWA.
4. Если PWA-приложения настроены некорректно, они могут вызывать проблемы с SEO-оптимизацией. Дело в том, что PWA-приложения могут использовать динамическое содержимое, которое генерируется на стороне клиента, и этот контент может быть сложным для индексации поисковыми роботами.
   Для борьбы с этой проблемой есть ряд уловок:
   (1) применять предварительный рендеринг (prerendering) для создания статических HTML-страниц, которые поисковые роботы смогут легко проиндексировать;
   (2) использовать тег meta для указания правильных метаданных, таких как title , description и keywords , которые позволят поисковым роботам правильно индексировать страницы приложения.
   Кроме того, PWA-приложения могут иметь свой собственный URL-адрес — это тоже помогает индексированию страниц в поисковых системах. Для этого нужно настроить соответствующие маршрутизаторы, которые подскажут поисковым ботам, как правильно индексировать страницы приложения.

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

Пример простейшего PWA-приложения

Давайте напишем простейшее PWA-приложение, на примере которого станет понятно, как функционирует эта архитектура.

Нам понадобятся четыре файла:

• index.html — в нем будет прописана структура Web App Shell, основа PWA. В контексте PWA index.html работает как точка входа в приложение, которую открывает пользователь при запуске приложения или при переходе на него из списка приложений на устройстве. Здесь мы определяем навигационную панель, основной контент и другие элементы пользовательского интерфейса.
• script.js — тут может быть любой код, связанный с функциональностью вашего приложения. Например, это может быть код для получения и обработки данных, код для работы с пользовательским интерфейсом, обработка событий и так далее. Код, который вы напишете, будет зависеть от того, что именно должно делать ваше приложение.
• style.css — файл со стилями для HTML-страницы.
• sw.js — файл JavaScript, который содержит код Service Worker для вашего веб-приложения. Код будет работать в фоновом режиме и может перехватывать запросы к серверной части, кэшировать ресурсы, обрабатывать push-уведомления и многое другое. В файле sw.js вы можете определять, какие запросы кэшировать, как обрабатывать события жизненного цикла и т.д. Обычно код для регистрации Service Worker размещается в обработчике события load , чтобы гарантировать, что все ресурсы страницы загрузились до запуска регистрации Service Worker.

Файл sw.js не нужно подключать в разметке HTML-файла. Он подключается в Java Script-файле, который обрабатывает регистрацию Service Worker, например, внутри файла script.js.

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

      
My PWA
 
This is a simple PWA example for Highload.today.
 Click me!  

Файл со стилями:

body < margin: 0; padding: 0; font-family: sans-serif; >header < background-color: #333; color: #fff; padding: 20px; >h1 < margin: 0; >main < padding: 20px; >.btn < background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; >.btn:hover

const button = document.querySelector('.btn'); button.addEventListener('click', () => < button.disabled = true; button.textContent = 'Loading. '; console.log('Button clicked'); fetch('https://jsonplaceholder.typicode.com/posts') .then(response =>response.json()) .then(data => < console.log('Data loaded', data); setTimeout(() =>< button.disabled = false; button.textContent = 'Click me!'; >, 2000); // задержка в 2 секунды >) .catch(error => < console.error('Error:', error); setTimeout(() =>< button.disabled = false; button.textContent = 'Click me!'; >, 2000); // задержка в 2 секунды >); >); if ('serviceWorker' in navigator) < window.addEventListener('load', function() < navigator.serviceWorker.register('/sw.js').then(function(registration) < console.log('ServiceWorker registration successful with scope: ', registration.scope); >, function(err) < console.log('ServiceWorker registration failed: ', err); >); >); >

Теперь напишем код для файла sw.js — он регистрирует сервисный рабочий скрипт и кэширует необходимые ресурсы.

Также код обрабатывает события fetch , что позволяет использовать кэшированные ресурсы во время выполнения запросов. Но при работе с кэшем может возникнуть неожиданное поведение, поэтому важно тестировать и отлаживать этот функционал:

var CACHE_NAME = 'my-pwa-cache-v1'; // Проводим кэширование необходимых ресурсов в момент установки Service Worker self.addEventListener('install', function(event) < event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) < return cache.addAll([ '/', '/index.html', '/style.css', '/script.js' ]); >) ); >); // Кэширование запросов self.addEventListener('fetch', function(event) < event.respondWith( caches.match(event.request) .then(function(response) < // Если ресурс найден в кэше, возвращаем его из кэша if (response) < return response; >// Если ресурс отсутствует в кэше, запрашиваем его с сервера и сохраняем ответ в кэше return fetch(event.request) .then(function(response) < // Проверяем, что ответ корректный, иначе возвращаем его не кэшируя if(!response || response.status !== 200 || response.type !== 'basic') < return response; >// кэшируем успешный ответ и возвращаем его var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) < cache.put(event.request, responseToCache); >); return response; >); >) ); >); // Избавление от устаревших кэшей при активировании нового Service Worker self.addEventListener('activate', function(event) < var cacheWhitelist = ['my-pwa-cache-v1']; event.waitUntil( caches.keys().then(function(cacheNames) < return Promise.all( cacheNames.map(function(cacheName) < if (cacheWhitelist.indexOf(cacheName) === -1) < return caches.delete(cacheName); >>) ); >) ); >);

Первая часть кода, запускающаяся при установке Service Worker, инициализирует кэш и кэширует основные ресурсы приложения (index.html, style.css, script.js).

Вторая часть кода, запускающаяся при выполнении запроса, проверяет наличие запрашиваемого ресурса в кэше:

• если ресурс найден, он возвращается из кэша;
• если же ресурс не найден, происходит запрос на сервер и результат кэшируется.

В случае некорректного серверного ответа (не 200 или не тип basic ), ответ возвращается без кэширования.

И, наконец, третья часть кода отвечает за удаление устаревших кэшей при активации нового Service Worker.

Запустим наше приложение и посмотрим, что происходит.

Для запуска приложения нужно запустить локальный веб-сервер. Самый простой способ сделать это — с помощью расширения для браузера, например, Web Server for Chrome из Chrome Web Store.

Если вы предпочитаете не использовать расширение для браузера, вы можете запустить локальный сервер из командной строки, используя такие инструменты, как Node.js, PHP, Python или любой другой серверный язык программирования. Недостаточно знаете Python? Попробуйте курс от Powercode Academy.

• устанавливаете Node.js;
• затем открываете терминал и пишете npm install -g http-server ;
• переходите в каталог с проектом cd/path/to/project и выполняете команду http-server ;
• после этого запускаете браузер и переходите по адресу http://localhost:8080 ( или другому порту, если он был указан в команде запуска).

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

Наше приложение — это простое PWA (Progressive Web App), которое позволяет загрузить список постов (posts) с помощью API, предоставляемого сервисом JSONPlaceholder.

Для этой цели в приложении есть кнопка Click me!, которая загружает список постов, используя JavaScript Fetch API:

• при нажатии на кнопку она становится неактивной и меняет свой текст на “Loading…” (стоит двухсекундная задержка), чтобы пользователь знал, что происходит загрузка данных;
• далее запускается функция fetch() , которая отправляет GET-запрос на сервер по указанному адресу “ https://jsonplaceholder.typicode.com/posts “;
• когда сервер возвращает ответ, его содержимое преобразуется из формата JSON в JavaScript-объект при помощи метода .json() , который вызывается на объекте Response , полученном из сервера;
• полученные данные выводятся в консоль для проверки.

После получения данных кнопка становится снова активной и возвращается ее первоначальный текст “Click me!”:

В этом конкретном примере мы не писали код для манифеста. Но обычно файл манифеста должен быть создан в корневом каталоге приложения и называться manifest.json. В этом файле должна быть определена информация о приложении, такая как название, описание, иконки, цвета и другие параметры.

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

Заключение

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

Если суммировать вкратце, то PWA — мощная и интересная технология, которая при этом требует комплексного подхода к управлению памятью и SEO-оптимизации.

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

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

Хочешь создавать прогрессивные веб-приложения сам? Твой выбор — Fullstack курсы от Mate Academy. Можешь учиться полный день и платить после трудоустройства или выбрать вечерние курсы с гибким графиком.

Как запустить мобильное приложение за две недели с помощью PWA

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

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

Никита Воробьёв
Frontend-разработчик AFFINAGE

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

«Прогрессивное web-приложение (англ. progressive web app, PWA) — технология в web-разработке, которая визуально и функционально трансформирует сайт в приложение (мобильное приложение в браузере)»

Так описывается технология в Wikipedia, но нам этого мало, так что давайте подробнее разберем, что это такое.

PWA-приложение не нужно отдельно разрабатывать для iOS и Android: оно устанавливается на главный экран смартфона, — для этого нужно заложить технологическую базу на этапе Frontend-разработки. Можно сказать, что PWA — это сайты с расширенной функциональностью, которая позволяет им быть похожими на нативные мобильные приложения.

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

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

Задачи, которые решает PWA:

• Стимулировать повторные продажи.
• Возвращать клиентов компании в одно нажатие на экране телефона.
• Повышать узнаваемость бренда. Иконка с логотипом компании всегда на виду на рабочем столе у пользователя.
• Повышать средний чек сделки, допродавая продукты при помощи Push-уведомлений.
• Оставаться на связи с клиентом: показывать Push-уведомления о том, что товар прибыл в пункт самовывоза или будет доставлен сегодня.
• Экономить на рекламе. Не нужно настраивать догоняющую рекламу с новой акцией, достаточно отправить уведомление для текущих клиентов.
• Избавиться от конкуренции в поисковой выдаче. Пользователи возвращаются через приложение, в котором нет конкурентов, в отличии от поисковой выдачи.

Однако любую из этих задач может решить и нативное мобильное приложение, так что в случае с PWA-разработкой можно поставить знак равенства между PWA Frontend developer и Mobile developer, поскольку они решают одни и те же задачи.

История PWA

Технология была создана компанией Microsoft еще в 2000 году. В 2007 сотрудники Apple разработали свой вариант HTML-приложений.

Изначально приложения для оригинального iPhone разрабатывались именно на платформе web. Однако успеха технология не сыскала по причине скудного UX, и в скором времени появился App Store, который по факту отложил развитие PWA.

Ожила и приобрела широкую известность технология только в 2015 году благодаря расширению возможностей браузера Google Chrome и продвижению Service Worker и Web App Manifest. Тогда же дизайнер Фрэнсис Берримэн и инженер Google Chrome Алекс Рассел придумали термин PWA.

Затем поддержку прогрессивного веб-приложения начали добавлять во все браузеры и операционные системы. К примеру, в Windows, начиная с 10 версии, появилась возможность распространения PWA через Microsoft Store.

Но все же основная причина развития данной технологии — привлечение и удержание мобильного трафика: так, в России мобильный трафик по итогам 2021 года составил рекордные 83%.

Примеры PWA

Существует огромное множество прогрессивных веб-приложений — Telegram, Pinterest, Tinder, Starbucks.

Появились и отдельные сайты-каталоги PWA, например appsco.pe и findpwa.com. Другие ресурсы для тех, кто интересуется разработкой прогрессивных веб-приложений — pwastats.com и web.dev, раздел Case Study.

На этих сайтах можно прочитать про множество успешных кейсов применения PWA с цифрами и с результатами. Один из примеров — как Starbucks смогли в два раза увеличить количество ежедневных пользователей.

Структура PWA

Чаще всего PWA состоит из Service Workers, Application Manifest, Офлайн-кэширования, различных PWA-технологий, адаптивного дизайна, фоновой синхронизации, Push-уведомлений, Media API и Geolocation API.

Пример структуры PWA

Модификаций структуры множество, однако минимальные требования для работы PWA — это:

• Валидное и защищенное HTTPS-подключение (у домена должен быть установлен SSL-сертификат).
• Успешно установленный файл Service Worker`а.
• Правильно установленный и валидный JSON-файл манифеста.

Любой сайт можно дополнить данными составляющими и тем самым получить прогрессивное веб-приложение.

Service Worker

«Сердце» PWA — Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него.

Из хранилищ у Service Worker’a есть доступ к Cache-хранилищу для web-ресурсов, и IndexDB для данных. Но, самое главное, — полная свобода для реализации бизнес-логики.

С точки зрения написания кода, Service Worker представляет собой Javascript-файл. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.

Web App manifest

Web App manifest — JSON-файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и другие варианты отображения) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.

Технические особенности PWA

Способы установки PWA

Существует три способа установки PWA: при помощи автоматического уведомления, через «…» (три точки) в меню браузера, при клике на кнопку установки на странице.

Так выглядит установка с помощью автоматического уведомления

Пример установки через «…» (три точки) в меню браузера

Пример установки при клике на кнопку установки на странице

Отображение PWA

PWA работают на базе WebView, который предоставляют браузеры. WebView очень популярный способ для отображения интерфейсов.

Браузер, который будет открывать PWA после установки приложения, определяется операционной системой iOS или Android.

Для Android используется Google Chrome, а для iOS — Safari.

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

Варианты отображения PWA

Поддержка PWA

По данным caniuse.com, 94% устройств пользователей поддерживают service workers, возможность установки на домашний экран есть у 87% пользователей.

Функциональность PWA

PWA поддерживает множество способов взаимодействия с аппаратной частью телефона.

Такие функции как доступ к контактам пользователя, NFC, считывание QR, поддержка AR/VR пока недоступны, но в ближайшее время их должны добавить.

Подробнее обо всех функциях с примерами кода можно узнать на сайте whatpwacando.today.

Фреймворки и библиотеки

Для PWA необходимо только два файла — Service Worker и Web App manifest, — поэтому для разработки подойдут все актуальные реактивные фреймворки. Для каждого из них есть плагин, который добавляет предустановленный файл манифеста, предустановленный файл service worker’a и дополнительную функциональность.

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

• React PWA Library
• Angular PWA Framework
• Vue PWA Framework
• Ionic PWA Framework
• Svelte PWA Framework

PWA Builder

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

Отличительные качества PWA

Ограниченный доступ к аппаратной части

К недостаткам PWA можно отнести ограниченный доступ к аппаратной части мобильного устройства.

Поскольку прогрессивные веб-приложения запускаются в браузере, они не имеют прямого доступа ко всем возможностям платформы (операционной системы и аппаратным возможностям), к которым имело бы доступ нативное приложение, созданное с использованием SDK-платформы.

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

Установка в обход магазинов приложений

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

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

Фоновая установка обновлений

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

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

Меньший размер приложения

Размер PWA-приложения, как правило, не превышает 1-3 мегабайт. Это меньше, чем мобильное приложение. Средний размер мобильного приложений, по данным 2017 года, 38 Мб для iOS и 15 Мб для Android.

Меньшие затраты на разработчиков

Для компаний, бизнеса разработка и поддержка PWA финансово выгоднее.

rabota.ru Q1 2022

В общем, PWA имеет свои отличительные особенности и недостатки.

Таблица особенностей PWA и нативных приложений

В связи с ограничениями аппаратной части, PWA не может полностью заменить нативные приложения, но четыре ключевые функции PWA-приложений закрывают потребности 90% мобильных пользователей:

• Отправка Push-уведомлений, чтобы вернуть пользователей.
• Установка иконки на домашний экран, чтобы дать пользователям быстрый доступ к приложению.
• Доступ к некоторым нативным аппаратным функциям, например, камеры, микрофона.
• Возможность работы офлайн.

Мы рекомендуем разрабатывать PWA-приложения когда нужно:

• Повысить удовлетворенность и вовлеченность клиентов/пользователей, например, дать пользователям быстрый доступ к повторным заказам.
• Протестировать гипотезу с минимальными финансовыми вложениями: прежде чем вкладывать в разработку нативного приложения, можно протестировать на PWA.
• Сделать кроссплатформенную совместимость в сжатые сроки
• Предложить аудитории новый канал взаимодействия с компанией.

Как интегрировать PWA в сайт: инструкция для начинающих

Собрали полезные ресурсы, которые помогут разработать и запустить прогрессивное веб-приложение на любом стеке.

1. Добавить файлы manifest и serviceworker

• Инструкция по добавлению файла manifest в проект. Пояснение по полям файла,
• Ресурс для генерации файла manifest.
• Документация по manifest от разработчиков Mozilla. Примеры файла manifest, пояснение по полям, совместимость с браузерами.
• Инструкция по добавлению файла serviceworker, его регистрация, жизненный цикл.
• Документация по serviceworker от разработчиков Mozilla. Примеры файла, архитектура, жизненный цикл, кеширование, запросы.

2. Подключить и настроить библиотеки workbox

• Документация по всем способам и вариациям подключения workbox.
• Все возможные фреймворки и библиотеки, интегрированные с workbox.

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

• Инструкция по добавлению кнопки установки приложения.
• Инструкция по добавлению кнопки установки приложения.

4. Запросить разрешения на отправку push-уведомлений

• Документация о push-уведомлениях со всеми тонкостями.
• Инструкция от разработчиков Mozilla по добавлению push-уведомлений.

Последующие пункты необязательны, но могут пригодиться для дополнительных этапов интеграции.

5. Настроить различные стратегии кэширования для статичных файлов

• Инструкция по настройке стратегий кеширования с примерами и пояснением.
• Вариации стратегий кеширования, пояснение каждой.

6. Настроить показ уведомлений при обновлении кеша

Документация от разработчиков Mozilla по событию обновления кеша.

7. Запись и чтение данных в IndexedDB

• Документация от разработчиков Mozilla по IndexedDB, интерфейсам, спецификацией.
• Документация по IndexedDB с примерами использования.

Итог

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

Нейросеть научилась предсказывать смерть пациентов

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

Следите за новыми постами по любимым темам

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

Progressive Web Apps — что это такое и для чего оно нужно

Говорят, чтобы статья была максимально полезной, она должна быть понятна даже твоему деду, который до сих пор не понимает чем вы там занимаетесь в своих “интырнетах”. Исходя из этого, я решил довольно простым языком расписать “Что такое PWA и нахрен оно вообще нужно?”. Поэтому, если тебе не удалось с первого раза разобраться с этой неведомой штукой, в этой статье будет всё, чтобы решить это раз и навсегда.

Цель статьи:

Я не буду подробно разжевывать тебе о PWA, так как на эту тему написано уже много статей.

Моя цель — простым языком дать основную информацию, которой тебе хватит, чтобы понимать что такое PWA. Потом показать реальный пример, которым забетонируем всё, что ты усвоил.

После прочтения ты будешь понимать следующее:

1. Возможности и преимущества.
2. Основные понятия.
3. Настройка PWA.
4. Как обновлять кэш.

А ну и еще, я настоятельно рекомендую взять сейчас ноутбук и повторять всё, что я буду делать. Иначе, информация вылетит из головы.

На этом вводная часть закончена, переходим к основной части.

Не просто верстка. Что нужно знать, чтобы верстать ХОРОШО?

Как и почему хорошая верстка напрямую влияет на качество продукта. Лучшие практики, чтобы повысить качество верстки.

Возможности и преимущества

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

Технология PWA была анонсирована компанией Google в 2015 году. Она позиционирует себя как дополнительная надстройка, которая позволяет сделать из сайта подобие мобильного приложения.

При этом внутренности никакие не меняются, не трансформируются, сайт остаётся тем же, трансформируется только браузер.

Какие возможности предоставялет PWA?

• Отправка уведомлений, кэширование контента и установка ярлыка на рабочий стол;
• Отправка уведомлений в виде всплывающего окна, в котором можно оповещать пользователя о чем-либо;
• Работа в автономном режиме, то есть в отсутствие интернет-соединения, благодаря кэшированию контента.

Пару слов о преимуществах

• Простота в установке. Не нужно идти ни в какие магазины приложений, что-то скачивать и танцевать с бубном. Просто открываешь сайт по ссылке, выскакивает окошко “установить ярлык на рабочий стол”, устанавливаешь и готово.
• Конечно это будет работать на всех более-менее современных устройствах, нужен только браузер.
• Сайт становится доступнее, из-за ярлыка на рабочем столе. Разблокировал телефон, тыкнул на ярлык и сайт открылся. Круто же.
• Занимает мало памяти, менее одного мегабайта.
• Повышенная безопасность, все ресурсы передаются только по https протоколу.
• Стабильная работа. Если будут неполадки с интернетом, контент будет компенсирован из кэша, тем самым сайт будет всегда доступен.
• Настройка PWA менее трудоемкий процесс, нежели создание мобильного приложения. Не нужно писать две одинаковые прилы на Android и IOS. Поэтому, для бизнеса это будет намного дешевле. Более подробно можно узнать тут:

Хотите разработать мобильное приложение? Уверены?

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

Не приятные моменты

• Есть заблуждение, по поводу того, что PWA помогает улучшить SEO показатели. Я с этим не согласен!
  И первая проблема с которой ты сталкнешься — это SPA, где html разметку на страницу рендерит javascript. Пока скрипты не загрузятся(сколько им там нужно) разметка не появится, а будет лишь div с айдишником “app”. Вот как раз в тот момент, когда всё раздупляется, происходит SEO анализ, но страница, как ты понял, пустая. И хоть ты добавишь +100500 PWA на сайт, они никак не ускорят рендер html кода.
  И чтобы быть менее голословным, давай убедимся на реальном примере. Возьмём сайт https://madops.io, который и является single page application’ом. Если посмотреть на его внутренности view-source:https://madops.io, то ты и увидишь всё то, что я описал выше.
  В остальных же случаях, когда сервер разом рендерит всю html разметку, проблем не возникает, как, например, тут view-source:https://maddevs.io
• Ограниченные возможности. Такие функции как управление камерой, отправка смс, доступ к датчикам и многое другое не будет доступно для PWA, по соображениям безопасности.
• Не поддерживается некоторыми браузерами. Например, на IOS в safary пока не поддерживаются push-уведомления.

Думаю, этого вполне достаточно, чтобы уже представить что такое PWA. Ну а если мало, можно почитать тут

Вот список сайтов, которые используют PWA — https://pwa.rocks

Основные понятия

Service Worker — Это по сути файл со скриптами, который отвечает за всю эту магию. Все запросы браузера идут через него, что даёт кучу возможностей, например, если отсутствует соединение с интернетом возвращает контент из кэша(если он конечно там есть).
В нем мы обрабатываем различные события, запись, удаление файлов из кэша и многое другое.
Скрипты работают в фоновом режиме, параллельно с приложением.

Manifest.json — Файл настроек. Там мы указывает какие иконки использовать, какой текст отображать в ярлыке, в каком формате открывать окно браузера и тд. Более подробно поговорим о нём чуть ниже.

Application Shell — Так называют оболочку для PWA. А если конкретнее, это браузер, который слегка трансформируется, чтобы дать больше возможностей разработчику.

HTTPS — Одно из главных требования PWA — передача данных по https протоколу, что более безопасно.
При разработке можно использовать localhost.

Push Notifications — технология для отправки push-уведомлений.

Настройка PWA

А настроить её на самом деле очень просто, и чтобы это доказать, давай сразу перейдем к написанию кода, так будет проще. Погнали!

Вот ссылка на уже готовый код https://github.com/denisoed/PWA-example, от туда можешь скачать картинки, которые потребуются дальше, ну и за одно ознакомишься с тем, что получилось.

Итак, начнем с создания папки для проекта, назовем её PWA. Далее в эту папку добавим index.html, в котором будет вот такой код

html>lang="en"> 
 
 
charset="utf-8"> 
 
name="description" content="Progressive Web Apps"> 
 class="fullscreen"> 
class="container"> 
href="https://maddevs.io" target="_blank"> 
src="./images/logo.svg" alt="Mad Devs"> 
 
PWA
 
Progressive Web Apps
 
 
 

Верстку я уже подготовил, но пока без стилей это выглядит плохо, поэтому добавим и их. Создаём папку css, в которую добавляем файл styles.css и вставляем в него код ниже

body font-family: sans-serif;
>/* Make content area fill the entire browser window */
html,
.fullscreen display: flex; 
height: 100%; 
margin: 0; 
padding: 0; 
width: 100%; 
background-color: #000;
>/* Center the content in the browser window */
.container margin: auto; 
text-align: center;
>.container img width: 50px; 
height: auto;
>.container h1 color: #fff; 
font-size: 12rem; 
font-weight: bold; 
margin: 30px 0 -20px;
>.container p color: #fff; 
font-size: 3rem; 
margin: 0;
>

Конечно же, подключаем этот файл в index.html, в тэг …

rel="stylesheet" href="css/styles.css">

Давай сразу подключим нужные картинки, которые можно скачать тут. Перейдешь по ссылке, там будет кнопка Clone or download, зеленая такая, жмешь её, потом кликаешь Download ZIP. Скачается архив, в нем и будут картинки в папке images. Фух, думаю довольно доступно объяснил

Открываешь проект, создаешь там директорию images, куда вставляешь все картинки. Далее открываешь index.html и вставляешь в тэг … мета информацию. Что это и зачем, можешь почитать тут.

rel="icon" href="images/favicon.ico" type="image/x-icon" />
rel="apple-touch-icon" href="images/mstile-150x150.png">
name="theme-color" content="black" />
name="apple-mobile-web-app-capable" content="yes">
name="apple-mobile-web-app-status-bar-style" content="black">
name="apple-mobile-web-app-title" content="PWA">
name="msapplication-TileImage" content="images/mstile-144x144.png">
name="msapplication-TileColor" content="#FFFFFF">
name="viewport" content="width=device-width, initial-scale=1.0">

В итоге, в файле index.html должна быть вот такая структура

html>lang="en"> 
 
 
charset="utf-8"> 
 
name="description" content="Progressive Web Apps"> 
rel="icon" href="images/favicon.ico" type="image/x-icon" /> 
rel="apple-touch-icon" href="images/mstile-150x150.png"> 
name="theme-color" content="black" /> 
name="apple-mobile-web-app-capable" content="yes"> 
name="apple-mobile-web-app-status-bar-style" content="black"> 
name="apple-mobile-web-app-title" content="PWA"> 
name="msapplication-TileImage" content="images/mstile-144x144.png"> 
name="msapplication-TileColor" content="#000"> 
name="viewport" content="width=device-width, initial-scale=1.0"> 
rel="stylesheet" href="css/styles.css"> 
 class="fullscreen"> 
class="container"> 
href="https://maddevs.io" target="_blank"> 
src="./images/logo.svg" alt="Mad Devs"> 
 
PWA
 
Progressive Web Apps
 
 
 

Теперь остаётся запустить и посмотреть, что получилось. Я тут нашел очень удобный экстеншн Web Server for Chrome, который запускает локальный сервер, его нужно установить, он нам понадобится далее. Там ничего сложно, просто укажи папку с проектом, где лежит index.html, он сам всё сделает. Копируешь ссылку и вставляешь в браузер.

И вот что у нас получилось. Я бы не сказал, что это шЭдЭвр, но как по мне нормально!

Ну слушай, самое сложное, считай, мы сделали, давай-ка теперь посмотрим, что думает google валидация о нашей работе. Для этого нажми f12 и перейди во вкладку Lighthouse (раньше было Audits), там будет синяя кнопка Generate report, тыкай.

После того, как пройдет процесс валидации, мы увидим следующую картину: пункт отвечающий за PWA будет серым. Это говорит о том, что у нас отсутствуют настройки.

И если проскроллить ниже, можно увидеть рекомендации, которые нужно выполнить, чтобы PWA работало как часы.

Вкладка Lighthouse поможет тебе отслеживать все ошибки при настройки PWA.

Ну вот, наконец-то мы дошли до самого интересного.

Для начала нужно создать файл manifest.json в корне проекта. В него мы добавляем следующие метаданные:

• name — Полное название. Используется в ярлыке приложения
• short_name — Сокращенное название, будет задействовано там, где полное имя не будет помещаться
• icons — Список иконок, которые будут отображаться в ярлыке установленного приложения.
• lang — Язык по умолчанию
• start_url — Обязательный параметр. Он говорит приложению с какого файла нужно стартовать. При открытии приложения, браузер будет всегда открывать эту страницу
• display — Говорит о том, в каком формате открывать окно браузера.
• background_color — Это свойство используется на экране заставки при первом запуске приложения на мобильном устройстве.
• theme_color — Задает цвет панели инструментов и может быть отражен в предварительном просмотре приложения в переключателях задач. theme_color должен соответствовать цвету мета-темы, указанному в заголовке документа. В Нашем случае так ame=”theme-color” content=”black” />

 "name": "Progressive Web Apps", 
"short_name": "PWA", 
"icons": [ 
 "src": "images/mstile-70x70.png", 
"sizes": "70x70", 
"type": "image/png" 
>, 
 "src": "images/mstile-144x144.png", 
"sizes": "144x144", 
"type": "image/png" 
>, 
 "src": "images/mstile-150x150.png", 
"sizes": "150x150", 
"type": "image/png" 
>, 
 "src": "images/mstile-192x192.png", 
"sizes": "310x150", 
"type": "image/png" 
>, 
 "src": "images/mstile-310x150.png", 
"sizes": "310x150", 
"type": "image/png" 
>, 
 "src": "images/mstile-310x310.png", 
"sizes": "310x310", 
"type": "image/png" 
>, 
 "src": "images/mstile-512x512.png", 
"sizes": "310x310", 
"type": "image/png" 
> 
], 
"lang": "en-US", 
"start_url": "/index.html", 
"display": "standalone", 
"background_color": "black", 
"theme_color": "black"
>

Этого пока достаточно. Вот тут есть описание всех свойств этого файла, как будет время, почитай обязательно.

Подключаем manifest.json в index.html в тэг …

rel="manifest" href="/manifest.json">

Приступаем к написанию скриптов. Создаем папку c названием js, в которую добавляем файл main.js с вот таким кодом:

window.addEventListener('load', () => if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').then(reg => console.log('SW registered!'); 
>).catch(err => console.log('SW registration FAIL:', err)); 
>
>);

Пару слов о том, что там происходит.

• Как только страница загрузилась, проверяем, поддерживает ли браузер serviceWorker, и если успешно, то идём дальше.
• Далее регистрируем наш файл sw.js(который еще предстоит настроить). Ничего необычного.

Подключаем cкрипты в index.html, но уже не в тэг …, а перед закрывающим тэгом .

Ну теперь давай создадим сам файл sw.js. В нем будет храниться вся логика для Service Worker. Создаем его в корне проекта, и первой строкой добавим туда название кэша.

const cacheName = 'pwa_v1';

Следующей строкой добавим переменную includeToCache. В ней мы указываем файлы, которые нужно закэшировать. Да, я понимаю, что не удобно, приходится руками прописывать все файлы, но имеем то, что имеем. Зато мы всегда будем уверены, что ничего лишнего не кэшируется. Экономия трафика и стабильность.

const includeToCache = [ 
'/', 
'/index.html', 
'/images/favicon.ico', 
'/images/logo.svg', 
'/images/logo-black.svg', 
'/css/styles.css', 
'/js/main.js'
];

Следующими идут события. Service Worker имеет несколько событий под капотом, их ещё называют жизненные циклы. И первое из них — это install. Оно срабатывает только один раз при записи кэша.

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', e => e.waitUntil( 
caches.open(cacheName).then(cache => return cache.addAll(includeToCache); 
>) 
);
>);

Событие fetch. Это событие просматривает все запросы, и если что-то совпадает с тем, что лежит в кэше, отдает совпадение из кэша. Иначе, отдает то, что приходит с сервера.
Метод respondWith, который дословно переводится “Ответь с помощью…”, как раз и отвечает за выдачу данных из кэша или тех, что вернул сервер. А если сервер ничего не вернул, то берем из кэша.

/* Serve cached content when offline */
self.addEventListener(‘fetch’, e => e.respondWith( 
caches.match(e.request).then(response => return response || fetch(e.request); 
>) 
);
>);

Этого кода пока достаточно. Давай теперь убедимся что файл sw.js зарегистрирован и кэш записан. Перейди в консоль разработчика, открой вкладку Application и там перейди в настройки Service Workers. Здесь мы видим, что файл sw.js успешно зарегистрирован, это подтверждает зелёная лампочка.

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

Теперь, если отключить интернет и перезагрузить страницу, сайт будет работать.

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

Как обновлять кэш?

Первая проблема, с которая я столкнулся, разбираясь с PWA, была связана с обновлением старого кэша. Но, как оказалось, это решается очень просто.

Давай поменяем парочку стилей, чтобы было видно что, что-то изменилось. Обновим страницу, убедимся что стили поменялись на странице. Обрубим соединение с интернетом, ещё раз перезагрузим страницу, но почему-то кэш не обновился, и мы видим старую версию сайта.

Решение выглядит следующим образом. В файл sw.js добавляем событие activate, при вызове которого, будем проверять имя старого и нового кэша, и если имена отличаются, то удаляем старый и добавляем новый. Да, чтобы кэш обновлялся, нам нужно менять его название при каждом обновлении кода.

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

self.addEventListener(‘activate’, e => // delete any caches that aren’t in cacheName 
// which will get rid of version 
e.waitUntil( 
caches.keys().then(keys => Promise.all( 
keys.map(key => if (cacheName !== key) return caches.delete(key); 
> 
>) 
)).then(() => console.log(cacheName + ‘ now ready to handle fetches!’); 
>) 
);
>);

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

Пару слов по поводу события activate. Это событие срабатывает после того, как воркер был зарегистрирован и готов к работе. Но чтобы он был готов, нужно дождаться пока старый кэш перестанет использоваться сайтом, a на это потребуется какое-то время. И чтобы избавится от этого ожидания, можно добавить метод ниже.

self.skipWaiting();

Теперь кэш будет обновляться сразу после регистрации нового воркера. Добавляем его в событие install.

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', e =>  self.skipWaiting(); e.waitUntil( 
caches.open(cacheName).then(cache => return cache.addAll(includeToCache); 
>) 
);
>);

И в файле main.js добавим функцию update, которая при каждой перезагрузке страницы будет запускать обновление кэша.

reg.update();

Добавляем над методом console.log(). На самом деле не важно, главное чтобы в коллбэке .then()

window.addEventListener('load', () => if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').then(reg =>  
reg.update(); 
 
console.log('SW registered!'); 
>).catch(err => console.log('SW registration FAIL:', err)); 
>
>);

Вот и всё, перезагружаем страницу. Снова открываем инструменты разработчика, ставим галочку offline в табе Service Workers на боковой панели, ещё раз перезагружаем страницу и наблюдаем за вкладкой Cache Storage. Там можно будет увидеть, как старый кэш сменится новым.

Хочу предупредить, может понадобиться несколько раз перезагрузить страницу, так как на установку нового воркера тоже требуется время (около 2 мин обычно).

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

Узнайте, что такое PWA и как создать прогрессивное веб-приложение для улучшения пользовательского опыта и стабильности работы!

Алексей Кодов
Автор статьи
1 июня 2023 в 9:07

Прогрессивные веб-приложения (PWA, Progressive Web Apps) – это современный подход к разработке веб-приложений, который позволяет предоставить пользователям опыт, сравнимый с опытом использования нативных приложений. PWA сочетают в себе преимущества веб-технологий и мобильных приложений, обеспечивая высокую производительность, оффлайн-доступность и возможность установки на устройство.

Основные характеристики PWA

1. Надежность: PWA должны быть доступны даже при отсутствии или нестабильном интернет-соединении. Это достигается с помощью Service Workers, которые кэшируют данные и обеспечивают их доступность оффлайн.
2. Быстродействие: Прогрессивные веб-приложения должны открываться и работать быстро на любом устройстве и в любых условиях. Это обеспечивается оптимизацией ресурсов, ленивой загрузкой и кэшированием.
3. Устанавливаемость: PWA могут быть установлены на устройство пользователя, как нативное приложение, и запускаться с рабочего стола или главного экрана.

Чтобы создать прогрессивное веб-приложение, необходимо выполнить следующие шаги:

Регистрация Service Worker

Service Worker – это скрипт, который работает в фоновом режиме и отвечает за кэширование, отправку уведомлений и синхронизацию данных. Для регистрации Service Worker добавьте следующий код в файл index.html :

Создание манифеста

Манифест – это JSON-файл, который содержит метаданные о вашем приложении, такие как имя, иконки, цвета и т.д. Создайте файл manifest.json и добавьте в него следующий код:

«name»: «My PWA»,
«short_name»: «PWA»,
«description»: «Пример прогрессивного веб-приложения»,
«start_url»: «/»,
«display»: «standalone»,
«background_color»: «#ffffff»,
«theme_color»: «#000000»,
«icons»: [
«src»: «/icon.png»,
«sizes»: «192×192»,
«type»: «image/png»
>
]
>

Не забудьте добавить ссылку на манифест в ваш index.html :

Организация кэширования

В файле sw.js (Service Worker) определите список ресурсов для кэширования и добавьте обработчики событий install , activate и fetch :

const CACHE_NAME = 'my-pwa-cache'; const CACHE_FILES = [ '/', '/index.html', '/style.css', '/script.js', '/icon.png' ]; self.addEventListener('install', (event) => < event.waitUntil( caches.open(CACHE_NAME).then((cache) => < return cache.addAll(CACHE_FILES); >) ); >); self.addEventListener('activate', (event) => < event.waitUntil( caches.keys().then((cacheNames) => < return Promise.all( cacheNames.map((cacheName) => < if (cacheName !== CACHE_NAME) < return caches.delete(cacheName); >>) ); >) ); >); self.addEventListener('fetch', (event) => < event.respondWith( caches.match(event.request).then((response) => < return response || fetch(event.request); >) ); >);

Теперь ваше приложение будет работать оффлайн и загружаться быстрее благодаря кэшированию ресурсов.

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

Заключение

Создание прогрессивного веб-приложения (PWA) – это отличный способ улучшить пользовательский опыт и повысить стабильность работы вашего веб-приложения. Используйте вышеуказанные шаги и рекомендации для создания своего собственного PWA. Удачи вам в разработке! ��