WP Manifestindependent plugin directory
manifest / performance / wordpress-pwa-app

Wordpress PWA App

Turn any Wordpress Website into PWA

by Sandeep Ghosh · github.com/dev-sandeep-ghosh/wordpress-pwa-app · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/dev-sandeep-ghosh/wordpress-pwa-app/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/dev-sandeep-ghosh/wordpress-pwa-app ↗

Wordpress PWA App is a lightweight, high-performance WordPress plugin that transforms your website into a fully functional Progressive Web App (PWA). It enables visitors to install your site as a native-like application on Android, iOS, Windows, and macOS, providing a premium mobile experience without the need for app stores.

🚀 Key Features

  • Seamless Transformation: Instantly converts any WordPress site into a PWA.
  • Cross-Platform Support: Tailored install prompts for Android, iOS (Safari), Windows, and macOS.
  • Dynamic Manifest: Automatically generates a webmanifest file based on your admin settings.
  • Built-in Service Worker: Implements a service worker for basic offline support and faster loading.
  • Fully Customizable: Change app name, short name, theme colors, and icons directly from the WordPress dashboard.
  • Smart Install Banners: Intelligent logic to show/hide install prompts based on platform and user behavior.
  • Zero Dependencies: Lean codebase with no external libraries required.

🏗️ Plugin Architecture

The plugin is built using a modern, object-oriented approach with a focus on performance and WordPress best practices.

1. Core Structure

The entire plugin logic is encapsulated within the WordPress_PWA_App class, which implements the Singleton Pattern to ensure only one instance handles all hooks and settings.

  • File: wordpress-pwa-app.php
  • Namespace/Class: WordPress_PWA_App

2. Dynamic Asset Delivery

Instead of hosting static files that might require write permissions, the plugin dynamically serves the PWA essentials:

  • Manifest: Served via /?wppwa-manifest=1.
  • Service Worker: Served via /?wppwa-sw=1 with proper MIME types and security headers.

3. Frontend Hooks & Implementation

The plugin hooks into the WordPress lifecycle to inject necessary PWA components:

  • Meta Tags: Injects <link rel="manifest"> and Apple-specific meta tags into wp_head.
  • Registration: Registers the Service Worker using inline JavaScript in the footer to avoid extra HTTP requests.
  • Install Logic: Detects platform (iOS vs Desktop vs Android) and triggers the appropriate UI banner.

4. Platform-Specific Handlers

The architecture includes custom handlers for different ecosystems:

  • Android/Chrome: Listens for the beforeinstallprompt event to trigger the native browser install dialog.
  • iOS Safari: Provides a custom "Add to Home Screen" instruction banner since iOS doesn't support the native prompt.
  • Desktop: Shows a subtle popup for Chrome/Edge users on Windows/macOS/Linux.
  • macOS Safari: Highlighting the "Add to Dock" feature.

⚙️ Administration

The plugin adds a dedicated settings page under Settings → PWA App.

Configuration Options:

  • App Identity: Set the full App Name, Short Name (for home screen), and Description.
  • App Icon: Upload a 512x512 PNG icon that the plugin uses for the app icon, splash screen, and Apple touch icons.
  • Appearance: Customize Theme Color (browser toolbar) and Background Color (splash screen).
  • Behavior: Enable/Disable install banners and set a dismissal duration (how many days to wait before showing the banner again after a user closes it).

🛠️ Installation

  1. Upload: Upload the wordpress-pwa-app folder to the /wp-content/plugins/ directory.
  2. Activate: Activate the plugin through the 'Plugins' menu in WordPress.
  3. Configure: Go to Settings > PWA App and upload your app icon.
  4. Verify: Ensure your site is running on HTTPS (PWA requirement).

💻 Technical Stack

  • PHP: Core plugin logic and WordPress integration.
  • JavaScript (Vanilla): Service worker implementation and frontend install logic.
  • CSS (Vanilla): Inline styling for high-priority install banners to ensure fast rendering.
  • WordPress APIs: Settings API, Media Upload API, and various Action/Filter hooks.

Author: Sandeep Ghosh
Version: 1.0.0
License: GPLv2 or later