Архив: Всплывающие окна на iOS и Android [PWA приложение]

Описание

Реализована PWA приложение через PWABuilder

Все корректно работает, но всплывающие окна появляются только в браузере Chrome на андроиде на главной странице, а нужно:



1. Красиво оформить всплывающие окно, примерно как на сайте: https://makeup.com.ua (видно только с телефонов)

- Окно должно показывать 1 раз, если он его закрыл, то не показывать повторно после обновления страницы ( пометить как-то это в localstorage или кэше или как это делается время жизни кэша 10 дней поставить, через 10-ть дней можно показать еще раз)

- Если у пользователя уже установлено PWA приложение на рабочем столе (iOS или Android), то не нужно показывать это окно, если удалил, то показывать соблюдая 1-ое условие.

- для iOS в браузере Safari показывать одно сообщение (как на сайте: https://makeup.com.ua) зайдите под эмулятором iOS (в других браузера на айфоне вроде не работает)

- для Android в Google Chrome показывать другое сообщение, сразу с кнопкой установки (как на сайте: https://makeup.com.ua) зайдите под эмулятором Android. (в других браузеров на андроиде вроде не работает, но уточнить этот момент)



Итого:

если iOS и Safari

показать всплывающее окно



если Android и Chrome или любой другой браузер который поддерживает PWA

показывать другое всплывающее окно с рабочей кнопкой PWA установить приложение на рабочий стол



если же на этих устройствах уже установлено приложение

то не показываем окно



если же пользователь закрыл всплывающее окно

то не показываем его 10-ть дней



2. Как-то отслеживать у скольки пользователей установлено данное приложение, через Google analitics можно, через метку в manifest.json при установке приложения. Или может как-то еще можно сделать.



Использую jquery и bootstrap.css и magnificPopup - тонну сторонних библиотек не хочу подключать, желательно все это реализовать штатными средствами js - jquery



PWA внедряли по аналогии с этим 15-ти минутным видео

https://www.youtube.com/watch?v=jvFteVx_Ums



Удобнее всего общаться в телеграмме, сразу пишите свой ник

Требования: ранее имели дело в PWA

Категория

Веб-программирование