You can customise the look of PWA with custom CSS but with custom Javascript you can customise PWA in an even more advanced way. These Javascript examples will help you in it.
Notes:
- By default, Javascript section is hidden and disabled. You can manually activate it and access it. Just contact us for how to do it.
- Never allow your users to access this javascript section. You can enable the javascript access whenever you want to customise and then after you can disable the access.
- These examples are given to you FREE of cost without any support from us. If you want you can use it and customise it yourself or you can hire us for customisations, we will charge a nominal fee for our efforts and time.
- Javascript code will only take effect into PWA if you’ve enabled PWA Push notifications.
What can you do using custom Javascript for PWA?
(1) iPhone Standalone Popup: You can make an extra custom iPhone Standalone Popup. It means this popup will be displayed on iPhone only and only after PWA is added to home-screen (PWA Standalone mode). This popup will be displayed at the first visit only, so users don’t get annoyed!
What can you do with this type of popup?
- You can display a thank you message like “Thank you for installing our PWA” etc.
- You can inform or educate users about some features or tricks like on iPhone PWA Standalone mode, by default app language is English, so if you want you can inform users how to change app language etc.
PWA Custom Javascript code for iPhone Standalone Popup:
// iPhone Standalone Popup Text.
var ios_sl_popup_text = "You can change app language just by clicking on the My Account feature and then from the top-right settings icon.";
if(isMobile.iOS()&&navigator.standalone&&null==window.localStorage.getItem("check_ios_sl_displayed")){var myPopup=document.createElement("div");myPopup.className="ios_standalone_popup",myPopup.innerHTML="<div class='ios_sl_popup_overlay' id='ios_sl_popup'><div class='ios_sl_popup_center'><div id='ios_sl_popup_box'>"+ios_sl_popup_text+"</div><input id='close_ios_sl_popup' type='checkbox' onclick='closeSLiOSPopup()'><label for='close_ios_sl_popup' class='close'><div class='close_ios_sl_popup' id='close_ios_sl_popup'></div></label></div></div>",document.getElementById("customPopups").appendChild(myPopup)}function closeSLiOSPopup(){window.localStorage.setItem("check_ios_sl_displayed","1");var o=document.getElementById("close_ios_sl_popup"),p=document.getElementById("ios_sl_popup");1==o.checked?p.style.display="none":p.style.display="block"}
PWA Custom CSS code for iPhone Standalone Popup:
/* iPhone Standalone Popup CSS */
.ios_sl_popup_overlay {
position: absolute;
background: rgba(0,0,0,0.9);
height: 100%;
width: 100%;
}
.ios_sl_popup_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
#ios_sl_popup_box {
height: auto;
padding: 10px;
color: #333333;
background: #F5F5F4;
border-radius: 10px;
width: 280px;
border: 1px solid #333333;
line-height: 25px;
font-size: 16px;
text-align: center;
}
#close_ios_sl_popup {
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
top:-10px;
right:-10px;
cursor:pointer;
border: 1px solid #333333;
border-radius: 50%;
background-color: #F5F5F4;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='32.000000pt' height='32.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3e%3cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' fill='%23333333' stroke='none'%3e%3cpath id='closefb2' d='M72 248 c-9 -9 -4 -20 25 -50 l37 -38 -37 -38 c-29 -30 -34 -41 -25 -50 9 -9 20 -4 50 25 l38 37 38 -37 c30 -29 41 -34 50 -25 9 9 4 20 -25 50 l-37 38 37 38 c29 30 34 41 25 50 -9 9 -20 4 -50 -25 l-38 -37 -38 37 c-30 29 -41 34 -50 25z'/%3e%3c/g%3e%3c/svg%3e ");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
font-size: 25px;
text-align: center;
line-height: 16px;
padding: 5px;
}
(2) Android Standalone Popup: Same way, you can make an extra custom Android Standalone Popup. It means this popup will be displayed on Android only and only after PWA is added to home-screen (PWA Standalone mode). This popup will be displayed at the first visit only, so users don’t get annoyed!
Note: This is applicable to browsers that fully support PWA like Android Chrome.
PWA Custom Javascript code for Android Standalone Popup:
// Android Standalone Popup Text.
var android_sl_popup_text="Thanks for installing our WebApp. You can display your message here.";
if(isMobile.Android()&&window.matchMedia('(display-mode: standalone)').matches&&window.localStorage.getItem('check_android_sl_displayed')==null){var slPopup=document.createElement("div");slPopup.className="android_standalone_popup";slPopup.innerHTML="<div class='android_sl_popup_overlay' id='android_sl_popup'><div class='android_sl_popup_center'><div id='android_sl_popup_box'>"+android_sl_popup_text+"</div><input id='close_android_sl_popup' type='checkbox' onclick='closeAndroidSLPopup()'><label for='close_android_sl_popup' class='close'><div class='close_android_sl_popup' id='close_android_sl_popup'></div></label></div></div>";document.getElementById("customPopups").appendChild(slPopup);}function closeAndroidSLPopup(){window.localStorage.setItem("check_android_sl_displayed","1");var checkBox=document.getElementById("close_android_sl_popup");var android_sl_popup=document.getElementById("android_sl_popup");if(checkBox.checked==true){android_sl_popup.style.display="none";}else{android_sl_popup.style.display="block";}}
PWA Custom CSS code for Android Standalone Popup:
/* Android Standalone Popup CSS */
.android_sl_popup_overlay {
position: absolute;
background: rgba(0,0,0,0.9);
height: 100%;
width: 100%;
}
.android_sl_popup_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
#android_sl_popup_box {
height: auto;
padding: 10px;
color: #333333;
background: #F5F5F4;
border-radius: 10px;
width: 280px;
border: 1px solid #333333;
line-height: 25px;
font-size: 16px;
text-align: center;
}
#close_android_sl_popup {
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
top:-10px;
right:-10px;
cursor:pointer;
border: 1px solid #333333;
border-radius: 50%;
background-color: #F5F5F4;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='32.000000pt' height='32.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3e%3cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' fill='%23333333' stroke='none'%3e%3cpath id='closefb2' d='M72 248 c-9 -9 -4 -20 25 -50 l37 -38 -37 -38 c-29 -30 -34 -41 -25 -50 9 -9 20 -4 50 25 l38 37 38 -37 c30 -29 41 -34 50 -25 9 9 4 20 -25 50 l-37 38 37 38 c29 30 34 41 25 50 -9 9 -20 4 -50 -25 l-38 -37 -38 37 c-30 29 -41 34 -50 25z'/%3e%3c/g%3e%3c/svg%3e ");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
font-size: 25px;
text-align: center;
line-height: 16px;
padding: 5px;
}
(3) Ask for push permission after PWA is added to home-screen (Standalone mode):
Note: In the PWA Creator Module v2.5.0 and above, don’t use this code, you can do this directly in an editor, in the PWA Push subscribe prompt section.
By default, On Android Chrome, When you launch PWA in a browser, it will ask for a push subscription. Sometimes first time visitors don’t want to subscribe for push. So here is an opportunity for you to display push opt-in dialog only after PWA is added to home-screen (Standalone mode). While on desktop chrome, it will ask for push opt-in in the browser as it is.
In your custom javascript, by default you’ll find below code:
// Push subscribe permission dialog. AskPushPermission();
Just delete the above code and copy-paste below code there.
if(isMobile.Android()) { // Android
if(window.matchMedia('(display-mode: standalone)').matches) {
// Push subscribe permission dialog on installed PWA.
AskPushPermission();
} else {
console.log("PWA in browser mode");
}
} else { // Not Android
// Push subscribe permission dialog on desktop chrome.
AskPushPermission();
}
(4) Push subscribe success message & Welcome push notification:
Note: In the PWA Creator Module v2.5.0 and above, don’t use this code, you can do this directly in an editor, in the PWA Push subscribe prompt / success message section.
By default, on a successful subscription for PWA push, it will display a toast message like “Successfully subscribed for push”. If you want you can change this message from the javascript and you can also integrate a welcome push notification.
In your custom javascript, by default you’ll find below code:
// Push subscription successful message.
function subscribedSuccess(currentToken) {
document.getElementById("toast").innerHTML = "Successfully subscribed for push.";
var toast = document.getElementById("toast");
toast.className = "show";
setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 3000);
}
Here in above code, you can change the text “Successfully subscribed for push”.
If you want to add welcome push notification, just delete the above code and copy-paste the below code there. You can change the text for success message, welcome push title and body in the below code.
// Push subscription successful message.
function subscribedSuccess(currentToken) {
document.getElementById("toast").innerHTML = "Successfully subscribed for push.";
var toast = document.getElementById("toast");
toast.className = "show";
setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 3000);
// Welcome push notification on successful push subscription.
if (window.Notification && "PushManager" in window) {
var title = "Welcome to our app!"; // Change push title
var options = {
body: "Thanks for subscribing us!", // Change push message body
icon: "./android-chrome-512x512.png",
data: {
time: new Date(Date.now()).toString(),
click_action: "index.html"
}
};
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification(title, options)
});
}
}
(5) Custom PWA Install Popup for Android: By default, PWA supported browsers like Android Chrome & Edge display PWA install banner at bottom as shown in the left image below. You can disable that default banner and add a custom popup as shown in the right image below. This popup will be displayed every time in the Android PWA supported browsers until the user installs the PWA. Your PWA icon will be auto fetched in a popup, while you can change the popup text from the javascript code.
PWA Custom Javascript code for Android Custom Install Popup:
// Android Custom Install Popup Text.
var android_ci_popup_text = "Add this WebApp to your Android's home screen for easy access every time. Just click on the button below.";
var android_ci_btn_text = "Add to Home screen";
if(isMobile.Android()){var ciPopup=document.createElement("div");ciPopup.className="android_ci_popup",ciPopup.innerHTML="<div class='android_ci_popup_overlay' id='android_ci_popup'><div class='android_ci_popup_center'><div id='android_ci_popup_box'><img src='./mstile-70x70.png' class='pwaicon'>"+android_ci_popup_text+"<button class='android_add_button'>"+android_ci_btn_text+"</button></div><input id='close_android_ci_popup' type='checkbox' onclick='closeAndroidCIPopup()'><label for='close_android_ci_popup' class='close'><div class='close_android_ci_popup' id='close_android_ci_popup'></div></label></div></div>",document.getElementById("customPopups").appendChild(ciPopup);let e;const b=document.querySelector(".android_add_button"),c=document.querySelector(".android_ci_popup");window.addEventListener("beforeinstallprompt",o=>{o.preventDefault(),e=o,b.style.display="inline-block",c.style.display="block",b.addEventListener("click",o=>{b.style.display="none",c.style.display="none",e.prompt(),e.userChoice.then(o=>{"accepted"===o.outcome?console.log("User accepted the A2HS prompt"):console.log("User dismissed the A2HS prompt"),e=null})})})}function closeAndroidCIPopup(){var o=document.getElementById("close_android_ci_popup"),e=document.getElementById("android_ci_popup");1==o.checked?e.style.display="none":e.style.display="block"}
PWA Custom CSS code for Android Custom Install Popup:
/* Android Custom Install Popup CSS */
.android_ci_popup { display: none; }
.android_ci_popup_overlay {
position: absolute;
background: rgba(0,0,0,0.9);
height: 100%;
width: 100%;
}
.android_ci_popup_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
#android_ci_popup_box {
height: auto;
padding: 10px;
color: #333333;
background: #F5F5F4;
border-radius: 10px;
width: 280px;
border: 1px solid #333333;
line-height: 25px;
font-size: 16px;
text-align: center;
}
#close_android_ci_popup {
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
top:-10px;
right:-10px;
cursor:pointer;
border: 1px solid #333333;
border-radius: 50%;
background-color: #F5F5F4;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='32.000000pt' height='32.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3e%3cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' fill='%23333333' stroke='none'%3e%3cpath id='closefb2' d='M72 248 c-9 -9 -4 -20 25 -50 l37 -38 -37 -38 c-29 -30 -34 -41 -25 -50 9 -9 20 -4 50 25 l38 37 38 -37 c30 -29 41 -34 50 -25 9 9 4 20 -25 50 l-37 38 37 38 c29 30 34 41 25 50 -9 9 -20 4 -50 -25 l-38 -37 -38 37 c-30 29 -41 34 -50 25z'/%3e%3c/g%3e%3c/svg%3e ");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
font-size: 25px;
text-align: center;
line-height: 16px;
padding: 5px;
}
.android_add_button {
background-color: #4169e1;
color: #ffffff;
padding: 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 5px;
border: none;
border-radius: 10px;
}
(6) Custom Informative Popup: You can display a custom informative popup based on your own javascript logic like browser based, device based etc.
Here are some use cases…
- As you know, on the android system, Chrome browser has the best support for PWA. So you can display a popup (like Open this WebApp in the Android Chrome browser for the best experience) for users that visit your PWA from non-chrome browsers like firefox, opera etc on the android.
- As you know, on the iOS system, Only Safari browser has partial support for PWA. So you can display a popup (like Open this WebApp in the Safari browser for the best experience) for users that visit your PWA from other browsers like chrome etc on the iOS.
- As you know, on the desktop, Chrome browser has the best support for PWA. So you can display a popup (like Open this WebApp in the Desktop Chrome browser for the best experience) for users that visit your PWA from non-chrome browsers like safari, firefox, opera etc on the desktop.
- We’ve just given examples of informative popups but you can also customise this code and achieve something more advanced like push opt-in popup etc.
You have to put your own logic in IF condition in the javascript code otherwise popup will be displayed everywhere & every time.
PWA Custom Javascript code for Custom Informative Popup:
// Custom Informative Popup Text.
var custom_info_popup_text = "This is just for a testing purpose.";
/* Put your own logic in IF condition, otherwise popup will be displayed everywhere and every time.
if() {
*/
var infoPopup = document.createElement("div");
infoPopup.className = "custom_informative_popup";
infoPopup.innerHTML = "<div class='custom_info_popup_overlay' id='custom_info_popup'><div class='custom_info_popup_center'><div id='custom_info_popup_box'>"+custom_info_popup_text+"</div><input id='close_custom_info_popup' type='checkbox' onclick='closeCustomPopup()'><label for='close_custom_info_popup' class='close'><div class='close_custom_info_popup' id='close_custom_info_popup'></div></label></div></div>";
document.getElementById("customPopups").appendChild(infoPopup);
/*
}
*/
function closeCustomPopup() {
var checkBox = document.getElementById("close_custom_info_popup");
var custom_info_popup = document.getElementById("custom_info_popup");
if (checkBox.checked == true){
custom_info_popup.style.display = "none";
} else {
custom_info_popup.style.display = "block";
}
}
PWA Custom CSS code for Custom Informative Popup:
/* Custom Informative Popup CSS */
.custom_info_popup_overlay {
position: absolute;
background: rgba(0,0,0,0.9);
height: 100%;
width: 100%;
}
.custom_info_popup_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
#custom_info_popup_box {
height: auto;
padding: 10px;
color: #333333;
background: #F5F5F4;
border-radius: 10px;
width: 280px;
border: 1px solid #333333;
line-height: 25px;
font-size: 16px;
text-align: center;
}
#close_custom_info_popup {
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
top:-10px;
right:-10px;
cursor:pointer;
border: 1px solid #333333;
border-radius: 50%;
background-color: #F5F5F4;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='32.000000pt' height='32.000000pt' viewBox='0 0 32.000000 32.000000' preserveAspectRatio='xMidYMid meet'%3e%3cg transform='translate(0.000000,32.000000) scale(0.100000,-0.100000)' fill='%23333333' stroke='none'%3e%3cpath id='closefb2' d='M72 248 c-9 -9 -4 -20 25 -50 l37 -38 -37 -38 c-29 -30 -34 -41 -25 -50 9 -9 20 -4 50 25 l38 37 38 -37 c30 -29 41 -34 50 -25 9 9 4 20 -25 50 l-37 38 37 38 c29 30 34 41 25 50 -9 9 -20 4 -50 -25 l-38 -37 -38 37 c-30 29 -41 34 -50 25z'/%3e%3c/g%3e%3c/svg%3e ");
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center center;
font-size: 25px;
text-align: center;
line-height: 16px;
padding: 5px;
}
(7) Custom Loader: Custom javascript isn’t limited to PWA popups only but you can even do more stuff with it like you can display a custom loader till web app iframe loads etc.
PWA Custom Javascript code for Custom Loader:
// Custom Loader
var myLoader = document.createElement("div");
myLoader.id = "loader";
myLoader.className = "loader";
document.getElementById("customPopups").appendChild(myLoader);
document.getElementById("mobile_overview").addEventListener("load", function () { document.getElementById("loader").style.display = "none"; });
PWA Custom CSS code for Custom Loader:
#loader {
border: 12px solid #f3f3f3;
border-radius: 50%;
border-top: 12px solid #444444;
width: 70px;
height: 70px;
animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }
.loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
You can customise this CSS to display your own gif loader image too.
#loader {
background: url(https://i.imgur.com/CJnH9sR.gif) center center no-repeat;
}
.loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
(8) Custom Top Banner Ad: You can also display a custom advertisement banner on Android & iPhone PWA Standalone mode. It will always display banner ad on the top position and user can’t close it. It will be displayed into installed PWA only. On click of a banner, your click action URL will be opened in a new tab.
You can change a banner image URL & extra blank space background color from the CSS code & you can change click action URL from the javascript code below.
PWA Custom Javascript code for Custom Banner Advertisement:
if(isMobile.iOS() && navigator.standalone) { // iPhone Standalone mode.
var display_banner_ad = true;
} else if(isMobile.Android() && window.matchMedia('(display-mode: standalone)').matches) { // Android Standalone mode.
var display_banner_ad = true;
} else { // Browser mode
var display_banner_ad = false;
}
// Custom Top Banner Advertisement.
if(display_banner_ad == true) {
var myBanner = document.createElement("div");
myBanner.className = "banner_ad";
myBanner.innerHTML = "<div class='banner' id='banner'></div>";
document.querySelector(".iphone_content").appendChild(myBanner);
document.querySelector("iframe").style.height = "calc(100% - 50px)";
document.querySelector("iframe").style.top = "50px";
// Click action
document.getElementById("banner").addEventListener("click", function(){
window.open("https://example.com", "_blank");
});
}
PWA Custom CSS code for Custom Banner Advertisement:
/* Custom Top Banner Advertisement CSS */
@media all and (display-mode: standalone) {
.banner_ad {
background-color: #ffffff; /* Background color for extra blank space. */
width: 100%;
height: 50px;
}
.banner {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 350px;
height: 50px;
background: url(https://i.imgur.com/fmMuCa9.png); /* 350x50 px Banner Image URL */
cursor: pointer;
}
}