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

JFA PWA Toolkit

April 5, 2019LibrariesNo Commentsjfadev

With this toolkit you can easily integrate the most remarkable features of the PWA. This solution is easily integrated into older projects with jQuery or new Javascript frameworks. This project is in development and do not hesitate to try it and send your issus and pull resquest in Github.

🚀 Discover the repository on GitHub.
📱 Test a Demo (demo repository).

Features

  • Web App Manifest
  • Icons Structure Files
  • Precaching
  • Caching Strategies
  • Push Notifications

Documentation

  • Documentation
  • API Reference

Starting with an Example

Important: For this example to work perfectly, it must be used in localhost or in an https domain and the index.html be found in the root of the project.

Clone jfa-pwa-toolkit from the Github repository and create a index.html file and a offline.html file.

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 skeleton (complete skeleton in documentation).
Paste this skeleton in your index.html file.

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>

Paste for example this simple html in your offline.html file.

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>

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

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"
        },
    ]
}

Example of a 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: /.*/
            }
        }
    }
}

JS Code examples

Play with more features with the global access variable PWA in your Javascript code as in the following examples
This examples use jQuery library. In the documentation to find examples in pure ES6

Button to subscribe to 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 toggle to subscribe/unsubscribe to 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.");
    }
});
Displays a pop-up requesting permission to allow Notifications
1
2
3
4
5
$('#btn3').click(() => {
    PWA.Notification.requestPermission((status) => {
        $('#msg3').html(status);
    });
});
Get the Notifications permission status
1
2
3
4
$('#btn4').click(() => {
    var permission = PWA.Notification.getPermission();
    $('#msg4').html(permission);
});
Show Notification sent by the browser
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');
        }
    });
});
Check if the browser support 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.');
    }
});
Check if the browser support 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.');
    }
});
Check if the browser is offline
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!');
    }
});
Clear the browser app cache
1
2
3
$('#btn9').click(() => {
    PWA.Navigator.clearCache();
});

Playground

Play with the PWA library and learn to use it easily.

JSFiddle

Repository

⚡️ PWA Features to Any Website (very Fast & Easy)
https://github.com/jfadev/jfa-pwa-toolkit
30 forks.
234 stars.
9 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

Turn your existing site into PWA with this JS library from r/javascript

: ES6, Javascript, Manifest, Offline, Precache, Push Notifications, PWA, Service Worker
jfadev
https://jordifernandes.com
Programmer and systems analyst since 2006. Graduate in Software Engineering in Marseille +10 years of experience in Web Technologies. Currently VueJS & Symfony.

Related Posts

ECMAScript 6 (ECMAScript 2015): el nuevo estándar oficial de JavaScript aprovado

June 19, 2015jfadev

Translate


My Tweets

Rencent Posts

  • JFA PWA Toolkit
  • Lista de backlinks para posicionamiento web
  • Lista completa de generadores de backlinks para posicionamiento SEO
  • Modal Dialog for Material Design Lite
  • Run Symfony2 command from cronjobs in CPanel on a shared host
  • Detecting AdBlock with jQuery or JavaScript
  • Video: Introduction to Apache Cordova in Spanish
  • jQuery: Cargar imagenes a medida que se necesitan (lazy load)
  • Materializecss: another framework for Material Design
  • Directory of more of 5.000 APIs

Sponsored Links

Categories

  • APIs (2)
  • Frameworks (8)
  • Libraries (2)
  • News (8)
  • Plugins (2)
  • Projects (1)
  • Sources (1)
  • Tools (4)
  • Tricks (7)

Discover

  • Los Mejores Top 10
  • Slow Fashion Shop

Tags

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 of Things iOS jQuery JS Material Design Messenger Native Apps PHP Portfolio Referrer Spam Responsive Secret codes SEO SMS Spam Storage Symfony2 Text editor UI Web Developement WebGL Windows Phone WooCommerce Wordpress
Facebook
Twitter
LinkedIn
GitHub

© 2013-2019 Jordi Fernandes Alves