PWAs combine the best of web and mobile apps
PWAs provide native app-like navigation and interactions, with smooth animations and transitions that make your web content feel like a installed application.
Service workers cache your content so it works without internet connection or on unreliable networks, just like native apps.
Users can add your website to their home screen without going through app stores, eliminating download friction.
Cached resources load instantly, providing better performance than traditional websites, especially on mobile devices.
No need to manually update - new versions are automatically delivered to users when they reconnect to the internet.
PWAs are discoverable through search engines like regular websites, making them more accessible than native apps while maintaining app-like functionality.
Everything you need to convert your website into a PWA
Automatic install button appears when the browser detects PWA support, with customizable text and colors.
Special instructions for iOS users showing exactly how to "Add to Home Screen" since Safari handles PWAs differently.
Elegant loading indicator at the top of the screen during page transitions in standalone mode (configurable color).
Full control over colors, icons, and display modes through simple JSON configuration.
Just include one JavaScript file - no complex setup or build process required.
All elements automatically adapt to different screen sizes and orientations.
Requires HTTPS for service worker registration, ensuring secure connections.
Automatic caching of essential files for instant loading and offline functionality.
Service worker automatically updates when new versions are available.
Generates web app manifest on-the-fly based on your configuration.
Graceful error messages if something goes wrong during initialization.
Simple JSON-based setup with comprehensive documentation for all options.
What you'll need to use this PWA plugin
Service workers require HTTPS for security (except on localhost for development). Ensure your production site has a valid SSL certificate.
You must provide PNG icons in 192×192 and 512×512 sizes. Place them in an icons/ folder in your PWA plugin directory.
Chrome, Edge, Firefox, and Safari all support PWAs, but features may vary. Chrome has the most complete implementation.
Key considerations before implementation
Icon files are mandatory. Without proper 192px and 512px PNG icons, your PWA won't install correctly on all devices.
The web2appture-sw.js must be in your root directory or the directory you specify in the configuration.
iOS Safari handles PWAs differently than Chrome. Some features may have limited functionality on certain browsers.
Complete configuration guide for all settings
Add this to your website's <head> section:
<script src="web2appture/web2appture.js"></script>
Folder structure should look like this:
Web2Appture
├── web2appture.js
├── web2appture-sw.js
├── setting.json
└── icons/
├── icon-192.png
└── icon-512.png
All settings are configured in setting.json:
{
"name": "My App", // App name (displayed in install prompt)
"short_name": "App", // Short name for home screen
"theme_color": "#4634ff", // Toolbar color
"background_color": "#ffffff" // Splash screen background
}
"install_button": {
"enabled": "1", // "1" to show install button, "0" to hide
"text": "Install App", // Button text
"theme_color": "#ffffff", // Text color
"background_color": "#4634ff" // Button background
}
"top_loader": {
"enabled": "1", // "1" to enable loading bar, "0" to disable
"background_color": "#4634ff" // Loading bar color
}
The top loader only appears when the app is running in standalone PWA mode.
{
"name": "My Awesome App",
"short_name": "MyApp",
"theme_color": "#4634ff",
"background_color": "#ffffff",
"install_button": {
"enabled": "1",
"text": "Install App",
"theme_color": "#ffffff",
"background_color": "#4634ff"
},
"top_loader": {
"enabled": "1",
"background_color": "#4634ff"
}
}
This page is using the PWA plugin right now! Try installing it to see the features in action.