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 atteindre 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 :

Le fichier permission-dialog.html contient deux blocs personnalisables :

<div class="subscribe" permission="default">
    <p class="message">
    {Subscribe to push notifications}
    </p>
</div>

<div class="blocked" permission="denied">
    <p class="message">
    {Unblock push notifications in your browser settings}
    </p>
</div>

Où :

{Subscribe to push notifications} — un message d’appel à l’action (CTA) demandant aux utilisateurs d’autoriser les notifications push ;
{Unblock push notifications in your browser settings} — un message d’appel à l’action (CTA) 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">
        {Text on Subscribe button}
    </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">
        {Text on Unsubscribe button}
    </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">
            {Fallback if a user blocks 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 (Sender ID) de votre console Firebase,
{applicationServerKey} — la clé de serveur (Server Key) de votre console Firebase,
{Text on Subscribe button} — un texte sur un bouton activant les notifications push,
{Text on Unsubscribe button} — un texte sur un bouton désactivant les notifications push,
{Fallback if a user blocks notifications} — un bloc de repli (fallback) 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 que vous avez tout fait correctement, veuillez utiliser https://search.google.com/test/amp\