[email protected]
Twitter
LinkedIn
GitHub
  • Blog
  • GitHub
  • CV

Jfa PWA Toolkit

Avril 5, 2019L'extrémité avantSans commentairesjfadev

Avec cette boîte à outils, vous pouvez facilement intégrer les caractéristiques les plus remarquables d'une PWA. Cette solution est facile à intégrer dans des projets plus anciens avec jQuery ou nouveaux frameworks Javascript. Ce projet est en développement. N'hésiter pas à l'essayer et a envoyer vos Issus et Pull Resquests dans Github.

🚀 Découvrez le dépôt sur GitHub.
📱 Testez la Démo (dépôt de la demo).

Caractéristiques

  • Web App Manifest
  • Structure de Fichiers d'Icônes
  • Precaching
  • Stratégies de mise en Cache
  • Notifications Push

Documentation

  • Documentation
  • Référence de l'API

A partir d'un Exemple

Important: Pour que cet exemple fonctionne parfaitement, il doit être utilisé dans localhost ou dans un domaine https et index.html se trouver à la racine du projet.

Cloner jfa-pwa-toolkit du dêpot GitHub et créer un index.html fichier et un offline.html fichier.

$ git clone --branch v1.0-beta [email protected]:jfadev/jfa-pwa-toolkit.git
$ mv jfa-pwa-toolkit my-pwa
$ cd my-pwa/
$ touch index.html
$ touch offline.html

Simple index.html squelette (squelette complet dans la documentation).
Coller ce squelette dans votre index.html fichier.

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Theme color -->
    <meta name="theme-color" content="#000" />
    <!-- PWA Manifest -->
    <link rel="manifest" href="/pwa/manifest.json"></link>
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/pwa/icons/chrome/chrome-favicon-16-16.png">
    <!-- Icons -->
    <!-- Splash Screen -->
    <title>JFA PWA Toolkit Example</title>
</head>
<body>
    <!-- Load JFA PWA Toolkit Configs -->
    <script type="text/javascript" src="/pwa/config.js"></script>
    <!-- Load JFA PWA Toolkit Lib -->
    <script type="text/javascript" src="/pwa/pwa.js"></script>
    <!-- Register principal Service Worker -->
    <script type="text/javascript">
        PWA.ServiceWorker.register();
    </script>
</body>
</html>

Coller par exemple ce simple html dans votre offline.html fichier.

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>OFFLINE - JFA PWA Toolkit Example</title>
</head>
<body>
    <p>No Internet connection!</p>
</body>
</html>

Simple example of manifest.json. Use app.webmanifest instead of manifest.json if you prefer.

{
    "dir": "ltr",
    "lang": "en-us",
    "name": "Your App Name",
    "scope": "/",
    "display": "standalone",
    "start_url": "/",
    "short_name": "Your App Short Name",
    "description": "Your App Description.",
    "orientation": "any",
    "theme_color": "#000",
    "background_color": "#000",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [{
            "src": "/pwa/icons/windows10/Square71x71Logo.scale-400.png",
            "sizes": "284x284"
        },
    ]
}

Exemple d'un simple config.js

const PWA_CONFIG = {
    app: {
        name: 'your-app-name',
        version: 'v1'
    },
    sw: {
        filepath: '/sw.js',
        offline_route: '/offline.html'
    },
    cache: {
        images: {
            active: true,
            maxentries: 50,
            maxageseconds: 24 * 60 * 60
        },
        statics: {
            active: true,
            maxentries: 50,
            maxageseconds: 24 * 60 * 60
        },
        fonts: {
            active: true,
            maxentries: 50,
            maxageseconds: 24 * 60 * 60
        },
        routes: {
            networkfirst: {
                active: true,
                regex: /.*/
            }
        }
    }
}

Exemples de code JS

Jouez avec plus de fonctionnalités avec la variable d'accès global PWA dans votre code Javascript comme dans les exemples suivants
Cet exemple utilise la bibliothèque jQuery. Dans la documentation vous pouvez trouver des exemples en pur ES6

Bouton pour vous abonner aux Push Notifications
$('#btn1').click(() => {
    if (
        PWA.Notification.isDefault() ||
        PWA.Notification.isGranted()
    ) {
        PWA.Push.getSubscription((subscription) => {
            if (subscription) {
                $('#msg1').html('You are now subscribed to receive Push Notifications!');
            } else {
                PWA.Push.subscribe((r) => {
                    $('#msg1').html('Congratulations! You are subscribed to receive Push Notifications!');
                });
            }
        });
    } else {
        $('#msg1').html("You've turned off Push Notifications. Allow Push Notifications in your browser settings.");
    }
});
CheckBox pour vous inscrire / désinscrire aux Push Notifications
$('#switch2').click(() => {
    if (
        PWA.Notification.isDefault() ||
        PWA.Notification.isGranted()
    ) {
        PWA.Push.getSubscription((subscription) => {
            if (subscription) {
                PWA.Push.unsubscribe((r) => {
                    $('#msg2').html('You have been unsubscribed to receive Push Notifications!');
                });
            } else {
                PWA.Push.subscribe((r) => {
                    $('#msg2').html('You have been unsubscribed to receive Push Notifications!');
                });
            }
        });
    } else {
        $('#msg2').html("You've turned off Push Notifications. Allow Push Notifications in your browser settings.");
    }
});
Affiche une demande l'autorisation contextuelle pour permettre les Notifications
$('#btn3').click(() => {
    PWA.Notification.requestPermission((status) => {
        $('#msg3').html(status);
    });
});
Obtenez le statut d'autorisation des Notifications
$('#btn4').click(() => {
    var permission = PWA.Notification.getPermission();
    $('#msg4').html(permission);
});
Afficher la notification envoyée par le navigateur
$('#btn5').click(() => {
    const options = {
        body: 'Extra content to display within the notification',
        icon: '../images/touch/chrome-touch-icon-192x192.png'
    };
    PWA.Notification.show('Notification Title', options, sent => {
        if (sent) {
            $('#msg5').html('The Notification has been sent');
        }
    });
});
Vérifiez si le navigateur supporte les Service Workers
$('#btn6').click(() => {
    if (PWA.Navigator.isSupportedServiceWorker()) {
        $('#msg6').html('This browser support Service Workers!');
    } else {
        $('#msg6').html('This browser does not support Service Workers.');
    }
});
Vérifiez si le navigateur supporte les Notifications
$('#btn7').click(() => {
    if (PWA.Navigator.isSupportedNotification()) {
        $('#msg7').html('This browser support Notifications!');
    } else {
        $('#msg7').html('This browser does not support Notifications.');
    }
});
Vérifiez si le navigateur est déconnecté
$('#btn8').click(() => {
    if (PWA.Navigator.isOffline()) {
        $('#msg8').html('No Internet connection!');
    } else {
        $('#msg8').html('You have an Internet connection!');
    }
});
Vider le cache de l'application du navigateur
$('#btn9').click(() => {
    PWA.Navigator.clearCache();
});

Cour de Récréation

Jouez avec la bibliothèque PWA et apprenez à l'utiliser facilement.

jsFiddle

Dépôt

⚡️ PWA Features to Any Website (very Fast & Easy)
https://github.com/jfadev/jfa-pwa-toolkit
31 forks.
251 stars.
10 open issues.

Recent commits:
  • Update README.md, GitHub
  • Update README.md, GitHub
  • Update README.md, GitHub
  • Update README.md, GitHub
  • Update README.md, GitHub

Reddit

: ES6, Javascript, Manifeste, Hors ligne, precache, Notifications Push, PWA, service pour les travailleurs
jfadev
https://jordifernandes.com
Programmeur et Développeur Web depuis 2006. Diplômé en Informatique de Gestion à Marseille 15+ années d'expérience dans les technologies Web.

Twitter

Mes Tweets

Posts Rencents

  • Afficher une publication Instagram spécifique dans WordPress avec Jfa Social Media Post
  • Créez une image personnalisée et distribuez-la sur Azure VMSS à l'aide de GitHub Actions
  • Calculateur de processus PHP-FPM
  • Jfa PWA Toolkit
  • Liste des backlinks pour SEO
  • Liste complete de générateurs de backlinks pour le positionnement SEO
  • Modal Dialog pour Material Design Lite
  • Exécuter une commande Symfony2 partir cronjobs dans CPanel sur un hébergement mutualisé
  • Détection d'AdBlock avec jQuery ou JavaScript
  • Vidéo: Introduction à Apache Cordova en espagnol

Catégories

  • Back-End (5)
  • DevOps (1)
  • L'extrémité avant (12)
  • Actualités (8)
  • SEO (2)
  • Outils (6)
  • Astuces (10)
  • Non classé (3)

Découvrer

  • Los Mejores Top 10
  • Boutique Slow Fashion
Twitter
LinkedIn
GitHub

© 2013-2022 Jordi Fernandes Alves (@jfadev)