ES2019 и веб-платформа, помимо других функций, теперь имеют новый Permission API. Этот API не имеет дело с разрешениями, предоставленными пользователю для выполнения каких-либо действий на сайте, а с разрешениями, предоставленными пользователем сайту для выполнения каких-либо действий, или используйте устройство на стороне клиента.

Что у нас было до сих пор?

Допустим, мы хотели использовать уведомления, нам нужно сначала запросить разрешение, а затем использовать API уведомлений.

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

Две проблемы, которые могут возникнуть у нас с этим API

  1. Этот API предназначен только для уведомлений, это может быть не такой уж большой проблемой, но тот факт, что запрос разрешений отличается от одного API к другому, может раздражать.
  2. Невозможно или не было способа узнать, сделал ли пользователь что-то с предоставленным им разрешением, и поэтому мы можем запрашивать разрешение каждый раз, когда мы будем использовать эту функцию, которая может сделать наш код немного беспорядочно.

Итак, для чего нужен этот новый API?

От MDN: API разрешений обеспечивает последовательный программный способ запроса статуса разрешений API, приписываемых текущему контексту, например, предоставлено ли разрешение на использование API или отказано, и будет ли пользователю задан вопрос о том, должно ли разрешение быть предоставляется для API.

Это означает, что что касается разрешений, у нас есть один способ запрашивать, запрашивать и отзывать их программно.

Объект разрешений

К объекту разрешений вы обращаетесь через API. он существует в navigator.permissions, у него есть три метода (или четыре, если вы считаете requestAll) query, request и revoke, все три метода возвращают обещание объекта PermissionStatus, а requestAll возвращает обещание массива того же объекта.
Все методы ожидают объект с одним членом {имя: ‘ваше имя разрешения’}. Итак, если вы хотите узнать, в каком состоянии находится ваше разрешение на уведомление (не запрашивая его), вы можете сделать следующее:

Объект PermissionStatus выглядит следующим образом:

Члены статуса разрешения - это состояние ('предоставлено' | 'приглашение' | 'отказано') и onchange, в котором as должен иметь обработчик событий в любом случае, когда разрешение меняет свое состояние.

Запрос разрешения

Другой метод navigator.permissions - это метод request. Он имеет тот же ввод и вывод, что и метод query, только он подсказывает пользователю, что мы хотим иметь разрешение, которое он нам предоставит.
Этот код не вызовет любой запрос, если состояние разрешения «отказано» или «предоставлено».

Запрос нескольких разрешений

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

На видео ниже вы можете увидеть, как работает метод requestAll.

Https://vimeo.com/user99125922/review/339314974/a86f8af16d

Отзыв разрешения

Эти новые полезные функции позволяют нам хорошо относиться к нашим пользователям, программно отозвать разрешение и установить для него состояние «подсказка».

Обработка изменения разрешения

Хотя наш код должен быть очень мощным, пользователь должен иметь преимущество, и он / она может изменить статус разрешения, не только с помощью нашего кода, и они, вероятно, могут отозвать его.
Для этого мы можем иметь onchange объекта статуса, чтобы справиться с этим. в следующем примере мы покажем им предупреждение (что не очень приятно, не делайте этого со своими пользователями).

Давай завернем

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