Или: «ХАХА, почему эта штука не работает ?!»

Сначала небольшая предыстория

Пару лет назад я ушел из мира рекламных агентств, чтобы сосредоточиться на запуске своего стартапа, при этом субсидируя свой доход за счет фриланса. Когда я наконец добрался до настройки своего сайта, я решил попробовать свои силы в React.

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

Легко, правда?

Небольшое раздражение. Огромное влияние.

Несмотря на то, что последние версии iOS лучше поддерживают PWA, по-прежнему нет встроенного запроса для пользователей для установки приложения, как на Android. Это почти сводит на нет цель устанавливаемого веб-приложения просто по той причине, что пользователи iOS не знают, что могут его установить!

В любом случае,

Вот небольшая ловушка React для доставки пользователям iOS уведомления «Добавить на главный экран». Я уверен, что есть способ сделать это лучше, но подумал, что поделюсь тем, что мне подходит.

Хорошо, приступим к кодированию.

Крюк

Вся суть этой ловушки - загрузить уведомление только для Safari на iOS, поэтому мы собираемся создать новый файл с именем useIsIOS.js. В этом коде мы сделаем несколько вещей:

  • Проверьте, просматривает ли кто-нибудь наше приложение на устройстве iOS.
  • Они используют мобильное Safari?
  • Им не предлагалось установить приложение раньше?

Если все вышеперечисленное - true, мы отправим им запрос на установку приложения и в фоновом режиме сохраним hasBeenPrompted элемент в localStorage браузера с отметкой времени.

Начнем с создания состояния для isIOS с помощью useState.

Это довольно просто:

  • const[isIOS, setIsIOS] = useState({}); инициализирует состояние - аналогично setState в функции класса. При инициализации состояние - пустой объект, установивuseState({}).
  • Затем мы используем useEffect для проверки сверху.

На данный момент это ничего не делает, кроме попытки запустить функцию checkForIOS(). Итак, давайте обновим наш файл, чтобы он заработал!

Мы установим moment.js npm install --save moment, а затем импортируем момент в наш хук. Мы используем момент, чтобы устанавливать и проверять временные метки, чтобы узнать, был ли пользователь приглашен для установки нашего приложения и когда.

Перейдя к нашей checkForIOS() функции, мы начнем с установки некоторых переменных, используя момент, включая временную метку для today, lastPrompt (если она существует), и, наконец, число days с момента последнего предложения посетителю установить приложение.

Посмотрев на lastPrompt, вы увидите, что мы пытаемся получить ключ installPrompt из localStorage браузера. Если он существует, мы используем moment() для преобразования его в объект Date, в противном случае он возвращает undefined. Идеально!

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

Проверьте устройства, браузер и ОС

Я пробовал несколько разных вариантов, но, похоже, это самый надежный метод определения Safari и типов устройств на iOS. Мы обновляем нашу checkForIOS() функцию, добавляя старый педантичный JavaScript.

Важно убедиться, что наш посетитель iOS использует Safari, потому что iOS не разрешает другим браузерам устанавливать наши потрясающие PWA!

Подскажем?

Теперь, когда у нас есть метка времени и информация об устройстве, мы можем проверить, должны ли мы отправлять посетителям нашего веб-сайта уведомление об установке нашего PWA.

Глядя на нашу переменную prompt, мы говорим:

  • «Если у нашего посетителя нет сохраненной отметки времени - isNaN(days) - или мы не уведомили его об установке нашего PWA в течение более 30 дней,
  • "И они просматривают наш веб-сайт на устройстве iOS,
  • "И они используют браузер Safari,
  • затем установите prompt в значение true »

В зависимости от того, соответствует ли наш посетитель всем критериям, prompt вернет true или false.

И, наконец, если prompt истинно, сохраните текущую метку времени, today, в localStorage браузера, чтобы мы больше не раздражали наших посетителей всплывающим уведомлением об установке нашего PWA.

Еще кое-что

Хорошо, это все замечательно, но что, если наш посетитель уже установил наш замечательный PWA и просматривает наше приложение там, не через браузер iOS Safari?

Нам просто нужно добавить немного кода:

Проверка navigator.standalone спрашивает: «Наш посетитель использует мобильный браузер Safari или установленный PWA?» Если эта проверка вернет false, все остановится. Это означает, что посетители, установившие и использующие наш замечательный PWA, не получат уведомления об установке.

После всего этого вот как выглядит наш последний хук React:

Модальный

Здесь мы делаем наше уведомление. В моем случае мне пришлось использовать пользовательский хук useModal для своих целей, но существует масса примеров хуков useModal, так что выбирайте то, что вам больше всего подходит.

Использование

Просто импортируйте ловушку useIsIOS и компонент InstallPWA - и вперед!

В этом примере мы загружаем запрос на установку в компоненте домашней страницы с const { prompt } = useIsIOS();

Это обеспечивает нашему компоненту состояние prompt = true/false. Классно, правда?

Итак, теперь мы можем легко загрузить наше уведомление с помощью:

{prompt && <InstallPWA />}

Это фактически означает: «Если наш посетитель использует устройство iOS, и он использует мобильный Safari, и ему не предлагалось в течение последних 30 дней, и они не посещают наш сайт из нашего установленного PWA, а затем показывают им запрос «Добавить на главный экран».

Наконец, спасибо,

Для чтения до конца страницы. Я надеюсь, что это было полезно хотя бы одному человеку. Не стесняйтесь комментировать вопросы, откровения, оскорбления и т. Д.

Вот ссылка на исходный код на GitHub:



MichaelLisboa / сайт-портфолио-реакции
github.com