Генератор PWA

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

Настройки приложения

Название приложения

Короткое название

Описание приложения

Стартовая страница при запуске приложения

Нужно указать относительный путь без домена, пример "/catalog". Если при запуске приложения нужно открыть главную страницу сайта, просто оставьте как есть.

Область действия

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

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

Расположение иконок для приложения

Загрузите файлы иконок в формате .png в папку на своём сервере и укажите их местоположение ниже.

Размер всех иконок должен быть, как указано ниже.

Указывайте относительный путь, например /images/icons/512.png

Иконка 512 x 512 px

Иконка 256 x 256 px

Иконка 128 x 128 px

Какие файлы нужно закешировать?

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

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

Следует понимать, что в случае кэширования страницы в приложении, приложение может отображать сохранённый вариант даже после того как содержимое страницы изменилось на вашем сайте. Указывайте только те страницы, которые ТОЧНО можно закэшировать.

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

один адрес в строке, например:
/style/styles.css
/index.html
/contact.html

Отправить донат Добавить комментарий Поделиться ссылкой Подписаться на автора в ТГ

Подробнее о приложении

Nil

14 марта 2023

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

Заполните все поля, получите код, создайте нужные файлы согласно описанию и вставьте рекомендуемый код на страницы своего сайта.

Смотрите также детальную инструкцию в специальном посте: Как сделать из сайта PWA приложение. Инструкция для начинающих

Генератор PWA

Подробнее о приложении

Другие приложения

Комментарии