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

Превращение веб-сайта в высококачественное приложение PWA

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

Шаг 1. Создание карта отчета в Построителе PWA

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

1. Перейдите к Построителю PWA
2. Введите URL-адрес веб-сайта, который вы хотите преобразовать в PWA, и нажмите кнопку Пуск.
3. В построителе PWA отобразится карточка отчета PWA, указывающая функции, которые есть у вашего веб-сайта и отсутствуют.

Шаг 2. Проверка карточки отчета PWA

Карточка отчета PWA содержит оценку вашего веб-сайта из максимального значения 100. Оценки основаны на трех категориях функций.

манифеста

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

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

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

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

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

Рабочая роль службы

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

1. В меню выберите вкладку Параметры рабочей роли службы .
2. Выберите соответствующую рабочую роль службы из курированного списка. Обратите внимание, что существует множество предварительно созданных параметров. убедитесь, что выбрана рабочая роль службы, наиболее подходящая для конкретного варианта использования.
3. Выбрав рабочую роль службы, которую вы хотите использовать, вы вернетесь в карточку отчета PWA.

Безопасность

Все PWA, созданные с помощью PWA Builder, требуют трех протоколов безопасности.

1. Сайт должен использовать ПРОТОКОЛ HTTPS.
2. У сайта должен быть соответствующий сертификат HTTPS. Если на веб-сайте нет сертификата HTTPS, вы можете опубликовать его в Azure, чтобы получить встроенную поддержку HTTPS. Кроме того, существуют бесплатные сторонние средства, такие как Letsencrypt , которые позволяют получить сертификат HTTPS бесплатно.
3. Сайт не должен содержать смешанное содержимое. Смешанное содержимое — это когда страница, обслуживаемая по протоколу 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

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

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

Что такое PWA?

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

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

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

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

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

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

Как создать PWA

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

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

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

• name: имя, используемое в запросе на установку приложения.
• short_name: короткое имя, используемое на домашнем экране пользователя, в программе запуска или в других местах с ограничением места.
• start_url: сообщает браузеру стартовый URL-адрес приложения.
• display: предоставляет возможность настройки отображения UI браузера при запуске приложения. Наиболее часто используемое значение — standalone: оно открывает веб-приложение, которое выглядит как автономное нативное приложение.
• background_color: используется на заставке при запуске приложения.
• theme_color: устанавливает цвет панели инструментов.
• orientation: усиливает определенную ориентацию.
• scope: определяет набор URL-адресов, находящихся в приложении и обычно используется для определения момента выхода пользователя из приложения.
• icons: когда пользователь добавляет сайт на домашний экран, можно определить набор используемых браузером изображений.

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

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

• выполнять перехват сетевых запросов
• кэшировать или извлекать ресурсы из кеша
• доставлять push-увевомления

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

• Регистрация: сообщает браузеру местонахождение воркера и начинает установку в фоновом режиме.
• Установка: запускает событие установки, в котором можно выполнять некоторые задачи при установке сервис-воркера.
• Активация: при наличии открытых страниц, контролируемых предыдущим сервис-воркером, новый сервис-воркер переходит в состояние ожидания и активируется только при отсутствии загружаемых страниц, которые все еще использует старый.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начнем с manifest.json

 "name": "Name Website", 
"short_name": "NameWebsite", 
"start_url": "/index.html", 
"display": "standalone", 
"background_color": "#F4F4F4", 
"theme_color": "#F4F4F4", 
"orientation": "portrait-primary", 
"icons": [ 
 "src": "/assets/images/logo-72x72.png", 
"type": "image/png", 
"sizes": "72x72" 
>, 
 "src": "/assets/images/logo-96x96.png", 
"type": "image/png", 
"sizes": "96x96" 
>, 
 "src": "/assets/images/logo-128x128.png", 
"type": "image/png", 
"sizes": "128x128" 
>, 
 "src": "/assets/images/logo-144x144.png", 
"type": "image/png", 
"sizes": "144x144" 
>, 
 "src": "/assets/images/logo-152x152.png", 
"type": "image/png", 
"sizes": "152x152" 
>, 
 "src": "/assets/images/logo-192x192.png", 
"type": "image/png", 
"sizes": "192x192" 
>, 
 "src": "/assets/images/logo-384x384.png", 
"type": "image/png", 
"sizes": "384x384" 
>, 
 "src": "/assets/images/logo-512x512.png", 
"type": "image/png", 
"sizes": "512x512" 
> 
]
>

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

if('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js') 
.then(reg => console.log('service worker registered')) 
.catch(err => console.log('service worker not registered', err));
>

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

const staticCacheName = 'site-static-v1';
const assets = [ 
'/', 
'/index.html', 
'/assets/js/ui.js', 
'/assets/css/main.css', 
'/assets/images/background-home.jpg', 
'https://fonts.googleapis.com/css?family=Lato:300,400,700',
];// событие install
self.addEventListener('install', evt => evt.waitUntil( 
caches.open(staticCacheName).then((cache) => console.log('caching shell assets'); 
cache.addAll(assets); 
>) 
);
>);// событие activate
self.addEventListener('activate', evt => evt.waitUntil( 
caches.keys().then(keys => return Promise.all(keys 
.filter(key => key !== staticCacheName) 
.map(key => caches.delete(key)) 
); 
>) 
);
>);// событие fetch
self.addEventListener('fetch', evt => evt.respondWith( 
caches.match(evt.request).then(cacheRes => return cacheRes || fetch(evt.request); 
>) 
);
>);

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

Событие Install

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

Событие Activate

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

Событие Fetch

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

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

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

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

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

const dynamicCacheName = 'site-dynamic-v1';// событие activate
self.addEventListener('activate', evt => evt.waitUntil( 
caches.keys().then(keys => return Promise.all(keys 
.filter(key => key !== dynamicCacheName) 
.map(key => caches.delete(key)) 
); 
>) 
);
>);// событие fetch
self.addEventListener('fetch', evt => evt.respondWith( 
caches.match(evt.request).then(cacheRes => return cacheRes || fetch(evt.request).then(fetchRes => return caches.open(dynamicCacheName).then(cache => cache.put(evt.request.url, fetchRes.clone()); 
return fetchRes; 
>) 
>); 
>) 
);
>);

Событие Active

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

Событие Fetch

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

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

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

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

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

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

• Компоновщик в JavaScript
• Шаблон Медиатор в JavaScript
• Знакомство с промисами в JavaScript

Разработка приложения на базе сайта WordPress с применением PWA

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

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

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

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

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

Вкратце, PWA – это программное обеспечение, которое использует самые современные техники веб-программирования. Обычно PWA может предлагать уведомления с помощью JavaScript. Он может быть легко обновлен, и не требует никаких сложных установочных шагов. Кроме того, он должен работать для каждого пользователя независимо от типа браузера и считаться безопасным (обычно благодаря доставке через безопасный HTTPS).

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

Почему следует превратить свой сайт в прогрессивное веб-приложение

Сравнивая веб-сайты, веб-приложения и мобильные приложения, один из элементов, о котором следует подумать, – это уведомления. Исследования показывают, что пользователи, получающие push-уведомления, имеют на 88% более высокий уровень участия. Традиционные веб-сайты обычно не предлагают эту опцию, но создав PWA, вы можете включить эту функциональность без потенциально сложного процесса, который может потребоваться для мобильного приложения.

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

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

Плагины для быстрой сборки веб-приложений на базе WordPress

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

Плагин PWA – мой выбор

Скромный плагин со скромным названием PWA https://wordpress.org/plugins/pwa/

Но если вчитаться – то увидим что в его разработке принимают участие лучшие эксперты и разработчики ядра WordPress и даже ребята из Google.

В общем ставится легко и просто практически на любой сайт.

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

Super Progressive Web Apps

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

Преимущества:

• Быстрая и простая установка и настройка
• Управление иконкой вашего PWA и другими элементами стиля
• PWAs также можно получить через поисковые системы

Недостатки:

• Офлайн можно просматривать только кэшированные страницы
• Ограниченные возможности оповещения push при использовании на iOS
• Нет поддержки Google Analytics

Стоимость:

WordPress Mobile Soft

Еще один вариант плагина – WordPress Mobile Soft. Этот инструмент позволяет вам настроить PWA, не влияя на вашу основную тему, а также обеспечивает готовность функции для мобильных устройств. Кроме того, вы сможете использовать URL, оптимизированный для поисковых систем, что позволит посетителям легко переходить на ваш PWA.

Преимущества:

• SEO-дружественный URL
• Не повлияет на вашу тему
• Можно выбрать использование PWA на рабочем столе и мобильном устройстве

Недостатки:

• Не был протестирован с последними версиями WordPress
• Может не поддерживать все дополнения WordPress

Стоимость:

PWA для WP & AMP

Еще один популярный вариант – плагин PWA для WP & AMP. Это решение позволяет создавать PWAs для ваших веб-сайтов и Accelerated Mobile Pages (AMP). Вы сможете предоставить иконку для домашнего экрана вашим пользователям сайта, а также офлайн-доступ.

Преимущества:

• Поддерживает мультисайт и оповещения push OneSignal
• Непрерывное развитие и улучшение плагина
• Предоставляет панель управления статусом для мониторинга PWA

Недостатки:

• Функции Call-to-Action, Pull to Refresh и другие важные функции доступны только в платной версии

Стоимость:

• Freemium: использование одного лицензионного ключа начинается от $ 49 в год

Progressive WordPress (PWA)

Progressive WordPress позволяет пользователям получить опцию «Добавить на домашний экран» и работать как нативное мобильное приложение. Вы также получаете поддержку оповещений push и AMP.

Преимущества:

• Отправляйте оповещения push из панели управления WordPress admin
• Поддерживает AMP
• Предварительно кэширует ресурсы для быстрой загрузки

Недостатки:

• Если не используются совместимые плагины AMP, необходима ручная настройка
• Совместимость с оповещениями push iOS – это улучшение в ожидании

Стоимость:

PWA для WordPress

PWA для WordPress создает PWA вашего веб-сайта с установкой только двух файлов.

Преимущества:

• Настройте время истечения кэша
• Поддержка мультисайтов
• Выберите, какие URL исключить из кэша PWA

Недостатки:

• Не был протестирован с последними версиями WordPress
• Не является широко установленным выбором плагина для создания PWA

Стоимость:

Разработка веб-приложений в WordPress

WordPress может быть основой для разработки приложений. Однако для этого необходимо понимание пользовательского опыта (UX), HTML, CSS, PHP и JavaScript. Даже создание базового плагина может занять время на изучение.

Что касается PWA, здесь много преимуществ. Однако одним из ключевых преимуществ является экономия времени при воспроизведении завершенного приложения на нескольких производственных сайтах. Для этого вам, вероятно, захочется обратиться к «Service Workers».

Что такое Service Workers в WordPress PWA?

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

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

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

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

Вам также нужно будет выбрать как фреймворк для бэк-энда, так и для фронт-энда. Конечно, WordPress будет вашей системой управления контентом (CMS) для бэк-энда, но вам также захочется выбрать подходящий стек серверов, такой как XAMPP.

Ваш выбор для фронт-энда будет более изощренным при работе с WordPress. Многие выбирают Bootstrap или AngularJS, хотя ReactJS Facebook и Backbone.js также популярны:

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

Это часть того, для чего разработано специальное WordPress Application Framework – упростить процесс создания. Он делает это, предоставляя решения для распространенных ошибок в коде и предлагая актуальные ресурсы для разработчиков.

Progressive Web Apps также работают для ПК как десктоп приложения

Как мы упомянули в начале этого поста, теперь возможно использовать PWAs с десктопными браузерами. Эта функциональность доступна для Mac, Chrome OS, Linux и Windows, начиная с версии браузера Chrome 73.

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

Следуйте рекомендациям PWA от Google

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

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

• Сайты обслуживаются по безопасному HTTPS.
• Страницы разработаны с учетом ответной реакции для планшетов и мобильных устройств.
• Все URL приложения загружаются в автономном режиме.
• Для функции «Добавить на домашний экран» должны быть предоставлены метаданные.
• Загрузка должна быть быстрой даже на 3G-сетях.
• Сайты должны быть совместимы с разными браузерами.
• Переходы между страницами быстрые и плавные, независимо от статуса сети.
• Каждая страница должна иметь URL.

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

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

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

Что же такое это волшебное 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 ��

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

  1. Как поднять строку вверх в тексте
  2. Как получить сегодняшнюю дату с
  3. Как разблокировать печать штамп colop
  4. Как распечатать фотографию на весь лист а4