Activate it and your site is already installable with your site title and Site Icon. This guide walks through the Status panel, branding the app, the install banner, what works offline, the install button, and the handful of things that go wrong on real hosts.
Install it from Plugins → Add New by searching for Demfilz PWA (or upload demfilz-pwa.zip under Plugins → Add New → Upload Plugin), then activate it. The manifest, the service worker and the offline page are served straight away, using your site title, tagline and the Site Icon from Settings → General. Nothing is written to your document root and no .htaccess changes are made. Your site must be served over HTTPS for browsers to register the worker; localhost and 127.0.0.1 are exempt for testing.
Open Settings → PWA. The Status card at the top runs eight checks from your browser, never from the server, so a single-worker host is never tied up:
| Check | What it confirms |
|---|---|
| Secure origin | The site address uses HTTPS (or a local development host). |
| Web app manifest | The manifest loads, parses, and carries name, short name, start URL, display mode and icons. |
| App icons | Both a 192 and a 512 pixel icon are listed, plus maskable variants, and which source they come from. |
| Service worker script | The worker loads as JavaScript with a fetch handler. |
| Offline page | The offline page loads. |
| Home page tags | The home page carries the manifest link, the theme-color tag and a viewport tag. |
| Anonymous visitors | A fetch without your login cookies confirms pages are storable (no caching plugin or host header forbids it) and that only one manifest link is present. |
| Registered in this browser | The worker is registered here; open the front end once if it is not yet. |
Site Health (Tools → Site Health) carries a PWA readiness test as well, so a problem shows up even if nobody opens the settings.
The App section is what visitors see when they install:
| Setting | What it does |
|---|---|
| App name | Shown on the install prompt and the splash screen. Defaults to the site title. |
| Short name | Shown under the home screen icon; keep it to 12 characters so it is not cut off. |
| Description | A sentence for richer install dialogs. |
| App icon | Choose a square PNG or JPEG of at least 512 x 512 pixels from the media library. The 512, 192 and 180 pixel sizes and the maskable variants are generated for you; non-square images are centred on the background colour. Remove it to fall back to the Site Icon, then to a neutral placeholder. |
| Screenshots | Up to three images (one wide, one tall is ideal, 320 to 3840 pixels on each side) for Chrome's richer install dialog and for store packaging with PWABuilder. |
| Categories | Comma separated, for example shopping, business. |
The Appearance section shapes the installed app:
| Setting | What it does |
|---|---|
| Theme colour | Colours the browser toolbar and the status bar of the installed app, and the Install button in the banner. |
| Background colour | The splash screen background and the padding behind the icon and its maskable variants. |
| Theme colour meta tag | Switch off only if your theme already prints its own theme-color tag. |
| Display mode | Standalone (looks like a native app), Minimal UI, Fullscreen, or Browser (not installable in most browsers). |
| Orientation | Any, natural, portrait or landscape. |
| iOS status bar | Default, black, or black translucent for content that runs under the status bar. |
| Start path | The page the installed app opens, relative to the home URL; usually /. |
| Install tracking | Appends ?utm_source=pwa to the start URL so analytics can tell app launches apart. Some page caches bypass the cache for URLs with a query string. |
| App shortcuts | Up to three label and path pairs shown when the app icon is long-pressed or right-clicked. |
Save. The notice confirms that a new app version was published and, when the icon or background colour changed, that the icons were regenerated. Visitors and installed apps pick the change up on their next visit.
| Setting | What it does |
|---|---|
| Install banner | Shows an Install banner at the bottom of the page when the browser reports the site is installable. |
| Show after page views | How many page views before the banner is offered (1 = the first page view). |
| Delay (seconds) | Seconds after the page loads before the banner slides in. |
| Snooze (days) | How long the banner stays hidden after a visitor chooses Not now, or dismisses the browser's own prompt. |
| Banner title and text | Leave the title empty for "Install {short name}". The text defaults to a line about quick access and offline use. |
| iPhone and iPad | Safari has no install prompt, so these visitors get Share, Add to Home Screen instructions with a Got it button. |
Only Chrome, Edge and Samsung Internet fire the install prompt, and only after the visitor has interacted with the page. Firefox never does, and desktop Safari offers File → Add to Dock without telling the page.
To put an install button somewhere specific:
| Placement | How |
|---|---|
| Shortcode | [dpwa_install_button text="Install app"] in any post, page or widget. |
| Any element | Add the attribute data-dpwa-install to a link or button. |
| Menu item | Give the item the CSS class dpwa-install (Appearance → Menus → Screen Options → CSS Classes). |
| JavaScript | window.dpwa.canInstall(), window.dpwa.promptInstall(), window.dpwa.showBanner(); events dpwa:installable, dpwa:installed and dpwa:dismissed on document, plus matching dataLayer pushes when a dataLayer exists. |
Buttons stay hidden until the browser can install the site; on iOS they open the Add to Home Screen instructions.
| Setting | What it does |
|---|---|
| Offline page heading and message | Shown on the offline page, which uses your theme and background colours and lists the pages that are available offline. |
| Offline indicator | A small "You are offline" notice while the connection is down. |
| Cache pages | Keeps copies of visited pages so they open offline. Pages are always fetched from the network first; the copy is used only when the network fails or is slower than the timeout. |
| Network timeout | Seconds to wait for a slow network before falling back to the stored copy of a page. |
| Store in advance | One path per line, stored when the worker installs so those pages open offline even if never visited. The home page and the shortcut targets are always included. |
| Cache limits | Maximum entries per cache for pages, scripts and styles, images and fonts; the oldest are dropped first. |
| Never cache | One entry per line. An entry that starts with a slash matches that path and everything under it; anything else matches anywhere in the path or query. Matching requests are left entirely to the browser. The list is published inside the public worker script, so never put anything secret in it. |
| Extra origins | Origins such as a CDN whose images, fonts, scripts and styles may be cached. Google Fonts is always included. |
Some things are excluded whatever you set: pages served to logged-in users, the WooCommerce cart, checkout and account pages, search results, previews and page-builder edit modes, anything under wp-admin, REST and AJAX requests, and every request that is not a plain GET.
Every save publishes a new worker version: visitors install it on their next visit and the old caches are dropped. Scripts and styles are refreshed in the background and WordPress adds version strings when plugins and themes update, so online visitors always see current content. The Clear caches button at the bottom of the screen publishes a new version without changing settings, useful after a theme change. Under Advanced you can switch the service worker off (the manifest and meta tags stay; the worker is unregistered in visitors' browsers and its caches cleared) and turn on an "updated, reload" notice for visitors.
The Status panel says the site is not served over HTTPS: browsers will not register the worker or offer installation on plain http. Move the site to HTTPS and make sure the WordPress Address and Site Address under Settings → General both use it.
The manifest or the worker will not load: a caching plugin may be serving a stale copy, so purge it; the endpoints set the DONOTCACHEPAGE flag that the common caching plugins respect. On nginx, make sure requests for unknown URLs fall through to index.php; the worker URL has no .js extension precisely so that static-file rules do not catch it.
The install banner never appears: check the Status panel first. Then remember that only Chrome, Edge and Samsung Internet prompt, only after an interaction, only once the page-view threshold and delay have passed, and not during the snooze period. Test in a private window so earlier dismissals do not apply.
Every page shows the offline page when I test: pages served to logged-in users are never stored, by design. Test offline mode logged out or in a private window.
The icon looks blurry or has bands: use a square image of at least 512 x 512 pixels. Smaller images are enlarged and non-square images are padded on the background colour; the picker warns you when it happens.
The home page tags check says there are two manifest links: another plugin or the theme also outputs a manifest; browsers use the first one. Keep one PWA plugin only. The Plugins screen also warns when a second PWA plugin is active.
What happens if I deactivate the plugin: the manifest, worker and offline page URLs stop responding, and browsers unregister a worker whose script returns 404 at their next update check. Uninstalling also removes the settings and the generated icon files.
We build and customise WordPress plugins for a living. If your app needs push notifications, a store listing, or offline forms for staff in the field, tell us what and we'll quote it.