Push web AMP

AMP est un framework open-source de Google pour développer des pages web axées sur l’utilisateur qui se chargent quasi instantanément.

En intégrant le composant AMP Web Push dans vos pages web AMP, vous pouvez contacter vos clients lorsqu’ils naviguent sur le web via leurs navigateurs mobiles.

Intégrer AMP à votre site web

Ajoutez les fichiers suivants au répertoire racine de votre site web :

Il y a deux blocs personnalisables dans le fichier permission-dialog.html :

<div class="subscribe" permission="default">
    <p class="message">
    {S'abonner aux notifications push}
    </p>
</div>

<div class="blocked" permission="denied">
    <p class="message">
    {Débloquer les notifications push dans les paramètres de votre navigateur}
    </p>
</div>

Où :

{S'abonner aux notifications push} — un message d’appel à l’action demandant aux utilisateurs d’autoriser les notifications push ;
{Débloquer les notifications push dans les paramètres de votre navigateur} — un message d’appel à l’action invitant les utilisateurs à débloquer les notifications push dans les paramètres de leur navigateur (au cas où les notifications push seraient explicitement bloquées par un utilisateur).

Pour personnaliser l’apparence de la boîte de dialogue de permission, ajoutez le code suivant à la balise <head> :

 <style amp-custom>
    .subscribe {
        /* your css here */
    }

    .blocked {
        /* your css here */
    }
</style>

Intégrer les notifications push web AMP

Pour implémenter les notifications push web sur les pages AMP, ajoutez le composant amp-web-push à chaque page AMP.

Pour ce faire, suivez ces deux étapes :

1. Ajoutez le script suivant à la balise <head> :

<head>
    ...
    <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
    ...
</head>

2. Ajoutez le code suivant à la balise <body> :

<body>
    <amp-web-push
    id="amp-web-push"
    layout="nodisplay"
    helper-iframe-url="https://{domain}/helper-iframe.html"
                 permission-dialog-url="https://{domain}/permission-dialog.html"
service-worker-url="https://{domain}/service-worker.js?applicationCode={applicationCode}&senderId={senderId}&applicationServerKey={applicationServerKey}"
    ></amp-web-push>
    ...
    <!-- Start Subscribe to notifications button -->
    <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
    <button class="subscribe" on="tap:amp-web-push.subscribe">
        {Texte sur le bouton S'abonner}
    </button>
    </amp-web-push-widget>
    <!-- End the Subscribe to notifications button -->
    <!-- Start Unsubscribe from notifications button -->
    <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
    <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">
        {Texte sur le bouton Se désabonner}
    </button>
    </amp-web-push-widget>
    <!-- End Unsubscribe from notifications button -->
    <!-- Start Fallback if a user blocks notifications -->
    <amp-web-push-widget visibility="blocked" layout="fixed" width="250" height="80">
    <div class="fallback">
            {Solution de repli si un utilisateur bloque les notifications}
        </div>
    </amp-web-push-widget>
    <!-- End Fallback if a user blocks notifications -->
...
</body>

Où :

{domain} — l’URL de votre site web,
{applicationCode} — le code de votre application Pushwoosh,
{senderId} — l’ID d’expéditeur de votre console Firebase,
{applicationServerKey} — la clé de serveur de votre console Firebase,
{Texte sur le bouton S'abonner} — un texte sur un bouton activant les notifications push,
{Texte sur le bouton Se désabonner} — un texte sur un bouton désactivant les notifications push,
{Solution de repli si un utilisateur bloque les notifications} — un bloc de repli qui s’affiche lorsqu’un utilisateur bloque les notifications push.

Pour personnaliser le style des boutons, ajoutez le code suivant à la balise <head> :

<style amp-custom>
    amp-web-push-widget button.subscribe {
        /* your css here */
    }
    amp-web-push-widget button.unsubscribe {
        /* your css here */
    }
    amp-web-push-widget .fallback {
        /* your css here */
    }
</style>

Pour vérifier si vous avez tout fait correctement, veuillez utiliser https://search.google.com/test/amp\