====== Progressive Web App (PWA) ======

  * [[https://developers.google.com/web/progressive-web-apps/|Google Doc]]
    * des tips dans la [[https://developer.chrome.com/docs/workbox/|docs de workbox]]
  * [[https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps|MDN Doc]] (Mozilla Developer Network)
  * [[https://web.dev/learn/pwa/|Web.dev PWA]] by members of the Chrome team, and external experts.
    * [[https://web.dev/articles/push-notifications-overview?hl=fr|Présentation des notifications push]]
  * MDN
    * [[https://github.com/mdn/serviceworker-cookbook|ServiceWorker Cookbook]]
      * [[https://github.com/mdn/serviceworker-cookbook/blob/master/immediate-claim/service-worker.js|Immediate Claim]]: Register a service worker, Delete old cache if present, Immediately claim the service worker
      * [[https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push|using Notifications and Push APIs]]
    * [[https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest|Web application manifest]], [[https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json|manifest.json]]
    * [[https://github.com/mdn/pwa-examples|MDN PWA Examples]]
  * [[https://w3c.github.io/manifest-app-info/#categories-member|W3C Manifest App]]
  * Android
    * Trusted Web Activity (TWA): Activité Web Fiable est une nouvelle façon d'ouvrir le contenu de votre application Web, comme votre progressive web app, à partir de votre application Android. [[https://developer.chrome.com/docs/android/trusted-web-activity|Aperçu]].
  * Apple
    * [[https://github.com/khmyznikov/ios-pwa-wrap|ios-pwa-wrap]] le template original pour IOS utilisé par PWABuilder. Contient quelques explications, screenshoots et exemples Javascript.
  * [[https://jakearchibald.github.io/isserviceworkerready/resources.html#moar|isserviceworkerready ressources]]

Articles:
  * [[https://web.dev/articles/pwas-in-app-stores?hl=fr|PWA sur les plates-formes de téléchargement d'applications]] on Google Play Store, Microsoft Store, App Store d'Apple, Meta Quest Store with PWABuilder.com (//2023/03/31, Thomas Steiner on web.dev//)
  * Learn Progressive Web Apps with [[https://dev.to/nitya/series/16849|30DaysOfPWA Series' Articles]] by Nitya Narasimhan, 2022
    * [[https://dev.to/azure/27-best-practices-for-pwa-authentication-29md|#27 - Best Practices for PWA: Authentication]] with federated, webauthn
  * Sur les techniques de "cache" et "offline"
    * https://web.dev/articles/offline-cookbook?hl=fr
  * https://14islands.com/blog/2017/01/19/progressive-web-app-from-scratch/ 2017
  * https://14islands.com/blog/2016/12/15/vecka-progressive-web-app/ 2016

===== Tools =====

  * [[https://www.pwabuilder.com|PWA Builder]]
    * [[https://docs.pwabuilder.com/#/builder/android|Publishing PWAs to the Google Play Store]]
    * https://github.com/pwa-builder/
  * https://progressier.com/
  * Take a screenshot website online
    * https://pikwy.com/
  * [[https://developer.chrome.com/docs/workbox?hl=fr|Workbox]]
    * Des bibliothèques et des outils de service worker prêts pour la production. Créez des progressive web apps (PWA) avec Workbox, la bibliothèque de service worker de l'équipe Chrome.
    * [[https://developer.chrome.com/docs/workbox/modules|workbox/modules]]
  * Web Push for PHP
    * [[https://github.com/web-push-libs/web-push-php|minishlink/web-push]] can be used to send push messages to endpoints as described in the [[https://datatracker.ietf.org/doc/html/rfc8030|Web Push protocol]] [[rfc>8030|RFC8030]]
      * [[https://github.com/Minishlink/web-push-php-example|Minishlink/web-push-php-example]] a complete example with html+JS frontend and php backend using ''web-push-php''
      * [[https://github.com/laravel-notification-channels/webpush|Web Push Notifications Channel for Laravel]] 
      * https://framagit.org/Cyrille37/webpush-demo/-/tree/main


===== Online démos =====

  * [[https://whatpwacando.today/|What PWA Can Do Today]] pour tester les différentes fonctionnalités sur chacune des plateformes (iOS, Android, ...) par [[https://github.com/DannyMoerkerke|Danny Moerkerke]]
  * Push
    * https://simple-push-demo.vercel.app/ //explique bien les différents éléments//
  * WebAuthn
    * [[glossaire/webauthn]]

===== Applications =====


mine: [[app:croustiwiki]]

  * App Directories
    * [[https://github.com/hemanth/awesome-pwa|awesome-pwa]]
  * MDN Web Docs [[https://mdn.github.io/pwa-examples|PWA Examples]]
    * https://github.com/erickarugu/diginews
      * A sample Progressive Web App Created using vanilla JS - no framework at all.
  * https://linkcleaner.app/, https://github.com/corbindavenport/link-cleaner
    * vanilla Js
    * gestion du cache
    * web app that removes unnecessary junk from web links in one click.
    * If you install Link Cleaner with a supported browser and operating system (e.g. Chrome on Android), it appears in your system share menu
  * https://github.com/rh9891/TheStingyTraveler
    * vanilla Js
    * gestion du cache
  * [[https://github.com/zuixjs/zuix-html-pwa/|zuix-html-pwa]]
    * A Progressive Web App template with a responsive layout and mobile app look & feel.
    * using lightweight [[https://zuixjs.org/|zuix.js]] library for building modular, component-based websites and apps that use standard HTML, CSS, and JavaScript. It's framework-agnostic, and does not require any bundler, package manager, or transpiling to work.
    * librairie orientée mobile, à essayer absolument ;-)
  * [[https://github.com/Minishlink/pwa-qr-code-scanner|pwa-qr-code-scanner]] Lightweight progressive web app for scanning QR codes offline. Par l'auteur de [[https://github.com/web-push-libs/web-push-php|web-push-libs/web-push-php]]
  * OsmApp https://github.com/zbycz/osmapp/ https://osmapp.org/


===== Techno =====

==== Installation ====

Pour installer un PWA sans passer par une compilation et publication sur un magasin d'application: "installer sur l'écran d'accueil" aka [[/glossaire/A2HS|A2HS]].

😩 L'event ''beforeinstallprompt'' n'est pas implémenté par Safari on iOS ni Firefox for Android  -> [[https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent#browser_compatibility|MDN browser_compatibility]]

Sans ''beforeinstallprompt'' il faut expliquer selon, la plateforme, comment Ajouter à l'écran d'accueil (**Add to Home Screen** aka A2HS)

  * **Safari**: To add PWA to the Home Screen, open the app in Safari on iOS, go to the Share menu, scroll down and tap "Add to Home Screen".
    * 😩 Apple l'a retiré (iOS 17.4, early 2025) mais il va le remettre : https://developer.apple.com/forums/thread/745414?page=2
    * Après essai sur un iOS 18.x le menu A2HS n'est pas revenu 😤

Apple:
  * https://web.dev/learn/pwa/installation#ios_and_ipados_installation
  * a native technology known as [[https://developer.apple.com/documentation/devicemanagement/webclip|Web Clips]] is used to create the PWA icons in the operating system. They are just XML files in Apple's Property List format stored in the filesystem.
  * [[https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html|Configuring Web Applications]]
  * [[https://developer.apple.com/documentation/webkit/optimizing-your-website-for-safari|Optimizing Your Website for Safari]]

Doc:

  * [[https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable|Making PWAs installable]]
  * [[https://whatpwacando.today/installation/|démo]] de DannyMoerkerke
  * [[https://web.dev/articles/customize-install#detect-launch-type|track 'display-mode']]
  * [[https://medium.com/@dev-afzalansari/improving-the-install-experience-of-pwas-336d0684052d|Improve the Install Experience of PWAs]]

Is your app installed?
  * [[https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getInstalledRelatedApps#browser_compatibility|Navigator: getInstalledRelatedApps() method]]
    * **Experimental** ! Seulement Chrome-android et Samsung-internet (2025-07)
  * https://web.dev/articles/get-installed-related-apps


Tools & libraries :

  * https://github.com/khmyznikov/pwa-install Installation dialog for PWA and Add to Home Screen/Dock dialog for Web Apps.

=== Linux Chrome ===

{{informatique:pwa:install_linux_chrome_button.png?direct&400|Button installation avec Chrome Linux}}

=== Android Chrome ===

{{:informatique:pwa:install_android_chrome_01-half.jpg?direct&140|Install Android Chrome étape 1}}
{{:informatique:pwa:install_android_chrome_02-half.jpg?direct&140|Install Android Chrome étape 2}}
{{:informatique:pwa:install_android_chrome_03-half.jpg?direct&140|Install Android Chrome étape 3}}
{{:informatique:pwa:install_android_chrome_04-half.jpg?direct&140|Install Android Chrome étape 4}}
{{:informatique:pwa:install_android_chrome_05-half.jpg?direct&140|Install Android Chrome étape 5}}

=== iOS Safari ===

{{:informatique:pwa:install_ios_safari_01-half.jpg?direct&160|Install iOS Safari étape 1}}
{{:informatique:pwa:install_ios_safari_02-half.jpg?direct&160|Install iOS Safari étape 2}}
{{:informatique:pwa:install_ios_safari_03-half.jpg?direct&160|Install iOS Safari étape 3}}
{{:informatique:pwa:install_ios_safari_04-half.jpg?direct&160|Install iOS Safari étape 4}}
{{:informatique:pwa:install_ios_safari_05-half.jpg?direct&160|Install iOS Safari étape 5}}

==== Push API / WebPush ====

L’implémentation Push API utilise un service tiers configuré et fourni gratuitement par l'éditeur du navigateur.

{{https://web.dev/articles/push-notifications-overview/image/your-server-sends-web-pu-55e06fc9c0017.svg?413x111}}

  * Mozilla
    * ''https://updates.push.services.mozilla.com'' [[https://github.com/mozilla-services/autopush-rs/|Mozilla Push server]] [[https://mozilla-push-service.readthedocs.io/en/latest/|docu]]
    * J'ai ouvert une [[https://github.com/mdn/content/issues/39747|MDN document issue]]
  * Google ''https://jmt17.google.com/fcm'' Firebase Cloud Messaging (FCM), anciennement appelé Google Cloud Messaging (GCM) [[https://firebase.google.com/docs/cloud-messaging|docu]]
  * Apple ''https://web.push.apple.com''
    * [[wpfr>Apple_Push_Notification_service|Apple Push Notifications service (APNs)]]
    * ex Apple Push Service (APS)

Voluntary Application Server Identification (VAPID) for Web Push [[rfc>8292]] [[rfc>9749]]

  * **page de démo**
    * https://simple-push-demo.vercel.app/ explique bien les différents éléments
    * https://tests.peter.sh/notification-generator/#actions=3
  * [[https://pqvst.com/2023/11/21/web-push-notifications/|Demystifying Web Push Notifications]]

  * Mozilla / Firefox
    * https://support.mozilla.org/fr/kb/notifications-web-push-firefox
  * Apple / Safari
    * [[https://pushpad.xyz/blog/apple-is-working-on-web-push-notifications-for-safari/|web push notifications (Push API) is now available on iOS and Safari]]
    * [[https://pushpad.xyz/blog/ios-special-requirements-for-web-push-notifications|iOS special requirements for web push notifications]]
    * [[https://developer.apple.com/documentation/usernotifications/sending-web-push-notifications-in-web-apps-and-browsers|Sending web push notifications in web apps and browsers]] (developer.apple.com)
    * [[https://developer.apple.com/documentation/usernotifications/setting-up-a-remote-notification-server|Setting up a remote notification server]]
    * Les notifs fonctionnent très bien (après A2HS), même mieux qu'avec Chrome ou Firefox car elles apparaissent sur l'écran vérouillé. Par contre Webkit (Safari) nettoie automatiquement toutes les données d'un site non visité depuis "//un certain temps//", dont le ServiceWorker qui se voit supprimé. Voir [[https://webkit.org/blog/16535/meet-declarative-web-push/|Meet Declarative Web Push]] qui rappelle le fonctionnement de l'ITP (Intelligent Tracking Prevention) de Webkit.


Voir chapitre "[[#tools]]" pour la mise en œuvre.

=== BadJwtToken ===

Apple: un ''POST'' d'envoi de message sur ''web.push.apple.com'' donne un ''403 Forbidden'' et ''reason:BadJwtToken''  avec le même code 😤 que pour Google et Mozilla qui eux fonctionnent.
Après lecture attentive de [[https://developer.apple.com/documentation/usernotifications/sending-web-push-notifications-in-web-apps-and-browsers|Sending web push notifications in web apps and browsers]] :

> **BadJwtToken**
> The JSON web token (JWT) has one of following issues: The JWT is missing. The JWT is signed with the wrong private key. **The JWT subject claim isn’t a URL or mailto:**. The JWT audience claim isn’t the origin of the push service where you sent the request. The JWT expiration parameter is more than one day into the future.

note: Apple seems to refuse url if it's TLD does not exists : it works with ''https://pouet.world'' but fail with ''https://code.devhost''.
    
https://github.com/web-push-libs/web-push-php/issues/398

=== stale/invalid subscriptions ===

  * [[https://pushpad.xyz/blog/fcm-returns-404-for-stale-push-subscriptions|Google is removing the inactive and unreachable push subscriptions]] (2024-06)

==== WebAuthn ====

[[/glossaire/webauthn|Web Authentication API (WebAuthn)]]

La démo [[https://whatpwacando.today/authentication|WebAuthn]] fonctionne sur Android + Firefox, après avoir autorisé les Services Google Play à accéder aux fichiers (Storage). //Thanks to [[https://github.com/DannyMoerkerke|Danny Moerkerke]]//.

Android+Firefox : WebAuthn fonctionne sans besoin d'installer la page sur l'écran d'accueil de l'appareil.

==== Web Share ====

This API should not be confused with the Web Share Target API.

  * [[https://web.dev/learn/pwa/os-integration?continue=https%3A%2F%2Fweb.dev%2Flearn%2Fpwa%2F%23article-https%3A%2F%2Fweb.dev%2Flearn%2Fpwa%2Fos-integration#web_share|Web Share on Web.dev]]
  * [[https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API|Web Share on MDN]]
  * Démo https://whatpwacando.today/web-share

Propriétés de partage (aka ''Share Data'') :
  * title
    * partage email : c'est l'objet de l'email
    * partage mattermost : pas utilisé 😞
  * text
  * url
    * La valeur de ''url'' est relative à ''window.location''. Si on code ''url="@todo"'' dans le partage ça donne ''https://tools.comptoir.net/wpduk/@todo''


==== ServiceWorker ====

Après tous les exemples rencontrés, la méthode d'inscription du ServiceWorker la plus aboutie: [[https://github.com/DannyMoerkerke/basic-service-worker/blob/main/sw-registration.js|sw-registration.js]] de DannyMoerkerke (//again! of course!//) accompagné de son [[https://github.com/DannyMoerkerke/basic-service-worker/blob/main/service-worker.js|service-worker.js]].

==== Développement ====

Le débugueur de Chrome/Chromium est plus pratique, mais il n'aime pas le certificat sans autorité reconnue (self-signed).

<code>
chromium \
 --ignore-certificate-errors \
 --unsafely-treat-insecure-origin-as-secure=https://code.devhost/ \
 https://code.devhost/dev/wikipedia-did-you-know/wikipedia-did-you-know.pwa/
</code>

Pour Firefox il faut lancer un autre outil avec ''Ctrl + Shift + J'' et sélectionner "multi-processus".

==== Flutter integration ====

Avec le widget [[/informatique/flutter#inapp_webview|inapp_webview]].

[[https://inappwebview.dev/blog/convert-a-pwa-into-a-flutter-app-using-webviews|Convert a PWA Into a Flutter App Using WebViews]]