Incorporating a Progressive Web Application (PWA) into your Blogger site helps in improving your blog. PWA have better performance and can work even offline or as a mobile web app that acts like a mobile app. However, since Blogger does not permit the direct upload of files, we will find an alternative way to implement a PWA to your blog.
This guide will cover everything you need to know starting from where to include the code, advantages and disadvantages, the devices supported, to the external hosting of the required files.
Table of Contents
1. What is a PWA?
2. Supported Devices and Browsers
3. Benefits of Adding a PWA to Your Blog
4. Limitations and Workarounds on Blogger
5. Where to Place the Code on Blogger
6. Steps to Implement a PWA on Blogger
a. Creating the Manifest File
b. Hosting and Adding the Service Worker
c. Creating the Install Notification
7. Conclusion
1. What is a PWA?
A Progressive Web App (PWA), or something that can also be defined more simply as a web application, mimics native applications in its functioning. It introduces capabilities like notification use, network free usage, and installation on mobile home screens which enhance the experience of using the web.
By motivational apps we mean a web application that displays the typical features of software: it is made on the basis of HTML, CSS, and Java scripts and can be used independently even without being online or physically including the software into mobile devices.
2. Supported Devices and Browsers
Supported Devices:
There are many devices and browsers that do not completely support PWAs. There are supported devices as follows:
Android Phones: Most modern Android smartphones (Android 5.0 and newer) are compatible with PWAs utility.
iPhones: Limited support of iPhone, (iOS 11.3 and later) avail this. PWAs work but without the push-notifications of the app or background sync.
Desktops : Google’s Chrome, Mozilla’s Firefox and Microsoft’s Edge mostly support the PWAs on the Window, Mac OSX and Linux.
Supported Browsers:
Chrome: Full support (Android, Desktop).
Firefox: Supported with some limitations.
Safari: Basic support, no notifications or background sync (iOS).
Microsoft Edge: Full support on desktop and mobile.
Note: Internet Explorer doesn’t support PWAs.
3. Benefits of Adding a PWA to Your Blog
Offline Functionality: Users can access your site even without an internet connection.
Improved Load Times: PWAs use caching to preload content, speeding up your blog for returning visitors.
Mobile-Friendly: Users can install your blog on their home screens and access it like a regular app.
No Need for App Stores: PWAs eliminate the need to publish your app on app stores.
4. Limitations and Workarounds on Blogger
Since Blogger doesn’t allow file uploads directly to the root directory (like service-worker.js), you’ll need to use external hosting services to store files such as your service worker.
Workaround:
Host the service worker on an external service like GitHub Pages, Firebase Hosting, or any web hosting service.
Ensure that the start_url and other paths in the PWA code reflect your Blogger domain.
5. Where to Place the Code on Blogger
For Blogger, the required PWA code must be placed in specific sections of your theme:
1. Manifest File: Add this in the <head> section.
2. Service Worker Registration: Add this JavaScript before the closing </body> tag.
3. Service Worker Script: Upload this externally (GitHub Pages or Firebase) and link it in your blog.
6. Steps to Implement a PWA on Blogger
a. Creating the Manifest File
1. Manifest JSON is a file that describes your PWA (name, icons, and theme). Add this script in your Blogger theme's <head> section:
<script> const domain = window.location.origin; const manifest = { "name": "Your Blog Name", "short_name": "Your Blog", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#3f51b5", "icons": [ { "src": `${domain}/path-to-192x192-icon.png`, "sizes": "192x192", "type": "image/png" }, { "src": `${domain}/path-to-512x512-icon.png`, "sizes": "512x512", "type": "image/png" } ] }; const manifestScript = document.createElement('script'); manifestScript.type = 'application/ld+json'; manifestScript.textContent = JSON.stringify(manifest); document.head.appendChild(manifestScript); </script>
Explanation:
Icons: Make sure that the proper paths to your icons are followed, these are the images that appear on the home screens of the users when users install your PWA.
start_url: This replaces the URL for users who launch the PWA in a way. For Blogger it should be / (your blog url) homepage.
b. Hosting and Adding the Service Worker
Since Blogger doesn’t support file uploads directly, you need to host your service worker externally. Here's how you can do that:
1. Host the Service Worker:
Upload the service-worker.js file to GitHub Pages, Firebase Hosting, or any web hosting platform.
2. Service Worker Code (This file should be hosted externally):
// // Try this Code Highlighting Service // The service is absolutely free. // function onClick("Highlight", code) { return highlight(code) } // // Customize your settings and save the URL for later use. // function saveCode() { throw new Error("We don't save your code!"); } // // If you want to help the author, just Buy Me a Coffee. // function helpAuthor() { return "https://www.buymeacoffee.com/antonshevchuk" }
3. Registering the Service Worker:
Add this JavaScript code just before the closing </body> tag of your Blogger theme:
<script> const domain = window.location.origin; if ('serviceWorker' in navigator) { navigator.serviceWorker.register(`${domain}/service-worker.js`) .then((registration) => { console.log('Service Worker registered:', registration); }) .catch((error) => { console.log('Service Worker registration failed:', error); }); } </script>
Double-check that the URL in the register() method is correctly pointing to the same location where you hosted your service-worker.js.
c. Creation of the Install Notification
It is necessary to give users a way of installing your PWA and this can be achieved by creating a notification which appears when users visit your blog. Below is an correct of HTML code for the notification:
Paste this code Just before closing </body> tag
<div id="pwa-notification" style="display:none;"class="pwa-notification">
<div class="close_btn_cnt">
<p>Install Our App</p>
<button id="close-btn">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><defs><style>.cls-1{fill:#000;fill-rule:evenodd;}</style></defs><title>cross</title><path class="cls-1" d="M6,6H6a20.53,20.53,0,0,1,29,0l26.5,26.49L87.93,6a20.54,20.54,0,0,1,29,0h0a20.53,20.53,0,0,1,0,29L90.41,61.44,116.9,87.93a20.54,20.54,0,0,1,0,29h0a20.54,20.54,0,0,1-29,0L61.44,90.41,35,116.9a20.54,20.54,0,0,1-29,0H6a20.54,20.54,0,0,1,0-29L32.47,61.44,6,34.94A20.53,20.53,0,0,1,6,6Z"/></svg>
</button>
</div>
<div id="main_pwa_cnt">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1HUkxxsdJWeS6HHHAYkY5A_qLC9Ou92Jv4a3U1xj2rkujoZQQrfnVMdJyrSuFpSoOU8kAAKfX_THa81jyZIBdkiBHq7elGglmZKKREhe5SwYCxOZ3yZwlgM54Z51nA-TYBYTnoNGHW3VHtKRzQI4dYDgAf96ZK6ulhkICZ5baoFESFNv88MaCo8xtp-4/s3264/20240813_202533.png" alt=""/>
<p id="install-message">Install our app for a better experience!</p>
<button id="install-btn">Install</button>
</div>
</div>
Css for notification
Paste this code Just before
closing </b:skin> tag
.pwa-notification {
position: fixed;
display:block;
left: 50%;
transform: translateX(-50%);
background-color: #FFFFFF;
color: #000;
padding: 15px;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
backdrop-filter: blur(10px);
z-index: 1000;
width: 300px;
text-align: center;
transition: top 0.5s ease-in-out; /* Smooth transition for sliding */
top: -100px; /* Initially hide above the viewport */
}
#main_pwa_cnt{
display:flex;
}
#close-btn svg{
height: 10px;
width: auto;
color: black;
}
#close-btn {
border: none;
outline:none;
background: transparent;
display: flex;
text-align: right;
align-items: right;
justify-content: right
}
.close_btn_cnt{
display: flex;
text-align: right;
align-items: right;
justify-content: space-between;
margin-bottom:10px;
}
.pwa-notification img{
height:38px;
width:38px;
display: flex
}
.pwa-notification p {
margin: 0;
font-size: 13px;
opacity:0.5;
margin:0;
}
.pwa-notification #install-btn {
background-color: #fff;
color: #3f51b5;
border: none;
padding:0;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
height:10px;
font-weight:470;
}
/* Class for animation */
.show-notification {
top: 20px; /* Slide-in position */
}
Paste this code Just
before closing </body>> tag
<script>
let deferredPrompt;
// Check if the app is already installed using local storage
if (!localStorage.getItem('pwaInstalled')) {
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the default prompt from appearing automatically
e.preventDefault();
deferredPrompt = e;
// Show the custom notification
showInstallNotification();
document.getElementById('install-btn').addEventListener('click', () => {
// Update message to "Installing..."
document.querySelector('.logo_url_png').style.displsy = 'none';
updateInstallMessage("Installing...");
// Show the install prompt when the user clicks the install button
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the install prompt');
// Update message to "Installation Complete!" after installation
updateInstallMessage("Installation Complete!");
localStorage.setItem('pwaInstalled', 'true'); // Set flag in local storage
setTimeout(() => {
hideInstallNotification(); // Hide notification after a delay
}, 2000); // Delay hiding the notification for better experience
} else {
console.log('User dismissed the install prompt');
updateInstallMessage("Install our app for a better experience!");
}
deferredPrompt = null;
});
});
document.getElementById('close-btn').addEventListener('click', () => {
hideInstallNotification();
});
});
}
// Add an event listener to detect if the app is installed
window.addEventListener('appinstalled', () => {
console.log('PWA was installed');
localStorage.setItem('pwaInstalled', 'true'); // Set flag after installation
hideInstallNotification(); // Hide notification after successful install
});
// Function to show the custom notification with animation
function showInstallNotification() {
const notification = document.getElementById('pwa-notification');
notification.style.display = 'block'; // Show the notification
setTimeout(() => {
notification.classList.add('show-notification'); // Slide in animation
}, 100); // Delay to trigger the animation after showing
}
// Function to hide the custom notification
function hideInstallNotification() {
const notification = document.getElementById('pwa-notification');
notification.classList.remove('show-notification'); // Slide out animation
setTimeout(() => {
notification.style.display = 'none'; // Hide the notification completely after the animation
}, 500); // Wait for the slide-out transition to complete
}
// Function to update the installation message
function updateInstallMessage(message) {
const installMessage = document.getElementById('install-message');
installMessage.textContent = message; // Update the message displayed to the user
}
// Function to detect if the PWA is uninstalled
function checkIfAppIsUninstalled() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
if (registrations.length === 0) {
// No service worker registered means app is uninstalled
console.log('App is uninstalled');
localStorage.removeItem('pwaInstalled'); // Remove the PWA installed flag
showInstallNotification(); // Show install notification again
}
});
}
}
// Call the function to check PWA installation status periodically
setInterval(checkIfAppIsUninstalled, 10000); // Check every 10 seconds
</script>
7. Conclusion
In the case of Blogger, integrating a PWA will increase levels of interactivity amongst users and is better than an ordinary interface. Although it is not possible for uplaod files directly on Blogger, it is still possible to resolve a this issue and Host service workers else where and change few things in your code. By the procedures given, you are able to implement PWA successfully and enjoy its benefits in terms of more rapid loading, offline working and mobile convenient friendliness.
There are of course limitations that are present with the use of iOS devices and the use of older browsers, but for the most part, I do believe that the return of investing the time doing this would greatly exceed the effort!