Jfa PWA Toolkit Playground

by jfadev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://gitcdn.link/repo/jfadev/jfa-pwa-toolkit/master/pwa/config.js"></script>
<script src="https://gitcdn.link/repo/jfadev/jfa-pwa-toolkit/master/pwa/pwa.js"></script>
<div class="container text-center">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h1 class="h1">PWA TOOKIT</h1>
            <h2 class="h2">PLAYGROUND</h2>
            <br>
            <br>
        </div>
        
        <!-- Check if the browser support Notifications -->
        <div class="col-md-6 offset-md-3">
            <div class="alert alert-primary" role="alert">
                <span id="msg1"></span>
            </div>            
        </div>
        <div class="col-md-6 offset-md-3">
            <button id="btn1" type="button" class="btn btn-outline-primary btn-lg btn-block">
                Subscribe to Push Notifications!
            </button>
            <br>
            <br>
        </div>
        
        <!-- Checkbox toggle to subscribe/unsubscribe to Push Notifications -->
        <div class="col-md-6 offset-md-3">
            <div class="alert alert-secondary" role="alert">
                <span id="msg2"></span>
            </div>
        </div>
        <div class="col-md-6 offset-md-3">
            <div class="custom-control custom-switch">
                <input id="switch2" type="checkbox" class="custom-control-input">
                <label class="custom-control-label" for="switch2">
                    Toggle to subscribe/unsubscribe to Push Notifications
               ...

JavaScript

// 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:...