-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DONE] Yaal Coop/Add PWA functionality to app and notifications capabilities #937
Conversation
e7b4421
to
e4719f0
Compare
Il y a un peu d'infos dans dockerfile-dev-with-volumes/README.adoc et dans pod/main/configuration.json Y a-t-il un endroit indiqué pour documenter la PWA et les notification (ce qui a été décrit dans la PR) ? |
e4719f0
to
e5d707d
Compare
Bonjour et merci pour votre contribution. Je viens de solliciter l'équipe en charge du développement pour faire les review. Pour la documentation, en effet, je vais ouvrir une page sur le wiki mais je ne pourrais malheureusement pas vous donner accès. Je vous propose donc de faire la doc au format markdown et je la mettrai en ligne sur le wiki. Bonne journée |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Merci pour cette fonctionnalité !
J’ai fait quelques remarques, principalement lié au QoC et à l'accessibilité.
pod/authentication/models.py
Outdated
verbose_name=_("Accept notifications"), | ||
default=None, | ||
null=True, | ||
help_text=_("Get push notifications from your devices."), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
il me semble qu'il serait plus juste de dire "on your devices" plutôt que "from" ?
pod/main/settings.py
Outdated
WEBPUSH_SETTINGS = { | ||
"VAPID_PUBLIC_KEY": "", | ||
"VAPID_PRIVATE_KEY": "", | ||
"VAPID_ADMIN_EMAIL": "[email protected]" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[email protected] risque d'être spammé si on le laisse par défaut.
@@ -270,4 +274,3 @@ <h1 class="page_title">{{page_title|capfirst}}</h1> | |||
</body> | |||
|
|||
</html> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Merci de laisser une ligne vide en fin de fichiers
pod/main/templates/navbar.html
Outdated
@@ -243,6 +243,11 @@ <h5 id="pod-navbar__menuuserLabel">{% if user.get_full_name != '' %}{{ user.get_ | |||
<a class="nav-item nav-link" href="{% url 'bbb:live_list_meeting' %}"><i class="bi bi-lightning-charge pod-nav-link-icon mx-1" aria-hidden="true"></i>{% trans 'Perform a BigBlueButton live' %}</a> | |||
{% endif %} | |||
{% endif %} | |||
<div class="nav-item"> | |||
<button class="nav-link" onclick="new bootstrap.Toast(document.querySelector('#notification-toast')).show()"> | |||
<i class="bi bi-bell pod-nav-link-icon mx-1"></i>{% trans 'Notifications settings' %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ajouter aria-hidden="true"
sur chaque icône bootstrap
pod/settings.py
Outdated
# PWA | ||
|
||
PWA_APP_NAME = 'Podeduc' | ||
PWA_APP_DESCRIPTION = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Est-il possible de mettre la description en anglais, et d'inclure le systeme de traduction ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(sinon, ajouter un commentaire pour le préciser)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bonjour,
Voici le retour après mes premiers tests.
Pour informations, j'ai mis à jour Pod, sur un environnement de test fonctionnel, via les commandes habituelles :
- python3 -m pip install -r requirements.txt
- make updatedb
- make migrate
- make statics
- make compilelang
Puis, j'ai réalisé la configuration adéquate dans custom/settings_local.py en utilisant des clés générées via https://web-push-codelab.glitch.me/
WEBPUSH_SETTINGS = {
"VAPID_PUBLIC_KEY": "xxx",
"VAPID_PRIVATE_KEY": "xxxx",
"VAPID_ADMIN_EMAIL": "xxx"
}
Et final un restart du service uwsgi-pod.
Côté installation, aucun problème !
Par la suite, j'ai réalisé des tests sur différents navigateurs Firefox / Chrome / Edge sur mon PC (je testerai lundi sur un téléphone/tablette).
Voici alors mes remarques :
- Quand je vais dans le menu, dans Paramètres de notification et que je clique sur Autoriser :
- sur Chrome et Edge, le navigateur me demande de confirmer l'autorisation, mais cela me provoque une erreur 403 dans la Console du navigateur lors d'une requête sur https://xxx.umontpellier.fr/accounts/set-notifications/ 403 (forbidden)
- sur Firefox, le navigateur ne me demande rien et cela provoque une erreur dans la Console : Uncaught (in promise) TypeError: reg is undefined
subscribe https://xxx.umontpellier.fr/static/webpush/webpush.js:95
setPushPreference https://xxx.umontpellier.fr/static/js/notification-toast.js?ver=3.3.1.2:25
onclick https://xxx.umontpellier.fr/:1
Pour continuer mes tests sur les notifications, j'ai alors modifier directement la valeur du champ authentication_owner.accepts_notifications pour mon compte (j'ai mis 1 pour les accepter).
Après cette manip, les notifications de fin d'encodage s'affichaient bien sur tous les navigateurs.
-
Sur Chrome/Edge, sur toutes les pages, j'ai une erreur non bloquante dans la console : Uncaught (in promise) TypeError: Failed to execute 'addAll' on 'Cache': Request failed
-
Sur la route /pwa, les boutons n'ont pas de style et le bouton Send notification n'est pas traduit. J'imagine que c'est seulement une page de test, c'est donc peu important.
-
Dans l'Administration, il manque quelques traductions (push information, User, subscription, Group).
-
Sur Chrome/Edge, j'ai pu installer l'application sur le bureau (sous Firefox, je n'ai pas trouvé mais il me semble que c'est lié à Firefox, qui ne l'autorise plus depuis 2 ans).
Par contre, l'application se nomme Podeduc et les icônes correspondent aux icônes "de base" (non surchargés) de Pod.
Serait-il possible de pouvoir réaliser une surcharge du nom de l'application et du(es) icône(s) ? Typiquement, via le fichier de configuration custom/setting_local.py.
Par exemple, chez nous, nous mettrions Plateforme vidéo UM comme nom d'application et l'icône correspondant à la charte de l'université.
Encore merci pour ce travail de qualité.
Bonne journée,
Bonjour @LoanR est-ce possible de répondre aux remarques svp ? |
Est-ce possible d'apporter les modifications demandées ? merci bcp |
Hello @ptitloup, c'est bien pris en compte de notre côté, on est sur les modifs demandées et on enquête sur les erreurs rencontrées. |
e5d707d
to
57c8997
Compare
Bonjour, Je viens de pousser les modifications de codes demandées par @Badatos.
Nous n'avons pas testé sur Edge car le cahier des charges listait Chrome, Firefox et Safari. Me confirmes-tu que tu as fais tes tests depuis un Windows ? Me confirmes-tu que tu tests depuis une URL publique en https ? Peux-tu m'indiquer les versions des navigateurs avec lesquelles tu effectues tes tests ?
À première vue je dirais que ça pourrait être un souci de CSRF. Vois-tu passer le token CSRF dans la requête ?
Le serviceworker essayait de mettre en cache un fichier avec un mauvais chemin. C'est corrigé.
Effectivement nous avons fais cette simple page pour pouvoir tester la réception des notifications sans avoir besoin de mettre en ligne une vidéo. Cette page n'est disponible qu'aux super utilisateurs. Si c'est important on peut le traduire.
En effet ces éléments viennent de l'extension django-webpush. Il n'y a pas de traduction pour le moment mais une PR a été soumise à ce sujet.
Il existe une extension qui permet l'installation avec Firefox : https://github.com/filips123/PWAsForFirefoxhttps://github.com/filips123/PWAsForFirefox
On peut surcharger n'importe quel élément de configuration décrit dans django-pwa dans |
Bonjour, Merci pour ce retour. |
Nous allons mettre ces questions de configuration de django-pwa dans la doc, ça simplifiera l'usage. |
Bonjour, Dans mon cas, je vous confirme que le problème de 403 venait de mon environnement de test et non de votre développement (la valeur du cookie csrftoken n'était pas fournie). Encore une petite remarque, il semblerait qu'il y ait 2 traductions en double, ce qui pose problème pour la compilation : Merci. |
Merci pour l'info. Par curiosité, qu'est-ce qui a provoqué le souci ?
On s'en occupe rapidement. |
Je pense que cela doit être lié à la conf Nginx vis-à-vis de proxy_set_header Cookie ou quelque chose dans ce style. const response = await fetch(post_url, { Je pense qu'il y a également un petit problème de traduction pour le message d'encodage; j'obtiens du Franglais :) : |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bonjour, quelques petits changements attendus de mon côté.
Merci
57c8997
to
08ace82
Compare
C'est réglé. Les différents points sont réglés aussi. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
D'après mes tests, cela semble concluant.
Un grand merci pour ce travail !
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok pour moi en review, je teste le fonctionnement
Ne pas prendre en compte les tests ci-dessous, j'avais oublié de deployer les fichiers statics :'(, toutes mes excuses Test effectués sur MacOS (Mac Book Pro) : Ok sur Firefox et Safari. (pas d'installation possible) Voici quelques retours de mes tests sur mon telephone pro sur Android. Second test effectué sur Chrome. Il ne propose pas d'installer mais d'ajouter à l'ecran d'accueil. L'icone est bien présent (mais il me semble qu'il s'agit du favicon et non des icons fourni dans l'application) Avez-vous tester de votre côté ? Ai-je oublié quelque chose ? merci pour votre aide |
En effet, cela fonctionne bcp mieux quand on déploie les fichiers statics. |
enfin, est-ce possible de rajouter une entrée du menu pour installer l'application ? (dans le cas ou l'installation est possible !) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
C'est bon pour moi.
Merci à vous pour cette PR !
Bonjour @LoanR , pourriez-vous me faire un retour sur les deux point remontés suite à mes tests fonctionnels :
|
Bonjour @ptitloup |
Owners can set their notification preference. Notifications are sent when video encoding is complete. Co-authored-by: Éloi Rivard <[email protected]> Co-authored-by: Loan Robert <[email protected]>
6113409
to
e0e46e0
Compare
Si on appelle Par ailleurs, django-webpush prépare les options à passer à On peut envisager une manière non intrusive en écoutant l'évènement de souscription grâce à l'évènement Je vois donc 2 options :
Tu me confirmes que j'implémente la 1 avec duplication d'une partie du code ? |
Je viens de pousser l'affichage d'une entrée de menu permettant l'installation de la PWA pour les navigateurs qui la supportent, à savoir pour le moment Chrome. |
Voici le texte de documentation qui peut être ajouté au wiki: # PWA
L'application implémente quelques fonctionnalités des [applications web progressives](https://developer.mozilla.org/fr/docs/Web/Progressive_web_apps),
comme l'installation ou les notifications.
## Configuration
Les métadonnées de l'application sont pré-remplies, mais toutes les options (icônes, nom de l'application, etc.) peuvent être surchargées.
La liste exhaustive des paramètres de configuration est disponible [sur le dépôt de django-pwa](https://github.com/silviolleite/django-pwa?tab=readme-ov-file#configuration).
Notamment, le nom et la description de l'application sont contrôlés par les variables `PWA_APP_NAME` et `PWA_APP_DESCRIPTION`.
## Notifications push
Afin de permettre à l'application d'envoyer aux utilisateurs des notifications natives, il est nécessaire de générer une paire de clés VAPID, par exemple avec des outils tels que https://web-push-codelab.glitch.me/
Ensuite, les clés doivent être indiqués dans la configuration via les paramètres suivants:
```python
WEBPUSH_SETTINGS = {
"VAPID_PUBLIC_KEY": "<clé-publique>",
"VAPID_PRIVATE_KEY": "<clé-privée>",
"VAPID_ADMIN_EMAIL": "[email protected]"
} |
Bonjour Eloi, |
CC @azmeuk ! |
La doc est en ligne : https://www.esup-portail.org/wiki/display/ES/Mode+PWA+et+Notifications |
C'est bien compris. J'implémente ça demain matin. |
On dirait que le la mise en forme markdown n'a pas fonctionné. |
Pas grave, je referais cela tranquillement |
Voilà, c'est fait |
Bonjour, je confirme la bonne installation de Pod. Testé via chromium sous Mac OS. Il m'a proposé de l'installer et j'ai maintenant l'application de disponible directement. Etrange, l'application se nomme podeduc ! |
@ptitloup as-tu configuré la variable |
Quand je modifie la variable PWA_APP_NAME, je vois bien la modification. Donc tout est ok mais pourquoi PodEduc par défaut ? c'est plutot ca ma question :) |
Je ne sais plus d'où ce nom vient. Tu préfères un autre nom par défaut ? |
Pod Educ est le nom de l'instance Pod de l'education nationale. Certes, c'est une grosse instance mais nous sommes plutot enseignement supérieur. Ne voulant froisser personne, on pourrait mettre Pod tout simplement. |
ok j'ai trouvé, tout se trouve dans pod/settings.py, est-ce possible de déplacer ces paramètres dans pod/main/settings.py et de remplacer podeduc par Pod svp ? Merci bcp |
cc485c5
to
b6210e6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok pour moi
testé sur macOS, installation ok et notifications ok. Merci pour ces changements. Tout cela me convient. |
Merci bcp ! |
…ilities (EsupPortail#937) * Add PWA functionality to app and notifications capabilities Owners can set their notification preference. Notifications are sent when video encoding is complete. Co-authored-by: Éloi Rivard <[email protected]> Co-authored-by: Loan Robert <[email protected]> * Implement a PWA installation menu entry --------- Co-authored-by: Éloi Rivard <[email protected]>
…ilities (EsupPortail#937) * Add PWA functionality to app and notifications capabilities Owners can set their notification preference. Notifications are sent when video encoding is complete. Co-authored-by: Éloi Rivard <[email protected]> Co-authored-by: Loan Robert <[email protected]> * Implement a PWA installation menu entry --------- Co-authored-by: Éloi Rivard <[email protected]>
…ilities (EsupPortail#937) * Add PWA functionality to app and notifications capabilities Owners can set their notification preference. Notifications are sent when video encoding is complete. Co-authored-by: Éloi Rivard <[email protected]> Co-authored-by: Loan Robert <[email protected]> * Implement a PWA installation menu entry --------- Co-authored-by: Éloi Rivard <[email protected]>
PWA
L'application est installable sur différents os : iOS, macOS, Windows, Android, Linux...
Cette fonctionnalité se base sur la lib django-pwa qui permet de configurer la création du
manifest.json
et du service worker.Notifications
Le système de base de notifications est implémenté et s'appuie sur la lib django-webpush.
Standard web push
L'usage standard est le suivant :
Conditions de notification
Notification métier : fin d'encodage
Pour le moment, Esup-Pod utilise ces notifications pour un cas métier particulier : la fin de l'encodage d'une vidéo. Le flow suivi est le suivant :
accepts_notifications
de l'Owner
Conditions de demande de notification
Un utilisateur peut paramétrer sa préférence de notification depuis son volet menu utilisateur.
Si la préférence de notification d'un utilisateur n'a pas encore été définie, la demande de notification se fera pendant l'encodage d'une vidéo, sur la page d'édition de la vidéo.
Règles de notifications
Pour être notifié de la fin d'un encoding, un utilisateur doit avoir accepté les notifications (
accepts_notifications
àTrue
), et au moins un de ses appareils doit être enregistré à un push service.Il doit également donner l'autorisation a un site de notifier son appareil depuis les paramètres du navigateur. Le fait qu'un utilisateur décide finalement de retirer la permission de notification d'un site dans son navigateur ne peut pas être contrôlé, cela ne rentre pas en compte dans le choix de l'envoi d'une notification.
Si un utilisateur refuse d'être notifié (
accepts_notification
àFalse
) ou qu'aucun de ses appareil n'est enregistré à un push service, il recevra un mail à la fin de l'encodage (si le paramètreEMAIL_ON_ENCODING_COMPLETION
est àTrue
)Cas particulier
Sur iOS, pour utiliser le service de notification et les recevoir, il faut impérativement installer la PWA. C'est une limitation imposée par iOS.
Tests
Pour tester les notifications, une url est à disposition pour les superusers,
/pwa
Un bouton permet d'envoyer une notification sur tous les appareils enregistrés (et autorisés à notifier) de l'utilisateur connecté.
resolves #912
cc @azmeuk