Install a Progressive Web App (PWA) on Any Website

Mohamed Nakhlawy Jul 12, 2025 233 views

Install a Progressive Web App (PWA) on Any Website

What You'll Achieve

Installable mobile experience

Offline functionality

Push notifications

Lightning-fast performance

What is a Progressive Web App?

App-like Experience

Native mobile app feeling in your browser

Installable

Add to home screen like native apps

Offline Ready

Works without internet connection

Key PWA Benefits

Lightning-fast loading

Push notifications

Secure HTTPS required

Better SEO rankings

Prerequisites

Technical Requirements

HTTPS enabled website (required)

Basic HTML/CSS/JavaScript knowledge

Text editor or code editor

Web server access

Browser Support

Chrome/Edge (Full support)

Firefox (Full support)

Safari (Partial support)

Samsung Internet (Full support)

Step-by-Step Implementation

Create Web App Manifest

Create a manifest.json file in your website's root directory:

{
  "name": "Your App Name",
  "short_name": "AppName",
  "description": "Description of your app",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#6366f1",
  "orientation": "portrait-primary",
  "scope": "/",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Key Properties Explained

display: "standalone" removes browser UI

start_url: Launch URL for the app

theme_color: Browser's address bar color

background_color: Splash screen background

Add PWA Meta Tags

Add these meta tags to the <head> section of your HTML:

<!-- PWA Meta Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#6366f1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Your App Name">

<!-- Manifest Link -->
<link rel="manifest" href="/manifest.json">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">

Generate App Icons

Create an /icons/ folder with these icon sizes:

Mobile

72×72, 96×96, 128×128, 144×144

Tablet

152×152, 192×192

Desktop

384×384, 512×512

Apple

180×180

Pro Tip: Use free tools likeRealFaviconGeneratororPWA Builderto generate all sizes automatically.

Create Service Worker

Create a sw.js file in your root directory for offline functionality:

const CACHE_NAME = 'your-app-v1';
const urlsToCache = [
  '/',
  '/css/style.css',
  '/js/app.js',
  '/offline.html',
  '/icons/icon-192x192.png'
];

// Install event - cache resources
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Fetch event - serve from cache, fallback to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        return response || fetch(event.request);
      }
    ).catch(() => {
      return caches.match('/offline.html');
    })
  );
});

Register Service Worker

Add this JavaScript before the closing </body> tag:

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('SW registered: ', registration);
      })
      .catch((registrationError) => {
        console.log('SW registration failed: ', registrationError);
      });
  });
}
</script>

Advanced PWA Features

Push Notifications

Engage users with timely push notifications:

// Request notification permission
async function requestNotificationPermission() {
  const permission = await Notification.requestPermission();
  if (permission === 'granted') {
    console.log('Notification permission granted');
    subscribeUserToPush();
  }
}

// Subscribe to push notifications
async function subscribeUserToPush() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: 'YOUR_VAPID_PUBLIC_KEY'
  });
  
  // Send subscription to your server
  fetch('/api/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  });
}

Custom Install Prompt

Add a custom install button to encourage app installation:

<button id="install-button" class="btn btn-primary" style="display: none;">
  <i class="fa fa-download me-2"></i>Install App
</button>

<script>
let deferredPrompt;
const installButton = document.getElementById('install-button');

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  installButton.style.display = 'block';
});

installButton.addEventListener('click', async () => {
  if (deferredPrompt) {
    deferredPrompt.prompt();
    const { outcome } = await deferredPrompt.userChoice;
    deferredPrompt = null;
    installButton.style.display = 'none';
  }
});
</script>

Testing Your PWA

Chrome DevTools

Open DevTools (F12)

Navigate to Application tab

Check Manifest and Service Workers

Test offline mode in Network tab

Lighthouse Audit

Run PWA audit in DevTools

Check installability criteria

Review performance scores

Fix identified issues

PWA Requirements Checklist

HTTPS enabled

Web app manifest

Service worker registered

Icons (192px and 512px minimum)

Start URL responds with 200

Display mode is standalone/fullscreen

Responsive design

Offline functionality works

Platform-Specific Implementation

WordPress Implementation

Plugin Method (Easiest)

Install "Super Progressive Web Apps" plugin

Configure PWA settings in WordPress admin

Upload app icons to Media Library

Manual Method (Advanced)

Add manifest.json to theme's root folder

Include PWA meta tags in header.php

Upload icons to theme's assets folder

React/Vue.js Implementation

Create React App

npx create-react-app my-pwa --template pwa

Built-in PWA support

Vue.js with PWA

vue add pwa

Automatic PWA plugin

Manual Setup

Follow universal guide with Workbox for advanced caching

Static HTML/Jekyll/Gatsby

Static HTML

Follow the universal guide exactly as shown above

Jekyll

Add manifest.json to root, include meta tags in _includes/head.html

Gatsby

Use gatsby-plugin-manifest and gatsby-plugin-offline

Common Issues & Solutions

Issue	Cause	Solution
Install prompt not showing	Missing HTTPS, invalid manifest, or unsupported browser	Check HTTPSValidate manifestTest in Chrome
Service worker not updating	Browser caching old service worker	Update cache versionClear browser data
Icons not displaying	Wrong file paths or missing sizes	Verify pathsCheck all sizes
App doesn't work offline	Resources not cached properly	Check cache listAdd missing resources

Performance Optimization

Caching Strategies

Cache First: For static assets

Network First: For API calls

Stale While Revalidate: For non-critical resources

Network Only: For sensitive data

Optimization Tips

Minimize service worker file size

Lazy load non-critical resources

Optimize images for web (WebP format)

Enable compression (gzip/brotli)

Helpful Tools & Resources

Got an Idea or Question?

Looking to build, enhance, or fix your website? At Mirage Code, our experienced team can turn your vision into reality. Let's bring your ideas to life

No commitment required. See exactly what's holding your website back.

Get in touch today!

About Mirage Code

Mirage Code specializes in building scalable, high-converting websites for businesses of all sizes. Our team combines technical expertise with conversion optimization strategies to deliver websites that not only look great but also drive real business results.

Ready to discuss your project? Contact us today for a free consultation and discover how we can transform your website into a powerful conversion machine.