Progressive Web App (PWA) Settings

PNFPB generates a Progressive Web App (PWA) manifest and service worker so visitors can install your WordPress site as a home-screen app on any device, with full offline support.

Enable PWA

In PNFPB → PWA (Progressive Web App) settings tick the Enable PWA checkbox.

Required Manifest Fields

Field Description
App Name Full name shown in the install prompt and splash screen.
Short Name Short name for the home-screen icon label (max ~12 chars).
Start URL URL opened when the PWA is launched (usually /).
Display mode standalone (default), fullscreen, or browser.
Background Color Splash screen background color (hex, e.g. #ffffff).
Theme Color Browser UI theme color (hex).
App Icon Required in multiple sizes: 192×192 and 512×512 (PNG).
Screenshots Optional but recommended for desktop PWA install prompt.

Offline Cache URLs

Enter a list of page URLs to cache for offline viewing. When a cached page is requested without internet access it serves from the cache. If it is not cached the PWA shows a built-in offline 404 page.

Generated Files

PNFPB generates two files dynamically:

  • pnfpb_icpush_pwa_sw.js – the service worker (push notification + PWA offline logic).
  • pnfpbmanifest.json – the PWA web app manifest.

These are served from the WordPress root URL (e.g. https://yoursite.com/pnfpb_icpush_pwa_sw.js). On Apache servers they are generated via ? query string rewrites. On NGINX you must create static copies – see NGINX Setup.

PWA Manifest Link Injection

The plugin adds a <link rel="manifest"> tag to every page’s <head> (and the login page) via the wp_head and login_head hooks.

iOS Compatibility

iOS 17.0+ is required for full PWA functionality on Apple devices. Older iOS versions do not support the standard Web App Manifest install flow. On iOS the correct install method is: Safari → Share → Add to Home Screen.

Custom PWA Install Prompt

PNFPB provides a customisable install prompt that overlays the native browser install banner. The prompt footer action runs on every page load via wp_footer.

Configure under PNFPB → PWA settings:

  • Enable prompt (All / Desktop only / Mobile only / Pixel-threshold trigger)
  • Header text and description
  • Install button text, color, and text color
  • Custom install type (banner / dialog / etc.)
  • Show again after N days (pnfpb_ic_fcm_pwa_show_again_days, default 7)
  • iOS-specific prompt text (explaining Add to Home Screen)
  • iOS prompt re-appear interval (pnfpb_ic_ios_pwa_prompt_reappear)
  • iOS prompt disable option (pnfpb_ic_ios_pwa_prompt_disable)

Integrate with Other PWA Plugins

In the Integrate with SuperPWA & Other PWA plugins tab you can link PNFPB’s push notification service worker code into existing PWA service workers managed by other plugins. Use the filter hook:

add_filter( 'pnfpb_service_worker_extension', function( $sw_code ) {
    // $sw_code already contains PNFPB's push handler JS
    return $sw_code;
} );

Disable Service Worker

If you only want to use PNFPB for mobile-app REST API push (without browser push/PWA) enable the “Disable service worker” option (pnfpb_ic_disable_serviceworker_pwa_pushnotification). This switches off both the PWA service worker and browser push. All frontend push scripts are then omitted.