Petit problème javascript

[ortolojf]

Bonjour

J'implémente un cache très simple en Javascript.

Est- ce que le code ci-dessous s'exécute même s'il n'y a rien dans le cache ?

Si cache.match(event.request) ne trouve rien, function(response) s'exécute quand -même ?

Merci.

      return cache.match(event.request).then(function (response) {

 

[ortolojf]

Vla-t-y pas...

J'ai fait un grop lapsus.

Evidemment, le then est le resolve de la promise cache.match(), qui a un catch si elle rend false.

Où ai-je la tête. ;(

 

[ortolojf]

Bon.

Je commence la programmation de ma pwa sous Firefox.

Firefox ne supporte pas l'event : "beforeinstallprompt".

Comment gérer l'install par l'utilisateur de la pwa ?

J'ai entendu dire que Firefox est sur le point de ne plus supporter les pwa ?

Merci beaucoup.

 

[ortolojf]

Beuh...

Firefox ( sous Fedora ) pour desktop ne supporte pas les PWA.

Je ne veux pas revenir à Chrome.

Quel navigateur sous mon Linux Fedora, supporterait à la fois les PWA et l'event "beforeinstallprompt" ?

Histoire de tester ma pwa.

Merci beaucoup.

Amicalement.

 

[eldk]

Bonjour,

Teste Brave.

Cordialement,

Eric

PS : https://web.dev/learn/pwa/installation-prompt?hl=fr

 

[ortolojf]

Merci beaucoup eldk

En général :

Comnent en Javascript, savoir si l'event beforeinstallprompt est supporté ?

Merci beaucoup.

Amicalement.

 

[ortolojf]

Ouf.

Voilà la réponse :

if(typeof window.onbeforeinstallprompt == 'object') {


}

 

[ortolojf]

Bonjour Eric

Opera est ok ?

Merci beaucoup.

 

[ortolojf]

Ouf.

Voilà la réponse :

if(typeof window.onbeforeinstallprompt == 'object') {


}

Ou encore mieux :

const isSupported =
        typeof document !== 'undefined' &&
        'serviceWorker' in navigator &&
        window.hasOwnProperty('BeforeInstallPromptEvent');

 

[ortolojf]

Bonjour Eric

J'ai un bug sous Linux Fedora 40 et Firefox version 129 desktop.

Théoriquement il n'accepte pas les service worker.

Cependant, mon service worker se déclenche correctement.

Mais d'après le réseau le manifest.json n'est pas chargé.

if ("serviceWorker" in navigator) {
   // Vrai.
}

Je rajoute l'instruction :

if ("serviceWorker" in navigator &&
        (!navigator.userAgent.match(/Firefox/i))) {

   // Faux.
}

Ma question :

Comment gérer les Firefox ?

Merci beaucoup.

Amicalement.

 

[ortolojf]

Bon.

Cà marche sous Brave.

PWA Pronostics-Courses-Chevaux installing_
index.html:25 Service worker registered with scope: http://localhost/
SW.js:101 PWA Pronostics-Courses-Chevaux installed_
SW.js:116 PWA Pronostics-Courses-Chevaux now ready to handle fetches!

Mais je n'arrive pas à désinstaller la pwa.

Y a plus qu'à programmer réellement la pwa.

Merci beaucoup Eric.

 

[ortolojf]

Rectificatif.

Avec le code ci-dessous, sous Brave le service worker s'installe jusqu'au bout sans rien demander.

Cependant le bouton Install ne s'affiche pas, mais l'interface deferredPrompt.prompt() ne s'affiche pas, et il n'y a aucun console.log() d'errreur.

Donc la seule possibilité est que window.addEventListener('beforeinstallprompt' fonctionne, mais pas le deferredPrompt.prompt().

J"'ai essayé en mettant le register avant ou après le beforeinstallprompt, mais çà ne marche pas.

Merci beaucoup de votre aide.

// Declare the deferredPrompt variable in the global scope
let deferredPrompt;

let installButton = document.getElementById("install");

if ("serviceWorker" in navigator) {
    // Registering Service Worker
    navigator.serviceWorker.register('/SW.js', { scope: '/' })
        .then(function(registration) {
            console.log("Service worker registered with scope: " + registration.scope);
        }).catch(function(err) {
            console.log("Service worker failed: " + err);
        });
    if ('BeforeInstallPromptEvent' in window) {
        window.addEventListener('beforeinstallprompt', event => {
            deferredPrompt = event;
            installButton.addEventListener("click", async () => {
                if (deferredPrompt) {
                    const result = await deferredPrompt.prompt();
                    console.log(`Install prompt was: ${result.outcome}`);
                    installButton.style.display = 'none';
                } else if (window.matchMedia('(display-mode: standalone)').matches) {

                    // hide our user interface that shows our A2HS button
                    installButton.style.display = 'none';

                    // The app is already installed
                    alert('You have already installed the app.');
                } else {
                    // hide our user interface that shows our A2HS button
                    installButton.style.display = 'none';

                    alert('Erreur : BeforeInstallPromptEvent event is null.');

                    // The app is uninstalled
                    deferredPrompt = null; // Reset the deferredPrompt variable
                }
            }).catch((error) => {

                installButton.style.display = 'none';

                console.log('Error occurred while prompting for installation:', error);

                deferredPrompt = null; // Reset the deferredPrompt variable
            })
        });
    } else {

        // hide our user interface that shows our A2HS button
        installButton.style.display = 'none';

        var isMobile = {
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            Symbian: function () {
                return navigator.userAgent.match(/symb/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Firefox: function () {
                return navigator.userAgent.match(/Firefox/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Samsung: function () {
                return navigator.userAgent.match(/SAMSUNG|Samsung|SGH-[I|N|T]|GT-[I|N]|SM-[A|N|P|T|Z]|SHV-E|SCH-[I|J|R|S]|SPH-L/i);
            },
            Windows: function () {
                return (
                    navigator.userAgent.match(/IEMobile/i) ||
                    navigator.userAgent.match(/WPDesktop/i)
                );
            }
        };

        var message = '';

        if(isMobile.iOS()) {

            message = 'Cliquez sur l\'icône <img src="/UI/fleche.jpg" />.<br>Sélectionnez "Ajouter à l\'écran d\'accueil" dans le menu.<br>Appuyez sur "Ajouter" en haut à droite.';
        } else if(isMobile.Samsung()) {

            message = 'Cliquez l\'icône "Install" sur la barre d\'adresse du haut,<br> ou sur "Menu" sur la barre du bas<br> puis "Ajouter à l\'écran d\'accueil".';
        } else {

            message = 'Cliquez sur le menu sur la barre du haut/bas<br> puis "Ajouter à l\'écran d\'accueil".';
        }

        const invite = document.createElement('h1');

        invite.classList.add("message");

        invite.innerHTML = 'Pour installer la PWA :<br>*********************<br>';

        const dialog = document.createElement('div');

        dialog.classList.add("invite");

        dialog.innerHTML = message;

        invite.append(dialog);

        document.body.append(invite);
    }
} else {

    installButton.style.display = 'none';

    const invite = document.createElement('h1');

    invite.classList.add("message");

    invite.innerHTML = 'Votre navigateur ne supporte pas les PWA';

    document.body.append(invite);
}

 

[nicodak]

Do you speak english? If so: https://stackoverflow.com/questions/

 

[ortolojf]

Excusez-moi.

Voilà, j'ai réussi à faire un programme qui, selon les navigateurs, intalle une PWA soit d'après l'event "beforeinstallprompt", soit en mode manuel, soit affiche à l'écran : "Votre navigateur ne supporte pas les PWA".

Tout est automatique, mais il me reste à savoir quelles sont toutes les méthodes pratiques manuelles d'installation, par rapport aux navigateurs.

Savez-vous où je pourrais trouver cette info ?

Merci beaucoup.

 

[ortolojf]

Bonjour

J'aurais besoin d'avoir des liens traitant de la progammation Mustache.

Mon problème est d'afficher plusieurs portions/blocs par pages html.

J'envisage de traiter du contenu json, comportant les contenus des portions à afficher, reliés ad hoc par du json destiné au positionnement des portions dans le html.

Ce positionnement devrait théoriquement être en arbre n-aire .

Mais quel syntaxe utiliser pour ce json de positionnement ?

Merci beaucoup.