DEV Community

loading...
Cover image for Supercharge Your Website Using PWA: Deferred Installation

Supercharge Your Website Using PWA: Deferred Installation

Tapajyoti Bose
Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor
・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

Link the script in index.html.

<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo 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

  1. Desktop: Windows, Linux, MacOS
  2. Mobile: Android, iOS
  3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

  1. Go to firebase console and create a new project with the name Smartsapp
  2. Enable Google Analylitics

App Setup

  1. Create an App for the project from the overview page
  2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

  1. Go to the project Authentication section
  2. Select Sign-in method tab
  3. Enable Email/Password and Google sign in

Firestore Setup

  1. Go to the project Firestore section
  2. Create firestore provisions for the project (choose the server nearest to your location)
  3. Go to the Rules




Thanks for reading

Reach out to me on:

Discussion (0)

Forem Open with the Forem app