Add “Install App” Button in React PWA – Boost Installs & Engagement

Introduction

PWAs allow users to install your web app on their device. By default, browsers show a small install prompt. But you can improve the experience by creating your own Install PWA button in React. This gives you full control over when and how to show the install option.

How Install Prompt Works

Modern browsers fire a beforeinstallprompt event when your app is PWA-ready. By capturing this event, you can display a custom button and trigger the install prompt at the right time.

Install PWA Button Component

Create a React component that listens for the install event and shows a button:

import React, { useEffect, useState } from 'react'

const InstallPWA = () => {
  const [deferredPrompt, setDeferredPrompt] = useState(null)
  const [showButton, setShowButton] = useState(false)

  useEffect(() => {
    const handler = (e) => {
      e.preventDefault()
      setDeferredPrompt(e)
      setShowButton(true)
    }

    window.addEventListener('beforeinstallprompt', handler)

    return () => window.removeEventListener('beforeinstallprompt', handler)
  }, [])

  const handleInstallClick = async () => {
    if (!deferredPrompt) return

    deferredPrompt.prompt()
    const { outcome } = await deferredPrompt.userChoice
    console.log(`User response to the install prompt: ${outcome}`)

    if (outcome === 'accepted') {
      console.log('PWA installed successfully ✅')
    }

    setDeferredPrompt(null)
    setShowButton(false)
  }

  if (!showButton) return null

  return (
    <button
      className="fixed bottom-5 right-5 p-3 bg-green-600 text-white rounded-xl shadow-lg hover:bg-green-700 transition"
      onClick={handleInstallClick}
    >
      📲 Install App
    </button>
  )
}
export default InstallPWA
    

Using the Install Button

Place the <InstallPWA /> component anywhere in your layout, like in the header or footer. This ensures users always have easy access to install your app.

Testing the Button

Open your app in Chrome on Android, or Chrome DevTools → “Add to Home Screen”. If your manifest and service worker are correct, your custom install button should trigger the install flow.

Conclusion

By adding a custom Install PWA button, you increase user engagement and make it easier for people to install your app. In the next guide, we’ll create a custom Offline Page for a complete PWA experience.