How to Add "Add to Home Screen" to Your Website — Complete PWA Guide

Have you ever visited a website on your phone and seen that little popup at the bottom saying "Add to Home Screen"? That is a Progressive Web App (PWA) in action — and it is one of the most underused features in modern web development. With just a few files and some basic configuration, you can make your website installable on any device, give it its own icon on the home screen, and make it feel and behave exactly like a native app.

In this guide we will walk through everything you need to implement the "Add to Home Screen" feature on your website — the manifest file, the service worker, the HTML link tag, and how to test that everything is working correctly.

What Is a Progressive Web App (PWA)?

A Progressive Web App is a website that has been enhanced with modern browser APIs to behave like a native mobile or desktop application. When a user installs a PWA, it gets its own icon on their home screen or desktop, launches in a standalone window without a browser address bar, can work offline, and can even send push notifications — all without being published on the App Store or Google Play.

The "Add to Home Screen" prompt is the entry point to the PWA experience. On Android devices it appears as a banner or bottom sheet. On desktop browsers like Chrome and Edge, it appears as an install icon in the address bar. On iOS Safari, users can trigger it manually through the Share menu.

What You Need to Set Up PWA

Before the browser will show the "Add to Home Screen" prompt, your website must meet four basic requirements:

1. HTTPS — Secure Connection

Your website must be served over HTTPS. This is non-negotiable — browsers will not activate service workers or show install prompts on plain HTTP sites. The only exception is localhost, which works over HTTP for local development purposes.

2. Web App Manifest

A manifest.json file that tells the browser everything about your app — its name, icon, colors, and how it should behave when launched from the home screen.

3. Service Worker

A service worker is a JavaScript file that runs in the background, separate from your main page. It is required for PWA installability in most browsers and is also what enables offline functionality. Without a registered service worker, the install prompt will not appear on Android Chrome.

4. Responsive Design

Since your PWA will be used on mobile devices, your site must be responsive — meaning it should work correctly on all screen sizes from small phones to large desktop monitors.

Step 1 — Create the Web App Manifest

Create a file called manifest.json in the root of your project. This is the configuration file that defines your PWA's identity:

{
  "short_name": "TipsAndTricks",
  "name": "TipsAndTricks.dev - Programming Tips and Tutorials",
  "description": "Practical programming tutorials, JavaScript tips, PHP, Laravel and web development guides.",
  "icons": [
    {
      "src": "https://tipsandtricks.dev/assets/upload/tip-and-tricks-192x192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "any maskable"
    },
    {
      "src": "https://tipsandtricks.dev/assets/upload/tip-and-tricks-512x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ],
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#111827",
  "theme_color": "#facc15",
  "orientation": "portrait-primary",
  "lang": "en"
}

Let us go through the important fields:

• short_name — the name displayed below the icon on the home screen. Keep it under 12 characters to avoid truncation.
• name — the full app name shown in the install prompt and splash screen.
• description — a brief description of what your app does. Shown in some install UIs and app stores.
• icons — the icons used for the home screen shortcut, splash screen, and task switcher. You need at least a 192x192 and a 512x512 PNG. Adding "purpose": "any maskable" ensures the icon looks correct on all Android launchers that apply different icon shapes.
• start_url — the page that opens when the user launches the app from their home screen. Usually "/" for the homepage.
• display — controls how the app launches. "standalone" removes the browser chrome (address bar, navigation buttons) and makes it look like a native app. Other options: "fullscreen", "minimal-ui", "browser".
• background_color — the color of the splash screen shown while the app is loading. Match this to your site's background color for a smooth transition.
• theme_color — the color of the browser toolbar and status bar when the app is open. On Android, this tints the top of the screen with your brand color.

Step 2 — Link the Manifest in Your HTML

Add this line inside the <head> tag of every page on your website. Without this, the browser will not find your manifest file:

<!-- Add to the <head> of every page -->
<link rel="manifest" href="/manifest.json">

<!-- Also add theme color meta tag for iOS and older Android -->
<meta name="theme-color" content="#facc15">

<!-- iOS-specific meta tags (Safari does not read manifest for these) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="TipsAndTricks">
<link rel="apple-touch-icon" href="/assets/upload/tip-and-tricks-192x192.png">

Step 3 — Create the Service Worker

A service worker is required for Chrome on Android to show the install prompt. Create a file called service-worker.js in your project root:

// service-worker.js

const CACHE_NAME = 'tipsandtricks-cache-v1';

// Files to cache for offline use
const urlsToCache = [
  '/',
  '/manifest.json'
];

// Install event — cache the files
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
      console.log('Service Worker: Caching files');
      return cache.addAll(urlsToCache);
    })
  );
});

// Fetch event — serve from cache if available
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      // Return cached version if found, otherwise fetch from network
      return response || fetch(event.request);
    })
  );
});

// Activate event — clean up old caches
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
          return cacheName !== CACHE_NAME;
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

Now register the service worker in your main JavaScript file or at the bottom of your HTML:

// Register the service worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(registration) {
        console.log('Service Worker registered successfully:', registration.scope);
      })
      .catch(function(error) {
        console.log('Service Worker registration failed:', error);
      });
  });
}

Step 4 — Handle the Install Prompt (Optional but Recommended)

By default, Chrome shows its own install UI. But you can capture the install prompt event and trigger it with your own custom button — giving you full control over when and how the prompt appears:

let deferredPrompt;

// Capture the install prompt before it fires
window.addEventListener('beforeinstallprompt', function(event) {
  // Prevent the default mini-infobar from appearing
  event.preventDefault();

  // Save the event for later
  deferredPrompt = event;

  // Show your custom install button
  document.getElementById('installButton').style.display = 'block';
});

// When user clicks your install button
document.getElementById('installButton').addEventListener('click', function() {
  // Show the install prompt
  deferredPrompt.prompt();

  // Wait for the user to respond
  deferredPrompt.userChoice.then(function(choiceResult) {
    if (choiceResult.outcome === 'accepted') {
      console.log('User accepted the install prompt');
    } else {
      console.log('User dismissed the install prompt');
    }
    deferredPrompt = null;
  });
});

// Hide the install button after installation
window.addEventListener('appinstalled', function() {
  document.getElementById('installButton').style.display = 'none';
  console.log('PWA was installed successfully');
});

And add your install button anywhere in your HTML:

<button id="installButton" style="display:none;">
  📲 Install App
</button>

Step 5 — Icon Requirements

Your PWA icons must meet certain requirements to look good across all devices and launchers:

• Minimum required: 192x192px and 512x512px PNG files
• Format: PNG is recommended. Avoid JPG for icons as it does not support transparency.
• Shape: Use a square image. Different Android launchers will apply their own shape mask (circle, rounded square, etc.)
• Maskable icons: Add "purpose": "any maskable" and make sure your icon has a safe zone — keep important content within the central 80% of the icon area, as launchers may crop the edges.
• Background: Avoid transparency in icons used for splash screens — use a solid background color that matches your background_color in manifest.json.

How to Test Your PWA

After implementing all the steps above, here is how to verify everything is working:

Using Chrome DevTools

Open your site in Chrome, press F12 to open DevTools, go to the Application tab, and click Manifest in the left panel. You should see all your manifest fields displayed correctly. If there are errors, Chrome will show them here with explanations.

Also check Service Workers in the same panel to confirm your service worker is registered and active.

Using Lighthouse

Chrome's built-in Lighthouse tool has a PWA audit that checks all installability requirements at once:

• Open Chrome DevTools (F12)
• Click the Lighthouse tab
• Check the Progressive Web App category
• Click Generate Report

Lighthouse will show you a green tick for every requirement your site meets and a red cross for anything that needs fixing.

Testing on Android

Open your site in Chrome on an Android phone. If all requirements are met, you should see a banner at the bottom of the screen saying "Add TipsAndTricks to Home Screen" — or an install icon will appear in the address bar. Tap it and follow the prompt to install.

After installing, open the app from your home screen icon. It should launch in full screen without the browser address bar, with your theme color applied to the status bar — exactly like a native Android app. You will also see a splash screen during loading that uses your background color and icon from manifest.json.

What the User Sees — The Full PWA Experience

Here is the complete flow from a user's perspective after you have implemented everything correctly:

• User visits your website on Chrome Android for the first time
• After a few seconds, a "Add to Home Screen" banner appears at the bottom of the screen
• User taps "Add" — a shortcut icon appears on their home screen
• User taps the home screen icon — a splash screen appears briefly with your icon and background color
• Your website opens in a standalone window — no address bar, no browser navigation — it looks and feels like a real app
• If the user has no internet connection, the service worker serves cached pages so the basic experience still works offline

Common Issues and Fixes

Install prompt not appearing

• Make sure the site is on HTTPS
• Confirm the service worker is registered (check DevTools → Application → Service Workers)
• Confirm manifest.json is linked correctly and has no JSON syntax errors
• Chrome requires the user to have visited the site at least twice before showing the prompt automatically

Icon not showing correctly

• Check that the icon URLs in manifest.json are absolute URLs and publicly accessible
• Make sure both 192x192 and 512x512 sizes are provided
• Verify the image files are actually PNG format, not just renamed JPGs

App not working offline

• Check that your service worker fetch event is correctly serving from cache
• Use Chrome DevTools → Application → Cache Storage to verify files are being cached
• Test by enabling "Offline" mode in DevTools → Network tab

Final Thought

Implementing "Add to Home Screen" using PWA technology is one of the best investments you can make for a web project. It gives your users a native app-like experience without the friction of an app store download, works across Android, iOS, and desktop, and can be implemented in an afternoon with the steps above.

The manifest file takes five minutes to set up. The service worker adds offline support and unlocks the install prompt. Together they transform an ordinary website into something users can keep on their home screen and return to directly — which is exactly the kind of engagement that keeps a site growing.

Running into a specific issue while setting up your PWA? Drop us a message on our contact page and we will help you debug it.