JSFiddle - React, Tailwind, and code Playground

Push notification management

by tonytlwu

HTML

<script src="https://api.fliplet.com/sdk.js"></script>
<style type="text/css">
  @font-face {
    font-family: "fl-icon";
    src: url("https://cdn.fliplet.com/apps/7871/20769eef704c8da760cdc2103609fe75148-489-3421.ttf");
  }

  @font-face {
    font-family: "Open Sans Bold Italic";
    src: url("https://cdn.fliplet.com/apps/3155/42b7d4f2aaa5df2c4dba21b1f0640690355-992-9959.ttf");
  }

  @font-face {
    font-family: "Open Sans Italic";
    src: url("https://cdn.fliplet.com/apps/3327/e4ab457cd2b1a0f971d852eee1c7ace2904-754-1005.ttf");
  }

  @font-face {
    font-family: "Open Sans Bold";
    src: url("https://cdn.fliplet.com/apps/3327/ae3151e9a434265290cf437c0bde0b92193-684-5971.ttf");
  }

  @font-face {
    font-family: "Open Sans Extrabold Italic";
    src: url("https://cdn.fliplet.com/apps/3327/a0f6ad1ad85edc244a80d4135add79f9072-935-2092.ttf");
  }

  @font-face {
    font-family: "Open Sans Light";
    src: url("https://cdn.fliplet.com/apps/3327/8855d32c609998f761f7bcb4e3131b9d889-477-0700.ttf");
  }

  @font-face {
    font-family: "Open Sans";
    src: url("https://cdn.fliplet.com/apps/3327/e7031eb42a6e73799ca9572abc1b93c5922-569-2127.ttf");
  }

  @font-face {
    font-family: "Open Sans Semibold";
    src: url("https://cdn.fliplet.com/apps/3327/35a026ec2cacb4aa52e71305c75bb71d153-806-6299.ttf");
  }

  @font-face {
    font-family: "Open Sans Semibold Italic";
    src: url("https://cdn.fliplet.com/apps/3327/f9ddcbe219bf854e3bcae1e51c350357646-469-4245.ttf");
  }

  @font-face {
    font-family: "Open Sans Light Italic";
    src: url("https://cdn.fliplet.com/apps/3327/aacdb846d21f199216d4acac83fcd422824-317-1067.ttf");
  }

  @font-face {
    font-family: "Open Sans Extrabold";
    src: url("https://cdn.fliplet.com/apps/3327/cb1df01c316e4853c6eec211398d5068919-823-4450.ttf");
  }

</style>
<link rel="stylesheet" type="text/css" href="https://cdn.api.fliplet.com/assets/fliplet-core/1.0/fliplet-core.bundle.css?_=5f2ffb" charset="utf-8">
<link...

SCSS

$highlightColor: #00abd1;
$secondaryColor: #ed9119;
$textColor: #333;

html {
  .btn-primary {
    background-color: $highlightColor !important;
    color: #fff;
  }  
  
  body {
    padding-top: 44px;
  }
  
  .popup-screen {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .popup-wrapper .popup-bottom {
    height: auto;
    position: static;
  }

  .popup-wrapper .popup-content {
    padding-bottom: 20px;
  }
  
  .popup-wrapper {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 5px 25px rgba(51, 51, 51, 0.3);
  }
  
  .popup-wrapper .popup-content .popup-title {
    padding: 0;
  }
  
  .popup-wrapper .popup-bottom button {
    font-size: 1em;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
    border-bottom: none;
    background-color: transparent;
    /* color: $highlightColor; */
    color: inherit;
  }

/*
  .popup-wrapper .popup-bottom {
    padding: 15px;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
  }
  
  .popup-wrapper .popup-bottom button {
    border-top: none;
    margin-top: 10px;
    border-radius: 5px;
  }
*/

  .popup-wrapper .popup-bottom button:first-child {
    margin-top: 0;
    color: inherit;
  }
  
  .popup-wrapper .popup-bottom button.primary {
    background-color: transparent;
    color: $highlightColor;
  }

  .alert-unavailable, .alert-default, .alert-denied {
    display: none;
  }
  
  [data-unsubscribe] {
    display: none;
  }
    
  .overlay-about-app {
    .overlayPanel {
      border-radius: 20px;
      
      .closeButton:hover {
        background-color: #fff;
        color: $textColor;
      }
    }

    .fliplet-info {
      padding: 25px 25px 0;
      
      .update-buttons {
        margin-left: -25px;
        margin-right: -25px;
        margin-top: 25px;
        font-size: 16px;
      }
      
      .app-info .alert {
        margin-top: 10px;
      }
    }
  }
}

JavaScript

/* CONFIG */

var platform = 'web'; // native, web
var webAppInIframe = false; // Set as TRUE to simulate web app embedded in an iframe
var notificationPermission = webAppInIframe ? 'denied' : 'default'; // default, allow, denied
var browserSupportsNotifications = true; // Set as FALSE to simulate browsers that do not support push notifications
var userIsSubscribed = false; // Set as TRUE to simulate a user with an existing subscription ID
var autoAsk = true;

/* FUNCTIONS */

function showAsk() {
	if (userIsSubscribed) {
  	return;
  }
  
	if (!checkNotificationSupport()) {
    return;
  }
  
	checkBrowser().then(function (permission) {
  	if (permission === 'denied') {
    	// showDenied();
      return;
    }
    
    $('.popup-ask').addClass('ready');
	});
}

function hideAsk() {
	$('.popup-ask').removeClass('ready');
}

function showDenied() {
	$('.popup-denied').addClass('ready');
}

function hideDenied() {
	$('.popup-denied').removeClass('ready');
}

function showWaiting() {
	$('.popup-waiting').addClass('ready');
}

function hideWaiting() {
	$('.popup-waiting').removeClass('ready');
}

function subscriptionError(message = '(System error messaage will be shown here)') {
  Fliplet.UI.Toast.error(message, {
    message: 'Unable to turn on push notification',
    duration: 4000
  });
}

function getPermission() {
	return notificationPermission;
}

function setPermission(permission) {
	notificationPermission = permission;
}

function checkNotificationSupport() {
  if (!browserSupportsNotifications) {
    $('[data-subscribe]').hide();
    $('.alert-unavailable').show();
    return false;
  }
  
  return true;
}

function toggleSubscribe(subscribed) {
	if (typeof subscribed === 'undefined') {
  	userIsSubscribed = !userIsSubscribed;
  } else {
 		userIsSubscribed = !!subscribed;
  }
  
  if (userIsSubscribed) {
  	$('[data-subscribe]').hide();
    $('[data-unsubscribe]').css('display', 'inline-block');
  } else {
  	$('[data-unsubscribe]').hide();
   ...