Простое PWA для сайта

Простое PWA приложение для сайта

Progressive web application (PWA) — прогрессивное веб-приложение, это технология для отображение сайта в отдельном приложении. Эту технологию развивает гугл, Apple еще не учитывает всех нюансов.

При запуске со смартфона на android высвечивается запрос на установку приложения в один клик. На рабочем столе появится ярлык для быстрого доступа к сайту, не нужно качать .арк файл, давать дополнительных разрешений. На iOs автоматического запроса нет (пока); установка происходит через — Расшарить — На экран «Домой». К тому же, iOs не всегда подтягивает иконку, название с manifest, кеширует меньше файлов.

Как сделать pwa для сайта

Если вкратце: создаем манифест, service-worker, ставим на сайт.

Manifest.json для pwa

Все файлы в принципе могут называться как угодно, просто так принято. Файл manifest:

short name — название на главном экране;
name — при запуске;
icons — массив с размерами; можно задать больше или меньше разрешений, можно разные иконки прописать;
start_url — какая страница сайта будет открываться;
orientation — можно задать только горизонтальную, вертикальную или в любом положении экрана;
display — standalone, как отдельное приложение, со статус баром. Можно задать еще 3 варианта: Fullscreen (на весь экран, без статус бара), Minimal-UI (будет строка с url и кнопкой Меню как в браузере), Browser (как в браузере).

Остальное цвета. Это не все функции, для примера.

Service-worker файл для pwa

Файл-обработчик самого приложения.

Задаем путь к manifest.json, кешируем или нет и что кешируем. Внимательно проверяйте пути к файлам.

Установка файлов на сайт для pwa

Дальше задаем путь к файлам на нужных страницах. При использовании движков достаточно задать в header, footer коде.

Путь к файлу manifest, размещаем в заголовке.

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

Также однотипные файлы/скрипты можно объединять для оптимизации. Например, у вас все js-скрипты в одном файле — подключите и этот. Все json в отдельной папке — положите манифест туда.

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

Также можно использовать нестандартную форму запроса, «отлавливать» установил пользователь приложение или нет. Еще высвечивать инструкцию если пользователь зашел с айфона. По нестандартной форме запроса, например через поп-ап окно, я напишу позже.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *