Как включить уведомления в браузере сафари
В нашей предыдущей статье мы объяснили, как включить или отключить push-уведомления в браузере Safari на Mac. Помимо push-уведомлений, многие владельцы веб-сайтов показывают всплывающие уведомления. К счастью, Safari также позволяет блокировать всплывающие окна, и в этой статье мы объясним, как это сделать.
Типы всплывающих окон
- Одно всплывающее окно открывается в новом окне при загрузке страницы.
- Несколько всплывающих окон открывают несколько окон при загрузке страницы.
- Всплывающее окно срабатывает при нажатии на ссылку.
- Наведение указателя мыши на всплывающие окна, запускаемые при наведении курсора мыши без вашего ведома.
- Всплывающие окна, основанные на времени, срабатывают через определенное время на странице.
Почему всплывающие окна раздражают?
В отличие от push-уведомлений, всплывающие окна обычно раздражают по следующим причинам:
- Всплывающие окна отображаются без разрешения на запрос.
- Он открывается в новом окне и меняет фокус на это окно.
- Некоторые всплывающие окна открываются автоматически без вашего разрешения.
- Всплывающая реклама или нерелевантный контент могут отвлекать ваше внимание.
- Множественные всплывающие окна могут зависать или замедлять работу браузера и компьютера.
- Всплывающее окно с небезопасным для работы содержимым может показаться неожиданностью.
Хотя некоторые владельцы веб-сайтов показывают полезный контент во всплывающих окнах, большую часть времени они показывают нерелевантную рекламу. В любом случае вы можете заблокировать всплывающие окна и при необходимости открыть их. В качестве альтернативы вы также можете указать исключение, чтобы Safari разрешал всплывающие окна только с перечисленных веб-сайтов.
Как управлять всплывающими окнами в браузере Safari?
Вы можете заблокировать или разрешить всплывающие окна с веб-сайтов на вкладке «Веб-сайты» в настройках Safari.
- Когда вы находитесь в браузере Safari, перейдите в меню «Safari> Настройки…». Также можно нажать «Command +», чтобы открыть окно настроек.
- Щелкните вкладку «Сайты» и перейдите в раздел «Всплывающие окна».
- Здесь вы можете просматривать и управлять тем, как вы хотите обрабатывать всплывающие окна в браузере Safari.
В отличие от раздела «Уведомления», Safari автоматически отображает все открытые вкладки вместе с уже настроенными веб-сайтами, когда вы переходите в раздел «Всплывающие окна». У вас есть три варианта управления всплывающими уведомлениями с определенного веб-сайта:
Вы можете заблокировать или разрешить уведомления для каждого сайта из раскрывающегося списка. По нашему мнению, вы можете выбрать опцию «Блокировать», чтобы полностью отключить уведомления, если сайт вас раздражает.
Постоянная блокировка всплывающих окон на всех сайтах
Поскольку всплывающие окна отображаются без вашего разрешения, Safari позволяет полностью заблокировать их для всех веб-сайтов. Следуйте приведенным ниже инструкциям, чтобы заблокировать всплывающие окна на всех веб-сайтах:
- Перейдите в раздел «Всплывающие окна» в настройках Safari.
- Щелкните раскрывающийся список напротив параметра «При посещении других веб-сайтов» внизу.
- Вы увидите три варианта: «Заблокировать» и «Уведомить», «Заблокировать» и «Разрешить».
- Выберите вариант «Блокировать» или «Блокировать и уведомлять», чтобы навсегда блокировать всплывающие окна с любых веб-сайтов, кроме тех, которые указаны в списке, для которых вы сохранили определенные предпочтения.
Блокировать всплывающие окна из адресной строки
Apple называет адресную строку Safari полем интеллектуального поиска. Вы также можете управлять настройками всплывающих уведомлений на сайте прямо из этого поля интеллектуального поиска.
- Щелкните правой кнопкой мыши интеллектуальный поиск и выберите параметр «Настройки для этого веб-сайта…». Либо перейдите в меню «Safari> Настройки для этого веб-сайта…».
- Вы увидите несколько вариантов для этого веб-сайта в зависимости от ваших предпочтений.
- Щелкните раскрывающееся меню рядом с параметром «Всплывающие окна» и выберите разрешить или заблокировать всплывающие окна с этого сайта.
Safari автоматически сохранит ваш выбор в разделе настроек «Всплывающие окна».
Связанный: 10 советов по Mac Safari для разработчиков.
Тестирование всплывающего блока
Проверить блокировку всплывающих окон в Safari
Ограничения блокировки всплывающих окон в Safari
Safari имеет множество ограничений при эффективной блокировке всплывающих окон:
- В разделе настроек есть возможность блокировать всплывающие окна только для открытых в данный момент вкладок. К сожалению, вы не можете добавить новый веб-сайт, не посетив его.
- Вы не можете заблокировать поддомены с помощью подстановочного знака. Вам нужно добавлять каждый сайт после посещения и раздражаться.
- Safari не будет блокировать перенаправления, когда веб-сайт пытается показывать всплывающие окна с использованием перенаправления.
Если вы хотите эффективно блокировать всплывающие окна, все вышеперечисленные параметры доступны в Chrome. Возможно, вам придется переключиться на Chrome, чтобы использовать эти функции. Помните, что браузеры могут блокировать всплывающие окна, открывающиеся в новом окне или вкладке. К сожалению, ни один браузер, включая Chrome, не может блокировать всплывающие окна, которые появляются на той же веб-странице, что и полноэкранное, липкое, плавающее или модальное окно. У вас нет другой возможности вручную закрывать эти всплывающие окна каждый раз.
Mac Safari и уведомления
Браузер Safari на Mac показывает запрос уведомлений в соответствии с дизайном веб-сайта. Однако у вас есть несколько вариантов блокировки различных типов уведомлений в целом, а также для определенных веб-сайтов, которые вас раздражают. Процесс уведомления в Safari работает следующим образом:
- Веб-сайт отправляет запрос на push-уведомление.
- Вы подписываетесь на уведомления, разрешив запрос, или можете заблокировать уведомления с этого веб-сайта.
- Если это разрешено, Safari показывает push-уведомления, используя «Центр уведомлений» по умолчанию на вашем Mac.
- При блокировке Safari добавит исключение в настройки веб-сайта, которые вы можете изменить в любое время позже.
Push-уведомления в Safari
Ниже приведен пример подтверждения push-уведомления в браузере Safari на Mac.
Подтверждение push-уведомления в Mac Safari
Связанный: Как настроить макет браузера Safari на Mac?
Разрешить или заблокировать push-уведомления с веб-сайтов в Safari Mac
Когда вы разрешаете или блокируете, Safari автоматически добавляет это в ваши предпочтения и отправляет или блокирует уведомления с этого веб-сайта. Вы также можете вручную разрешить или заблокировать уведомления, следуя приведенным ниже инструкциям:
- Перейдите в меню Safari и нажмите «Настройки…».
- На вкладке «Сайты» перейдите в раздел «Уведомления» на левой боковой панели.
- Здесь вы можете просмотреть список сайтов, для которых вы включили уведомления.
- Выберите сайт и измените разрешение, чтобы разрешить или запретить отправку уведомлений в браузере.
Постоянная блокировка push-уведомлений в Safari Mac
Хорошо то, что веб-сайты не могут отправлять вам уведомления без вашего разрешения. Поэтому вам легко заблокировать запрос для всех сайтов.
- Вернитесь в раздел настроек Safari и перейдите на вкладку «Сайты».
- В разделе «Уведомления» снимите флажок «Разрешить веб-сайтам запрашивать разрешение на отправку push-уведомлений».
Удаление и добавление сайтов в уведомлениях
В Google Chrome у вас есть возможность добавлять веб-сайты для блокировки или разрешения уведомлений. Как видно на скриншотах, Safari не позволяет добавлять сайты для блокировки уведомлений. Что вы можете сделать, так это управлять после того, как вы посетили веб-сайт и разрешили / заблокировали уведомления. Однако в любой момент вы можете выбрать веб-сайты из списка и нажать кнопку «Удалить», чтобы удалить их из списка. Странно, что у вас есть опция удаления без возможности добавления.
Также помните, что Safari не может блокировать встроенные всплывающие уведомления, отображаемые в том же окне браузера. Это та же проблема с Chrome и другими браузерами.
Недавно понадобилось внедрить push уведомления в свои веб сервисы, поискав инструкции в интернете нашел много чего для GCM, Firebase и т.д. но ни одной подробной или пошаговой инструкции для браузера Safari (на macOS, не знаю или будет работать в Windows). В принципе, и Firebase в Safari спрашивал разрешение на уведомление, и даже попадал в настройки, но это всего лишь пыль в глаза, т.к. ясное дело что никаких уведомлений от Firebase браузер получать не хотел.
Делал я все это по вот этой вот инструкции, тут много полезного, но и много чего не хватает, надо постоянно что-то искать и собирать, поэтому решил написать статью от и до: «Как сделать Push уведомления в браузере Safari на macOS» вдруг кому пригодится!
Инструкция подразумевает что у вас есть аккаунт разработчика Apple. Не знаю нужен ли платный, на бесплатном не пробовал (пользуюсь корпоративным).
Шаг 1: Регистрируем Website Push ID
Заходим в свой аккаунт разработчика, и здесь регистрируем новый Website Push ID:
Шаг 2: Запрашиваем сертификат в Связке ключей на MacOS
Заходим в связку ключей, в меню выбираем «Ассистент сертификации» — «Запросить сертификат у бюро сертификации», Вводим свою почту, имя, и выбираем «Сохранен на диске» и выбираем куда сохранить файл.
Шаг 3: Генерируем сертификат
Идём снова в аккаунт разработчика, здесь нажимаем на плюсик, тем самым создаём новый сертификат, выбираем пункт «Website Push ID Certificate», выбираем наш сгенерированный Website Push ID, далее, далее, и потом выбираем сгенерированный во втором шаге файл, после этого нам скажут что всё окей, и дадут скачать файл. Естественно качаем его к себе на компьютер, и дважды кликнув на него добавляем его в свою связку ключей.
Шаг 4: Экспорт ключа и сертификата
Когда я делал это впервые я потратил около часа времени, пока понял что от меня нужно, а магия простая: надо экспортировать не только сертификат, а и ключ! Для этого его необходимо «раскрыть» и по очереди экспортировать как ключ так и сертификат, правой кнопкой на сертификат и выбираем «Экспортировать» и то же самое для ключа. Советую сразу назвать сертификат apns-pro-cert и ключ apns-pro-key, это для того чтобы в следующем шаге просто копировать команды и не переписывать имена файлов на свои. Так же при экспорте укажите пароли, и запомните, при конвертации нужно будет их вводить.
Шаг 5: Конвертация сертификата в p12
Нашел очень классную инструкцию по которой делал конвертацию сертификата в pem формат из p12 (который нужен как для отправки уведомлений, так и для генерации файлов (будет далее)). Нам необходима «Production Phase». Продублирую код тут, а то я попадал на много статей где были указаны ссылки а они оказывались битые.
Внимательно смотрите на шаг 3 (который удаляет пароль) и далее шаг 4 и 5, которые разнятся в зависимости выполняли ли вы шаг 3 или нет, лично я не делал, и оставлял пароль, как делать вам — решайте сами.
Шаг 6: Закидываем сертификаты на сайт
Лучше положить их выше папки докрута чтобы к ним не было доступа из веба, нам из всего полученного нужны будут только 2 файла это: apns-pro.pem — для отправки уведомлений, и apns-pro-cert.p12 для генерации пакета для уведомлений (будет далее).
Шаг 7: Подготавливаем ресурсы
Чтобы браузер разрешил вам получать запросы от вашего сайта необходимо создать правильный пакет файлов, который будет включать в себя иконки, manifest.json, signature, website.json, при первом запросе на уведомления браузер загружает это всё к себе и хранит локально. Для этого делаем такую структуру, кладём это всё в корень нашего сайта.
Шаг 8: Генерация архива
Чтобы получить правильные файлы manifest.json и signature необходимо воспользоваться файлом генерации от Apple. Я его немного подправил, удалил лишнего чуть, этот работает как надо.
Некоторое время назад у них что-то произошло с сертификатом, и для подписи нужно взять их сертификат и подписывать с помощью него: AppleWWDRCA.cer
В коде подписал «Update 2021» чтобы было понятно где менять
Кладём его в докрут и вызываем, он в ответ даст нам сразу файл на загрузку, только назвать его надо будет «pushPackage.zip» Сохраните, распакуйте и проверьте создались ли все нужные файлы (а именно signature).
Шаг 9: Делаем папку v1 (или настраиваем роутинг)
Я делал папку v1, в которую положил нужные файлы, архив, который мы сгенерировали в предыдущем шаге, и файлик index.php для обработки запросов. Необходимо чтобы сайт отвечал на такие запросы:
/v1/pushPackages/ должен отдавать архив в ответ
/v1/devices//registrations/ для регистрации и удаления (GET/POST — DELETE)
/v1/log для логирования ошибок
По роуту /v1/log вам будут приходить ошибки, если вдруг что-то не так. Мне это в первые разы очень помогало, понимал что я не доделал и чинил это.
Шаг 10: Запрашиваем токен из JS'a
У меня на сайте есть и Firebase (для уведомлений в Chrome) и APNS для уведомлений в safari. Чтобы и то и то работало корректно — делаю проверку (приложение на AngularJS):
и функция checkRemotePermission:
И понятное дело функцию sendTokenToServer нет смысла описывать, она на вход принимает токен и тип устройства и сохраняет в базе, с этим, думаю, справитесь.
Шаг 11: Отправка уведомлеиня с бекенда:
Скрипт отправки уведомлений на Safari такой же как и на iOS, просто оставлю его здесь:
Тут всё предельно ясно — вылавливаю все токены пользователя с типом «safari» и шлю уведомления по всем токенам.
Шаг 12: Тестирование
Пробуем запускать сайт, разрешаем уведомления, *смотрим или токен сохранился*, и пробуем отправлять. Пробуйте отправлять с другого браузера, и Safari должен быть закрыт. Если всё сделали правильно — увидите уведомление! Они красивые, красивее чем из Chrome'a, они выглядят как нативные, и приходят чаще, т.к. у меня и Firebase и Safari то вижу что иногда Safari уведомления есть, а вот из Chrome'a не всегда приходят.
Недавно понадобилось внедрить push уведомления в свои веб сервисы, поискав инструкции в интернете нашел много чего для GCM, Firebase и т.д. но ни одной подробной или пошаговой инструкции для браузера Safari (на macOS, не знаю или будет работать в Windows). В принципе, и Firebase в Safari спрашивал разрешение на уведомление, и даже попадал в настройки, но это всего лишь пыль в глаза, т.к. ясное дело что никаких уведомлений от Firebase браузер получать не хотел.
Делал я все это по вот этой вот инструкции, тут много полезного, но и много чего не хватает, надо постоянно что-то искать и собирать, поэтому решил написать статью от и до: «Как сделать Push уведомления в браузере Safari на macOS» вдруг кому пригодится!
Инструкция подразумевает что у вас есть аккаунт разработчика Apple. Не знаю нужен ли платный, на бесплатном не пробовал (пользуюсь корпоративным).
Шаг 1: Регистрируем Website Push ID
Заходим в свой аккаунт разработчика, и здесь регистрируем новый Website Push ID:
Шаг 2: Запрашиваем сертификат в Связке ключей на MacOS
Заходим в связку ключей, в меню выбираем «Ассистент сертификации» — «Запросить сертификат у бюро сертификации», Вводим свою почту, имя, и выбираем «Сохранен на диске» и выбираем куда сохранить файл.
Шаг 3: Генерируем сертификат
Идём снова в аккаунт разработчика, здесь нажимаем на плюсик, тем самым создаём новый сертификат, выбираем пункт «Website Push ID Certificate», выбираем наш сгенерированный Website Push ID, далее, далее, и потом выбираем сгенерированный во втором шаге файл, после этого нам скажут что всё окей, и дадут скачать файл. Естественно качаем его к себе на компьютер, и дважды кликнув на него добавляем его в свою связку ключей.
Шаг 4: Экспорт ключа и сертификата
Когда я делал это впервые я потратил около часа времени, пока понял что от меня нужно, а магия простая: надо экспортировать не только сертификат, а и ключ! Для этого его необходимо «раскрыть» и по очереди экспортировать как ключ так и сертификат, правой кнопкой на сертификат и выбираем «Экспортировать» и то же самое для ключа. Советую сразу назвать сертификат apns-pro-cert и ключ apns-pro-key, это для того чтобы в следующем шаге просто копировать команды и не переписывать имена файлов на свои. Так же при экспорте укажите пароли, и запомните, при конвертации нужно будет их вводить.
Шаг 5: Конвертация сертификата в p12
Нашел очень классную инструкцию по которой делал конвертацию сертификата в pem формат из p12 (который нужен как для отправки уведомлений, так и для генерации файлов (будет далее)). Нам необходима «Production Phase». Продублирую код тут, а то я попадал на много статей где были указаны ссылки а они оказывались битые.
Внимательно смотрите на шаг 3 (который удаляет пароль) и далее шаг 4 и 5, которые разнятся в зависимости выполняли ли вы шаг 3 или нет, лично я не делал, и оставлял пароль, как делать вам — решайте сами.
Шаг 6: Закидываем сертификаты на сайт
Лучше положить их выше папки докрута чтобы к ним не было доступа из веба, нам из всего полученного нужны будут только 2 файла это: apns-pro.pem — для отправки уведомлений, и apns-pro-cert.p12 для генерации пакета для уведомлений (будет далее).
Шаг 7: Подготавливаем ресурсы
Чтобы браузер разрешил вам получать запросы от вашего сайта необходимо создать правильный пакет файлов, который будет включать в себя иконки, manifest.json, signature, website.json, при первом запросе на уведомления браузер загружает это всё к себе и хранит локально. Для этого делаем такую структуру, кладём это всё в корень нашего сайта.
Шаг 8: Генерация архива
Чтобы получить правильные файлы manifest.json и signature необходимо воспользоваться файлом генерации от Apple. Я его немного подправил, удалил лишнего чуть, этот работает как надо.
Некоторое время назад у них что-то произошло с сертификатом, и для подписи нужно взять их сертификат и подписывать с помощью него: AppleWWDRCA.cer
В коде подписал «Update 2021» чтобы было понятно где менять
Кладём его в докрут и вызываем, он в ответ даст нам сразу файл на загрузку, только назвать его надо будет «pushPackage.zip» Сохраните, распакуйте и проверьте создались ли все нужные файлы (а именно signature).
Шаг 9: Делаем папку v1 (или настраиваем роутинг)
Я делал папку v1, в которую положил нужные файлы, архив, который мы сгенерировали в предыдущем шаге, и файлик index.php для обработки запросов. Необходимо чтобы сайт отвечал на такие запросы:
/v1/pushPackages/ должен отдавать архив в ответ
/v1/devices//registrations/ для регистрации и удаления (GET/POST — DELETE)
/v1/log для логирования ошибок
По роуту /v1/log вам будут приходить ошибки, если вдруг что-то не так. Мне это в первые разы очень помогало, понимал что я не доделал и чинил это.
Шаг 10: Запрашиваем токен из JS'a
У меня на сайте есть и Firebase (для уведомлений в Chrome) и APNS для уведомлений в safari. Чтобы и то и то работало корректно — делаю проверку (приложение на AngularJS):
и функция checkRemotePermission:
И понятное дело функцию sendTokenToServer нет смысла описывать, она на вход принимает токен и тип устройства и сохраняет в базе, с этим, думаю, справитесь.
Шаг 11: Отправка уведомлеиня с бекенда:
Скрипт отправки уведомлений на Safari такой же как и на iOS, просто оставлю его здесь:
Тут всё предельно ясно — вылавливаю все токены пользователя с типом «safari» и шлю уведомления по всем токенам.
Шаг 12: Тестирование
Пробуем запускать сайт, разрешаем уведомления, *смотрим или токен сохранился*, и пробуем отправлять. Пробуйте отправлять с другого браузера, и Safari должен быть закрыт. Если всё сделали правильно — увидите уведомление! Они красивые, красивее чем из Chrome'a, они выглядят как нативные, и приходят чаще, т.к. у меня и Firebase и Safari то вижу что иногда Safari уведомления есть, а вот из Chrome'a не всегда приходят.
Читайте также: