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.

 

[ortolojf]

Voilà, voilà.

Je peux parcourir en php les fichiers json et les traiter.

Flemmard comme je suis, je peux difficilement faire autre chose que du propriétaire ( par types de pages ) pour la génération de javascript vers html dans le service worker.

J'avais l'intention de faire pour celà une sorte de framework automatique, mais c'est probablement hors de ma portée.

Cà avance, cà avance, t'as pas vu tous'qu'on dépense...

A plus.

 

[spout]

Un vrai flemmard aurait utilisé un framework : React ou Vue.js couplé à Google Workbox qui génère le service worker automatiquement au lieu de réinventer continuellement la roue.

 

[ortolojf]

Excusez-moi, je suis béjaune avec Mustache.

Sachant que la fonction render(template, data) associe les data au template, donc rend la page html complète, est-il vrai qu'il ne suffise pour celà, que de présenter les data correctes adaptées au template ?

Dans ce cas, ma question précédente ( fractionner les pages html par blocs ) n'est pas valide.

Ce serais super sympa de me donner des liens vers des réalisation Mustache complètes.

Merci beaucoup de votre réponse.

Amicalement.

 

[ortolojf]

Pour l'instant.

J'ai fait les templates des trois listes des courses, et commencé celui des pronostics des courses passées.

En même temps, j'ai programmé les fonctions générant les datas des trois templates.

Le tout en json vérifié.

A propos de la syntaxe json, est-ce vrai que les number peuvent ne pas être entourés de doubles quotes ?

Merci beaucoup de votre aide.

 

[ortolojf]

Y a du progrès.

J'ai fait les data des pages de stats/pronos, celà donne :

Par fichier json :

83689 octets,

3270 lignes.

Pas encore testé les affichages avec Mustache.