[email protected]
Facebook
Gazouillement
LinkedIn
GitHub
  • Blog
  • GitHub
  • CV
    • LinkedIn
    • StackOverflow
  • 🙈
    • 🇺🇸 Anglais
    • 🇪🇸 Español
    • 🇫🇷 Français
    • 🇧🇷 Português

JFA PWA Toolkit

Avril 5, 2019BibliothèquesSans 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.

1
2
3
4
5
$ git clone --branch v1.0-beta git@github.com: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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>OFFLINE - JFA PWA Toolkit Example</title>
</head>
<body>
    <p>No Internet connection!</p>
</body>
</html>

Exemple simple de manifest.json. Utilisez app.webmanifest au lieu de manifest.json si vous préférez.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('#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
1
2
3
4
5
$('#btn3').click(() => {
    PWA.Notification.requestPermission((status) => {
        $('#msg3').html(status);
    });
});
Obtenez le statut d'autorisation des Notifications
1
2
3
4
$('#btn4').click(() => {
    var permission = PWA.Notification.getPermission();
    $('#msg4').html(permission);
});
Afficher la notification envoyée par le navigateur
1
2
3
4
5
6
7
8
9
10
11
$('#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
1
2
3
4
5
6
7
$('#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
1
2
3
4
5
6
7
$('#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é
1
2
3
4
5
6
7
$('#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
1
2
3
$('#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 Caractéristiques à tout site Web (très vite & Facile)
https://github.com/jfadev/jfa-pwa-toolkit
30 fourches.
234 étoiles.
9 questions ouvertes.
commits récents:

  • Mise à jour README.md, GitHub
  • Mise à jour README.md, GitHub
  • Mise à jour README.md, GitHub
  • Mise à jour README.md, GitHub
  • Mise à jour README.md, GitHub

Reddit

Transformez votre site existant en PWA avec cette bibliothèque JS from r/javascript

: ES6, Javascript, Manifeste, Hors ligne, precache, Notifications Push, PWA, service pour les travailleurs
jfadev
https://jordifernandes.com
Programmeur et analyste des systèmes depuis 2006. Diplômé en Informatique de Gestion à Marseille +10 années d'expérience dans les technologies Web. Actuellement VueJS & Symfony.

Articles liés

ECMAScript 6 (ECMAScript 2015): le nouvaux standard officiel de JavaScript approuvé

Juin 19, 2015jfadev

Traduire


Mes Tweets

Posts Rencents

  • 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
  • jQuery: Charger les images selon les besoins (lazy load)
  • Materializecss: un autre framework pour le Material Design
  • Répertoire de plus de 5.000 APIs

Liens Sponsorisés

Catégories

  • APIs (2)
  • Frameworks (8)
  • Bibliothèques (2)
  • Actualités (8)
  • Plugins (2)
  • Projets (1)
  • Sources (1)
  • Outils (4)
  • Astuces (7)

Découvrer

  • Los Mejores Top 10
  • Boutique Slow Fashion

Mots clés

3D Android API Apple Apps Babylon.js Backlinks Blog Bug Chrome Extension Database E-commerce ES6 Facebook Framework Game Engine Ghost Referrer Google Google Analytics HTML5 IndexedDB Internet des Objets iOS jQuery JS Material Design Messenger Native Apps PHP Portefeuille Referrer Spam Responsive Secret codes SEO SMS Spam Storage Symfony2 Éditeur de texte UI Web Developement WebGL Windows Phone WooCommerce Wordpress
Facebook
Gazouillement
LinkedIn
GitHub

© 2013-2019 Jordi Fernandes Alves