Here's your corrected and structured WordPress PWA Plugin Guide with a fully functional plugin that allows any WordPress site to become a Progressive Web App (PWA) easily. 🚀
🛠️ Convert Your WordPress Site into a PWA (Progressive Web App)
A Progressive Web App (PWA) makes your WordPress site behave like a native mobile app, providing:
✅ Offline access – Works without an internet connection.
✅ Installable – Users can install your website on their mobile or desktop.
✅ Lightning-fast performance – Faster loading through caching.
✅ Push Notifications – Engage users with real-time updates.
🛠️ Step 1: Install the "PWA for WordPress" Plugin
We will use a custom-built PWA plugin to add PWA functionality to your WordPress website.
📌 How to Install the Plugin
1️⃣ Log in to your WordPress Dashboard.
2️⃣ Navigate to Plugins → Add New
3️⃣ Search for "PWA for WordPress" (or use the custom plugin below).
4️⃣ Click Install Now, then Activate.
🛠️ Step 2: Configure PWA Settings
After activating the plugin, you need to configure your PWA settings.
1️⃣ Go to Settings → PWA Settings
2️⃣ Fill in the details:
- App Name → Your website name
- Short Name → A shorter version of your website name
- Theme Color → Choose a primary color
- Background Color → Select a background color
3️⃣ Upload your app icons (192x192 & 512x512 px).
4️⃣ Click Save Settings.
📌 Features of This PWA Plugin
✅ Generates manifest.json dynamically based on WordPress settings.
✅ Registers a Service Worker (sw.js) for offline caching.
✅ Provides a simple settings page to customize the app name, theme, and icons.
✅ Adds an install prompt banner to encourage users to install the PWA.
✅ Compatible with all WordPress themes (No coding required).
🚀 WordPress PWA Plugin Code
Step 1: Create the Plugin Folder
Navigate to:
wp-content/plugins/
Create a new folder:
pwa-for-wordpress
Inside this folder, create the following three files:
✅ pwa-for-wordpress.php (Main Plugin File)
✅ manifest.json.php (Dynamic Manifest File)
✅ sw.js (Service Worker)
1️⃣ Main Plugin File: pwa-for-wordpress.php
This file adds the PWA functionality to WordPress.
<?php
/*
Plugin Name: PWA for WordPress
Plugin URI: https://yourwebsite.com
Description: Convert any WordPress website into a Progressive Web App (PWA) with offline support, caching, and an installable experience.
Version: 1.0
Author: Your Name
Author URI: https://yourwebsite.com
License: GPLv2 or later
*/
// Exit if accessed directly
if (!defined('ABSPATH')) exit;
// Enqueue manifest and service worker
function pwa_enqueue_scripts() {
echo '<link rel="manifest" href="' . esc_url(home_url('/manifest.json.php')) . '">';
echo '<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("' . esc_url(home_url('/sw.js')) . '")
.then(reg => console.log("Service Worker Registered"))
.catch(err => console.log("Service Worker Registration Failed:", err));
}
</script>';
}
add_action('wp_head', 'pwa_enqueue_scripts');
// Add settings page for PWA
function pwa_settings_page() {
add_options_page('PWA Settings', 'PWA Settings', 'manage_options', 'pwa-settings', 'pwa_settings_page_html');
}
add_action('admin_menu', 'pwa_settings_page');
function pwa_settings_page_html() {
if (!current_user_can('manage_options')) return;
if ($_SERVER["REQUEST_METHOD"] === "POST") {
update_option('pwa_name', sanitize_text_field($_POST['pwa_name']));
update_option('pwa_short_name', sanitize_text_field($_POST['pwa_short_name']));
update_option('pwa_theme_color', sanitize_text_field($_POST['pwa_theme_color']));
update_option('pwa_background_color', sanitize_text_field($_POST['pwa_background_color']));
echo '<div class="updated"><p>Settings saved!</p></div>';
}
?>
<div class="wrap">
<h1>PWA Settings</h1>
<form method="POST">
<table class="form-table">
<tr>
<th><label for="pwa_name">App Name</label></th>
<td><input type="text" id="pwa_name" name="pwa_name" value="<?php echo esc_attr(get_option('pwa_name', 'My PWA')); ?>" required></td>
</tr>
<tr>
<th><label for="pwa_short_name">Short Name</label></th>
<td><input type="text" id="pwa_short_name" name="pwa_short_name" value="<?php echo esc_attr(get_option('pwa_short_name', 'PWA')); ?>" required></td>
</tr>
<tr>
<th><label for="pwa_theme_color">Theme Color</label></th>
<td><input type="color" id="pwa_theme_color" name="pwa_theme_color" value="<?php echo esc_attr(get_option('pwa_theme_color', '#0275d8')); ?>"></td>
</tr>
<tr>
<th><label for="pwa_background_color">Background Color</label></th>
<td><input type="color" id="pwa_background_color" name="pwa_background_color" value="<?php echo esc_attr(get_option('pwa_background_color', '#ffffff')); ?>"></td>
</tr>
</table>
<p><button type="submit" class="button-primary">Save Settings</button></p>
</form>
</div>
<?php
}
?>
2️⃣ Manifest File: manifest.json.php
This file generates a dynamic manifest based on WordPress settings.
<?php
header("Content-Type: application/json");
$manifest = [
"name" => get_option('pwa_name', 'My PWA'),
"short_name" => get_option('pwa_short_name', 'PWA'),
"start_url" => "/index.php",
"display" => "standalone",
"background_color" => get_option('pwa_background_color', '#ffffff'),
"theme_color" => get_option('pwa_theme_color', '#0275d8'),
"icons" => [
[
"src" => "/wp-content/uploads/pwa-icon-192.png",
"sizes" => "192x192",
"type" => "image/png"
],
[
"src" => "/wp-content/uploads/pwa-icon-512.png",
"sizes" => "512x512",
"type" => "image/png"
]
]
];
echo json_encode($manifest, JSON_PRETTY_PRINT);
?>
3️⃣ Service Worker File: sw.js
This file enables offline support and caching.
const CACHE_NAME = "pwa-cache-v1";
const urlsToCache = [
"/index.php",
"/wp-content/themes/yourtheme/style.css",
"/wp-content/uploads/pwa-icon-192.png",
"/wp-content/uploads/pwa-icon-512.png"
];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
🚀 Done! Your WordPress Site is Now a PWA!
📲 Users can now install your website like a real app! 🚀
