PWA приложение
Чтобы иметь возможность просматривать сайт в оффлайн режиме, можно создать PWA приложение с расширенным кешированием контента. Это позволит кешировать на стороне устройства ранее просмотренные страницы, а также можно указать предварительный список страниц, которые будут закешированы при установки приложения.
Итак, начнем. Для простого примера решил сделать для лендинга cms.modxgurur.ru/
1. Он должен работать на защищенном протоколе https, т.е. иметь установленный SSL сертификат
2. Сайт должен быть адаптивным.
Остальные моменты можно будет настроить.
Поможет определить все требования к сайту дополнение для GoogleChrome под названием Lighthouse. Устанавливаем его. Открываем нужный сайт и запускаем анализатор.
В настройках оставляем только pwa
Генерируем отчет.
Следующая задача — исправить все замечания.
Для начала нам нужно разместить service-worker и файл манифеста. Будем использовать готовые сервисы для генерации содержимого данных файлов.
Заполняем поля будущего PWA приложения:
где,
AppName — название приложения при запуске
ShortName — название на иконке приложения
ThemeColor — цвет фона верхней строки устройства.
BackgrounColor — цвет заставки при запуске приложения
DisplayMode — указываем Standalone
Подготавливаем изображение размером 512x512 с непрозрачным фоном для генерации иконок
Скачиваем архив и загружаем в корень проекта
В блок head добавляем метатег
Открываем сервис www.pwabuilder.com/serviceworker
Выбираем Advanced caching. Скачиваем файлы и кладем их в корень сайта.
Внизу страницы подключаем pwabuilder-sw-register.js
Снова проводим анализ Lighthouse и устраняем оставшиеся недочеты.
В блоке Installable и PWA Optimized не должно остаться замечаний, чтобы приложение скачивалось при просмотре сайта.
Открываем сайт в браузере мобильного устройства — PWA приложение должно попросится к установке.
Итак, начнем. Для простого примера решил сделать для лендинга cms.modxgurur.ru/
Требования к сайту
Каким требованиям должен отвечать сайт:1. Он должен работать на защищенном протоколе https, т.е. иметь установленный SSL сертификат
2. Сайт должен быть адаптивным.
Остальные моменты можно будет настроить.
Поможет определить все требования к сайту дополнение для GoogleChrome под названием Lighthouse. Устанавливаем его. Открываем нужный сайт и запускаем анализатор.
В настройках оставляем только pwa
Генерируем отчет.
Следующая задача — исправить все замечания.
Для начала нам нужно разместить service-worker и файл манифеста. Будем использовать готовые сервисы для генерации содержимого данных файлов.
Подготовка манифеста для PWA
Для генерации манифеста воспользуемся сервисом app-manifest.firebaseapp.com/Заполняем поля будущего PWA приложения:
где,
AppName — название приложения при запуске
ShortName — название на иконке приложения
ThemeColor — цвет фона верхней строки устройства.
BackgrounColor — цвет заставки при запуске приложения
DisplayMode — указываем Standalone
Подготавливаем изображение размером 512x512 с непрозрачным фоном для генерации иконок
Скачиваем архив и загружаем в корень проекта
В блок head добавляем метатег
<link rel="manifest" href="manifest.json">Сборка service-worker для pwa
Далее собираем service-worker.jsОткрываем сервис www.pwabuilder.com/serviceworker
Выбираем Advanced caching. Скачиваем файлы и кладем их в корень сайта.
Внизу страницы подключаем pwabuilder-sw-register.js
<script src="/pwabuilder-sw-register.js"></script>Дополнительные файлы для устройств
В блок head добавляем данные для устройств: цвет фона и путь до значка<meta name="theme-color" content="#FFFFFF">
<link rel="apple-touch-icon" href="images/icons/icon-192x192.png">Снова проводим анализ Lighthouse и устраняем оставшиеся недочеты.
В блоке Installable и PWA Optimized не должно остаться замечаний, чтобы приложение скачивалось при просмотре сайта.
Открываем сайт в браузере мобильного устройства — PWA приложение должно попросится к установке.
Нет комментариев