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

Jfa PWA Toolkit

April 5, 2019Front-EndNo 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.

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

<!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.

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

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

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
$('#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
$('#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
$('#btn3').click(() => {
    PWA.Notification.requestPermission((status) => {
        $('#msg3').html(status);
    });
});
Get the Notifications permission status
$('#btn4').click(() => {
    var permission = PWA.Notification.getPermission();
    $('#msg4').html(permission);
});
Show Notification sent by the browser
$('#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
$('#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
$('#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
$('#btn8').click(() => {
    if (PWA.Navigator.isOffline()) {
        $('#msg8').html('No Internet connection!');
    } else {
        $('#msg8').html('You have an Internet connection!');
    }
});
Clear the browser app cache
$('#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
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, Manifest, Offline, Precache, Push Notifications, PWA, Service Worker
jfadev
https://jordifernandes.com
Programmer and Web Developer since 2006. Graduate in Software Engineering in Marseille 15+ years of experience in Web Technologies.

Twitter

My Tweets

Rencent Posts

  • Display a specific Instagram post in WordPress with Jfa Social Media Post
  • Build a custom image and distribute them to Azure VMSS using GitHub Actions
  • PHP-FPM Process Calculator
  • Jfa PWA Toolkit
  • List of backlinks for SEO
  • Full list backlinks generators for SEO positioning
  • 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

Categories

  • Back-End (5)
  • DevOps (1)
  • Front-End (12)
  • News (8)
  • SEO (2)
  • Tools (6)
  • Tricks (10)
  • Uncategorized (3)

Discover

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

© 2013-2022 Jordi Fernandes Alves (@jfadev)