This is continuation of the previous blog on making a website installable, you are highly encouraged to check it out before continuing.
What is deferred installation?
Installation Prompt, makes it easy for users to install a Progressive Web App (PWA) on their mobile or desktop device. Installing a PWA adds it to a user's launcher, allowing it to be run like any other installed app. Deferred installation allows the developer to display the installation prompt only when the user performs certain action, like clicking a button or hitting the bottom of the page (something to indicate that they are engaging with your site, makes it more likely that the user will install the PWA when prompted to do so).
Getting Started
We will be continuing from where we left off in the previous blog. But we require a small change in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PWA: Installable website</title>
</head>
<body>
<button id="btn">Click Me</button> <!-- CHANGE: BUTTON ADDED -->
</body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
} else {
console.log("Service worker is not supported");
}
</script>
</html>
Setting up deferred installation
To set up deferred installation we need to add a script.
script.js
let deferredPrompt;
// Storing the installation prompt
window.addEventListener("beforeinstallprompt", (event) => {
deferredPrompt = event;
});
// Displaying the prompt on button click
const btn = document.getElementById('btn');
btn.addEventListener("click", () => {
if (!deferredPrompt) return
deferredPrompt.prompt();
});
Link the script in index.html.
<script src="script.js"></script>
Voila! That's all you need to defer the Installation Prompt.
NOTE: You can display the Installation Prompt only on user interaction like: click, scroll, form submit, etc.
Project using this Implementation
Smartsapp (deferred prompt on Google OAuth button click, login and registration )
Web-app: https://smartsapp-ba40f.firebaseapp.com
ruppysuppy
/
SmartsApp
💬📱 An End to End Encrypted Cross Platform messenger app.
Smartsapp
A fully cross-platform messenger app with End to End Encryption (E2EE).
Demo
NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.
Platforms Supported
- Desktop: Windows, Linux, MacOS
- Mobile: Android, iOS
- Website: Any device with a browser
Back-end Setup
The back-end of the app is handled by Firebase.
Basic Setup
- Go to firebase console and create a new project with the name
Smartsapp - Enable
Google Analylitics
App Setup
- Create an
Appfor the project from the overview page - Copy and paste the configurations in the required location (given in the readme of the respective apps)
Auth Setup
- Go to the project
Authenticationsection - Select
Sign-in methodtab - Enable
Email/PasswordandGooglesign in
Firestore Setup
- Go to the project
Firestoresection - Create firestore provisions for the project (choose the server nearest to your location)
- Go to the
Rules…
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Reach out to me on:
Top comments (0)