-
Notifications
You must be signed in to change notification settings - Fork 8.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
85f00ad
commit bab1672
Showing
5 changed files
with
311 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
--- | ||
title: "PushManager : la méthode getSubscription()" | ||
short-title: getSubscription() | ||
slug: Web/API/PushManager/getSubscription | ||
l10n: | ||
sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e | ||
--- | ||
|
||
{{ApiRef("Push API")}} | ||
|
||
La méthode **`PushManager.getSubscription()`** de l'interface [`PushManager`](/fr/docs/Web/API/PushManager) récupère un abonnement push existant. | ||
|
||
Il renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui renvoie à un objet [`PushSubscription`](/fr/docs/Web/API/PushSubscription) contenant les détails d'un abonnement existant. S'il n'y a pas d'abonnement existant, cette promesse renvoie une valeur `null`. | ||
|
||
## Syntaxe | ||
|
||
```js | ||
getSubscription() | ||
``` | ||
|
||
### Paramètres | ||
|
||
Aucun. | ||
|
||
### Valeur de retour | ||
|
||
Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en un objet [`PushSubscription`](/fr/docs/Web/API/PushSubscription) ou `null`. | ||
|
||
## Exemples | ||
|
||
Cet extrait de code est tiré d'un [exemple de messagerie et de notification push](https://github.com/GoogleChrome/samples/tree/gh-pages/push-messaging-and-notifications). (Aucune démo n'est disponible). | ||
|
||
```js | ||
// Nous avons besoin de l'enregistrement du service worker pour vérifier | ||
// l'existence d'un abonnement | ||
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => { | ||
// Avons-nous déjà un abonnement aux messages push ? | ||
serviceWorkerRegistration.pushManager | ||
.getSubscription() | ||
.then((subscription) => { | ||
// Activer toute interface utilisateur d'inscription / désinscription | ||
// des messages push. | ||
const pushButton = document.querySelector(".js-push-button"); | ||
pushButton.disabled = false; | ||
|
||
if (!subscription) { | ||
// Nous ne sommes pas abonnés à push, donc définir l'UI | ||
// pour permettre à l'utilisateur d'activer push | ||
return; | ||
} | ||
|
||
// Maintenez votre serveur synchronisé avec le dernier subscriptionId | ||
sendSubscriptionToServer(subscription); | ||
|
||
showCurlCommand(subscription); | ||
|
||
// Réglez votre interface utilisateur pour montrer qu'ils se sont abonnés | ||
// à des messages push | ||
pushButton.textContent = "Désactiver les messages push"; | ||
isPushEnabled = true; | ||
}) | ||
.catch((err) => { | ||
console.error(`Erreur lors de getSubscription() : ${err}`); | ||
}); | ||
}); | ||
``` | ||
|
||
## Spécifications | ||
|
||
{{Specifications}} | ||
|
||
## Compatibilité des navigateurs | ||
|
||
{{Compat}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
--- | ||
title: L'interface PushManager | ||
slug: Web/API/PushManager | ||
l10n: | ||
sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b | ||
--- | ||
|
||
{{ApiRef("Push API")}} | ||
|
||
L'interface **`PushManager`** de l'[API Push](/fr/docs/Web/API/Push_API) permet de recevoir des notifications de serveurs tiers et de demander des URL pour les notifications push. | ||
|
||
Cette interface est accessible via la propriété [`ServiceWorkerRegistration.pushManager`](/fr/docs/Web/API/ServiceWorkerRegistration/pushManager). | ||
|
||
## Propriétés statitiques | ||
|
||
- [`PushManager.supportedContentEncodings`](/fr/docs/Web/API/PushManager/supportedContentEncodings_static) | ||
- : Retourne un tableau des encodages de contenu pris en charge qui peuvent être utilisés pour chiffrer la charge utile d'un message push. | ||
|
||
## Méthodes d'instance | ||
|
||
- [`PushManager.getSubscription()`](/fr/docs/Web/API/PushManager/getSubscription) | ||
- : Récupère un abonnement push existant. Il renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en un objet [`PushSubscription`](/fr/docs/Web/API/PushSubscription) contenant les détails d'un abonnement existant. S'il n'existe pas d'abonnement existant, cette promesse renvoie une valeur `null`. | ||
- [`PushManager.permissionState()`](/fr/docs/Web/API/PushManager/permissionState) | ||
- : Retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui correspond à l'état de la permission du [**`PushManager`**](/fr/docs/Web/API/PushManager) actuel, qui sera l'un des éléments suivants : `'granted'`, `'denied'`, ou `'prompt'`. | ||
- [`PushManager.subscribe()`](/fr/docs/Web/API/PushManager/subscribe) | ||
- : Permet de s'abonner à un service de push. Il retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en un objet [`PushSubscription`](/fr/docs/Web/API/PushSubscription) contenant les détails d'un abonnement à un service push. Un nouvel abonnement est créé si le travailleur de service actuel n'a pas d'abonnement existant. | ||
|
||
### Méthodes obsolètes | ||
|
||
- [`PushManager.hasPermission()`](/fr/docs/Web/API/PushManager/hasPermission) {{deprecated_inline}} | ||
- : Retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui résout le statut `PushPermissionStatus` de l'application web requérante, qui sera l'un des éléments suivants : `granted`, `denied`, ou `default`. Remplacé par [`PushManager.permissionState()`](/fr/docs/Web/API/PushManager/permissionState). | ||
- [`PushManager.register()`](/fr/docs/Web/API/PushManager/register) {{deprecated_inline}} | ||
- : Permet de s'abonner à un abonnement push. Remplacé par [`PushManager.subscribe()`](/fr/docs/Web/API/PushManager/subscribe). | ||
- [`PushManager.registrations()`](/fr/docs/Web/API/PushManager/registrations) {{deprecated_inline}} | ||
- : Récupère les abonnements push existants. Remplacé par [`PushManager.getSubscription()`](/fr/docs/Web/API/PushManager/getSubscription). | ||
- [`PushManager.unregister()`](/fr/docs/Web/API/PushManager/unregister) {{deprecated_inline}} | ||
- : Désinscrit et supprime un point d'extrémité d'abonnement spécifié. Dans l'API mise à jour, un abonnement est désinscrit en appelant la méthode [`PushSubscription.unsubscribe()`](/fr/docs/Web/API/PushSubscription/unsubscribe). | ||
|
||
## Exemple | ||
|
||
```js | ||
this.onpush = (event) => { | ||
console.log(event.data); | ||
// A partir de là, nous pouvons écrire les données dans IndexedDB, les envoyer | ||
// à n'importe quelle fenêtre ouvertes, afficher une notification, etc. | ||
}; | ||
|
||
navigator.serviceWorker | ||
.register("serviceworker.js") | ||
.then((serviceWorkerRegistration) => { | ||
serviceWorkerRegistration.pushManager.subscribe().then( | ||
(pushSubscription) => { | ||
console.log(pushSubscription.endpoint); | ||
// Les détails de l'abonnement push nécessaires au serveur d'application | ||
// sont maintenant disponibles et peuvent lui être envoyées en utilisant, | ||
// par exemple, un XMLHttpRequest. | ||
}, | ||
(error) => { | ||
console.error(error); | ||
}, | ||
); | ||
}); | ||
``` | ||
|
||
## Spécifications | ||
|
||
{{Specifications}} | ||
|
||
## Compabilité des navigateurs | ||
|
||
{{Compat}} | ||
|
||
## Vois aussi | ||
|
||
- L'[API Push](/fr/docs/Web/API/Push_API) | ||
- L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
--- | ||
title: "PushManager : la méthode permissionState()" | ||
short-title: permissionState() | ||
slug: Web/API/PushManager/permissionState | ||
l10n: | ||
sourceCommit: c58e8c1dd6ecbcb63894c7dd17fb9495b9511b4e | ||
--- | ||
|
||
{{ApiRef("Push API")}} | ||
|
||
La méthode **`permissionState()`** de l'interface [`PushManager`](/fr/docs/Web/API/PushManager) renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en une chaîne de caractères indiquant l'état de la permission du gestionnaire de push. Les valeurs possibles sont `'prompt'`, `'denied'`, ou `'granted'`. | ||
|
||
> **Note :** Depuis Firefox 44, les autorisations pour [Notifications](/fr/docs/Web/API/Notifications_API) et [Push](/fr/docs/Web/API/Push_API) ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé. | ||
## Syntaxe | ||
|
||
```js | ||
permissionState() | ||
permissionState(options) | ||
``` | ||
|
||
### Paramètres | ||
|
||
- `options` {{optional_inline}} | ||
|
||
- : Un objet contenant des paramètres de configuration optionnels. Il peut avoir les propriétés suivantes : | ||
|
||
- `userVisibleOnly` | ||
- : Un booléen indiquant que l'abonnement push renvoyé ne sera utilisé que pour les messages dont l'effet est rendu visible à l'utilisateur. | ||
- `applicationServerKey` | ||
- : Clé publique que votre serveur push utilisera pour envoyer des messages aux applications clientes via un serveur push. Cette valeur fait partie d'une paire de clés de signature générée par votre serveur d'application et utilisable avec la signature numérique à courbe elliptique (ECDSA) sur la courbe P-256. | ||
|
||
### Valeur de retour | ||
|
||
Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en une chaîne de caractères ayant pour valeur `'prompt'`, `'denied'`, ou `'granted'`. | ||
|
||
## Spécifications | ||
|
||
{{Specifications}} | ||
|
||
## Compatibilité des navigateurs | ||
|
||
{{Compat}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
--- | ||
title: "PushManager : la méthode subscribe()" | ||
short-title: subscribe() | ||
slug: Web/API/PushManager/subscribe | ||
l10n: | ||
sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc | ||
--- | ||
|
||
{{ApiRef("Push API")}} | ||
|
||
La méthode **`subscribe()`** de l'interface [`PushManager`](/fr/docs/Web/API/PushManager) permet de s'abonner à un service de push. | ||
|
||
Elle renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en un objet [`PushSubscription`](/fr/docs/Web/API/PushSubscription) contenant les détails d'un abonnement à un service de push. Un nouvel abonnement est créé si le travailleur de service actuel n'a pas d'abonnement existant. | ||
|
||
## Syntaxe | ||
|
||
```js | ||
subscribe(options) | ||
``` | ||
|
||
### Paramètres | ||
|
||
- `options` {{optional_inline}} | ||
|
||
- : Un objet contenant des paramètres de configuration optionnels. Il peut avoir les propriétés suivantes : | ||
|
||
- `userVisibleOnly` | ||
- : Un booléen indiquant que l'abonnement push renvoyé ne sera utilisé que pour les messages dont l'effet est rendu visible à l'utilisateur. | ||
- `applicationServerKey` | ||
- : Une chaîne encodée en Base64 ou un [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) contenant une clé publique [ECDSA](https://fr.wikipedia.org/wiki/Elliptic_curve_digital_signature_algorithm) P-256 que le serveur push utilisera pour authentifier votre serveur d'application. Si vous le spécifiez, tous les messages provenant de votre serveur d'application doivent utiliser le schéma d'authentification [VAPID](https://datatracker.ietf.org/doc/html/rfc8292) et inclure un JWT signé avec la clé privée correspondante. Cette clé **_N'EST PAS_** la même clé ECDH que celle que vous utilisez pour chiffrer les données. Pour plus d'informations, voir « [Utiliser VAPID avec WebPush](https://blog.mozilla.org/services/2016/04/04/using-vapid-with-webpush/) ». | ||
|
||
> **Note :** Ce paramètre est nécessaire dans certains navigateurs comme Chrome et Edge. | ||
### Valeur de retour | ||
|
||
Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout en un objet [`PushSubscription`](/fr/docs/Web/API/PushSubscription). | ||
|
||
## Exemples | ||
|
||
```js | ||
this.onpush = (event) => { | ||
console.log(event.data); | ||
// À partir de là, nous pouvons écrire les données dans IndexedDB, | ||
// les envoyer à toutes les fenêtres ouvertes, afficher une notification, etc. | ||
}; | ||
|
||
navigator.serviceWorker.register("serviceworker.js"); | ||
|
||
// Utilisez serviceWorker.ready pour vous assurer que vous pouvez vous abonner au push | ||
navigator.serviceWorker.ready.then((serviceWorkerRegistration) => { | ||
const options = { | ||
userVisibleOnly: true, | ||
applicationServerKey, | ||
}; | ||
serviceWorkerRegistration.pushManager.subscribe(options).then( | ||
(pushSubscription) => { | ||
console.log(pushSubscription.endpoint); | ||
// Les détails de l'abonnement push dont le serveur d'application a besoin | ||
// sont maintenant disponibles et peuvent lui être envoyés en utilisant, | ||
// par exemple, un XMLHttpRequest. | ||
}, | ||
(error) => { | ||
// Pendant le développement, il est souvent utile de consigner les erreurs | ||
// dans la console. Dans un environnement de production, il peut être | ||
// judicieux de transmettre également des informations sur les erreurs | ||
// au serveur d'application. | ||
console.error(error); | ||
}, | ||
); | ||
}); | ||
``` | ||
|
||
### Répondre aux gestes de l'utilisateur | ||
|
||
Les appels `subscribe()` doivent être effectués en réponse à un geste de l'utilisateur, tel qu'un clic sur un bouton, par exemple : | ||
|
||
```js | ||
btn.addEventListener("click", () => { | ||
serviceWorkerRegistration.pushManager | ||
.subscribe(options) | ||
.then((pushSubscription) => { | ||
// gérer l'abonnement | ||
}); | ||
}); | ||
``` | ||
|
||
Il ne s'agit pas d'une bonne pratique — vous ne devriez pas inonder les utilisateurs avec des notifications qu'ils n'ont pas acceptées — mais à l'avenir, les navigateurs interdiront explicitement les notifications qui ne sont pas déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple. | ||
|
||
## Spécifications | ||
|
||
{{Specifications}} | ||
|
||
## Compatibilité des navigateurs | ||
|
||
{{Compat}} |
23 changes: 23 additions & 0 deletions
23
files/fr/web/api/pushmanager/supportedcontentencodings_static/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
--- | ||
title: "PushManager : la propriété statique supportedContentEncodings" | ||
short-title: supportedContentEncodings | ||
slug: Web/API/PushManager/supportedContentEncodings_static | ||
l10n: | ||
sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839 | ||
--- | ||
|
||
{{APIRef("Push API")}} | ||
|
||
La propriété statique en lecture seule **`supportedContentEncodings`** de l'interface [`PushManager`](/fr/docs/Web/API/PushManager) renvoie un tableau des encodages de contenu pris en charge qui peuvent être utilisés pour chiffrer la charge utile d'un message push. | ||
|
||
## Valeur | ||
|
||
Un tableau de chaînes de caractères. | ||
|
||
## Spécifications | ||
|
||
{{Specifications}} | ||
|
||
## Compatibilité des navigateurs | ||
|
||
{{Compat}} |