Como mostrar o prompt de permissão de notificação Push?

Por um bom tempo os usuários do iOS tiveram que pedir permissão antes que você pudesse enviá-los notificações push. Desde o Android 13, isto também se aplica aos usuários do Android.

Por padrão, apps criados com webtoapp.design pedem automaticamente permissão após um certo número de vezes que o app foi aberto. Você pode ajustar esse número nas configurações de notificação push.

Se você quiser solicitar a permissão de notificação push em outros momentos durante o uso do seu app, pode usar as seguintes funções JavaScript.

Usando as funções do JavaScript

notificationPermissionsGranted

Use esta função, quando você quiser verificar se o usuário concedeu permissões de notificação push.

<script>
    try {
        // returns true or false
        let granted = (await notificationPermissionsGranted())["granted"];
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        // - the app couldn't get the push notification permission status. Should be very unlikely.
        // - push notifications are not included in your current plan
        console.log(e);
    }
</script>
    

requestNotificationPermissions

Use esta função, quando você quiser mostrar o prompt de permissão de notificação push.

A função toma um parâmetro booleano que determina se as configurações devem ser abertas, caso o pedido de permissão regular tenha sido rejeitado anteriormente. Veja os capturas de tela das páginas de configurações que seriam abertas no Android e iOS:

Como este comportamento pode ser confuso para os usuários, você só deve definir o parâmetro como verdadeiro, se o usuário indicar explicitamente que deseja habilitar as notificações push. Se o parâmetro for definido como falso, a função pode ser um no-op no caso de pedidos de permissão anteriores não terem sido concedidos.

<script>
    try {
        let openSettingsIfNecessary = false;

        // doesn't return anything
        await requestNotificationPermissions(openSettingsIfNecessary);
    }
    catch (e) {
        // Can occur if:
        // - the app couldn't connect to the native code. Should be very unlikely.
        // - the app couldn't ask for push notification permissions. Should be very unlikely.
        // - push notifications are not included in your current plan
        console.log(e);
    }
</script>