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