Как создать адаптивный сайт с поддержкой PWA

Небольшое отступление:

Подробная статья сравнения мобильного сайта с PWA и нативных приложений

Наша платформа по умолчанию поддерживает PWA из коробки.

Спасибо за внимание

В статье рассмотрим вопрос создания PWA-приложений:
1. Заходим на https://www.pwabuilder.com/
2. Генерируем файл манифеста (manifest.json) и размещаем в корне проекта.
3. Проверяем что файл подключен https://www.pwabuilder.com/
4. Формируем Service Worker и подключаем его (решение от https://www.pwabuilder.com/ у меня не заработало, поэтому я взял решение в статье, указанной ниже). Подключение JS можно разместить в _Layout.cshtml перед закрывающим body.
5. Проверяем через плагин LightHouse, что PWA для сайта функционирует.
6. Проверяем через Chrome Console/Application/Service Workers подключенный Worker работает.

Примечания:
1. В Manifest.json обязательно пропишите следующие атрибуты:
theme_color = “#cccccc”,
“related_applications”: [],
“prefer_related_applications” : false,
“start_url” : “/” // обязательно именно / а не полный путь.

2. При регистрации service Worker укажите полный абсолютный путь к JS – https://yadi.sk/i/Vd0QfKuSpklAoQ

3. Если приложение не ставится (кнопка Install App не срабатывает) – то проверьте его здесь и удалите если оно уже было установлено – chrome://apps/. Также проверьте что у вас корректно вызывается событие для window “beforeinstallprompt”

Видео процесса создания PWA для статичной страницы- https://www.youtube.com/watch?v=jvFteVx_Ums
Статья как сделать PWA для ASP.NET MVC5 – https://www.spheregen.com/implementing-pwa-behavior-to-asp-net-mvc-5-apps/

Руслан Раянов