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, aplicativos criados com webtoapp.design pedem automaticamente permissão no terceiro lançamento do aplicativo. Se você quiser personalizar este comportamento para seu aplicativo, você 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>