Super Progressive Web Apps

Description

Progressive Web Apps (PWA) is a new technology that combines the best of mobile web and the best of mobile apps to create a superior mobile web experience. They are installed on the phone like a normal app (web app) and can be accessed from the home screen.

Home | Documentation | Help | Premium version Features

Users can come back to your website by launching the app from their home screen and interact with your website through an app-like interface. Your return visitors will experience almost-instant loading times and enjoy the great performance benefits of your PWA!

Super Progressive Web Apps makes it easy for you to convert your WordPress website into a Progressive Web App instantly!

Once SuperPWA is installed, users browsing your website from a supported mobile device will see a “Add To Home Screen” notice (from the bottom of the screen) and will be able to ‘install your website’ on the home screen of their device. Every page visited is stored locally on their device and will be available to read even when they are offline!

SuperPWA is easy to configure, it takes less than a minute to set-up your Progressive Web App! SuperPWA does a clean uninstall, by removing every database entry and file that it creates. In fact, none of the default settings are saved to the database until you manually save it the first time. Go ahead and give it a try.

And the best part? If you ever get stuck, we are here to watch your back! Open a support ticket if you have a question or need a feature. We are super excited to hear your feedback and we want to genuinely help you build the best Progressive Web App for your WordPress website!

Quick Demo?

• Open up SuperPWA.com in a supported device.
• Add the website to your home screen either from the Add to Home Screen prompt (Chrome for Android) or from the browser menu.
• Open the app from your home screen and you will see the splash screen.
• Turn off your data and wifi to go offline and open up the app. You will still be able to see the app and browse the pages you have already visited.
• Browse to a page that you haven’t visited before. The offline page will be displayed.

Thank You PWA Enthusiasts!

We are humbled by the feedback from the community. Thanks to everyone who believed in us and tried our plugin. Your feedback has been invaluable and we have learned a lot from your experience. Thank you for your love and support and we hope to return the love by striving to bring you the best ever Progressive Web Apps plugin for WordPress!

What’s in the box

Here are the current features of Super Progressive Web Apps:

• Generate a manifest for your website and add it to the head of your website.
• Set the application icon for your Progressive Web App.
• Set the background color for the splash screen of your Progressive Web App.
• Your website will show the “Add to home screen” notice when accessed in a supported browser.
• Aggressive caching of pages using CacheStorage API.
• Pages once cached are served even if the user is offline.
• Set custom offline page: Select the page you want the user to see when a page that isn’t in the cache is accessed and the user is offline.
• New in version 1.2: Support for theme-color meta property. Change the color of browser address bar of Chrome, Firefox OS and Opera to match your website colors.
• New in version 1.2: Now you can edit the Application Name and Application Short name.
• New in version 1.2: Set the start page of your PWA.
• New in version 1.2: Set Accelerated Mobile Pages (AMP) version of the start page. Supported plugins: AMP for WordPress, AMP for WP, Better AMP, AMP Supremacy, WP AMP.
• New in version 1.3: Added support for high-quality splash screen. You can now set the 512×512 icon for the splash screen of your Progressive Web App.
• New in version 1.3: Super Progressive Web Apps now accounts for content updates and will update the cache as you update the website.
• New in version 1.3: Improved in-browser service worker update handling.
• New in version 1.4: You can now set the default orientation of your PWA. Choose from “any” (Follow Device Orientation), “Portrait” and “Landscape”.
• New in version 1.4: You can now set the theme_color property in the manifest.
• New in version 1.5: OneSignal integration for Push notifications.
• New in version 1.6: WordPress Multisite Network compatibility.
• New in version 1.7: Add-Ons for SuperPWA is here! Ships with UTM Tracking Add-On to track visits coming from your PWA.
• New in version 1.8: Compatibility issues with OneSignal are now resolved!
• New in version 1.8: New Add-On: Apple Touch Icons that sets your app icons as Apple Touch Icons.
• New in version 2.0: SuperPWA is now compatible with WordPress installed in a sub-folder.
• New in version 2.0: You can now set display property from SuperPWA settings.
• New in version 2.1.1: SuperPWA now supports Maskable Icons.
• New in version 2.1.15: SuperPWA now supports Monochrome Icon.
• Full changelog

Upcoming features:

• Offline Indicator Notice.

PRO Version support additional advance feature
* Call To Action (CTA) More Info
* Android APK APP Generator More Info
* Data Analytics More Info
* Pre-Loader More Info
* App Shortcuts More Info
* QR Code Generator More Info

Progressive Web App Minimum Requirements

Progressive Web Apps require that your WordPress website is served from a secure origin i.e. your website should be HTTPS and not HTTP. If your website isn’t HTTPS, please contact your host about it. You can also ask us if you need help.

Device and Browser Support For PWA

Progressive web apps need browsers that support manifests and service workers. Currently Google Chrome (version 57+), Chrome for Android (62), Mozilla Firefox (57), Firefox for Android (58) are the major browsers that support PWA.

The list is fast growing and is likely to be supported in most major browsers by the end of this year.

How To Convert Your WordPress Website Into A Progressive Web App

WordPress Installation

• Visit WordPress Admin > Plugins > Add New
• Search for ‘Super Progressive Web Apps’
• Click “Install Now” and then “Activate” Super Progressive Web Apps

To install manually:

• Upload super-progressive-web-apps folder to the /wp-content/plugins/ directory on your server
• Go to WordPress Admin > Plugins
• Activate Super Progressive Web Apps plugin from the list.

Customizing Your Progressive Web App

Your Progressive Web App should be ready to test with the default settings on activation. You can customize it further and make it truly your own.

• Go to WordPress Admin > SuperPWA
• Set a Background Color for the splash screen to be shown when your PWA is opened on a mobile device.
• Set the Application Icon. This will be the icon of your PWA when it is added to the homescreen in a mobile device. The icon must be a PNG image and exactly 192 x 192 pixels in size.
• Set the Offline Page. This page will be displayed if the user is offline and the page he requested is not cached already. Ideally you should create a dedicated WordPress page and set it here. Within the page you create, you could add a note that reads, “It looks like you are offline and the page you requested is not available right now. Please check back again once you are online.”.
• Click “Save Settings”.

Testing Your Progressive Web App

• Open a supported browser in a supported device (for eg: Chrome for Android (62 or higher) in an Android Phone)
• Enter your website and wait till it fully loads
• You should see a pop-up that has your Application Icon and a button that reads “ADD TO HOME SCREEN”.
• Click on it and your PWA will be added to your home screen. Wait for the install to complete.
• Go to your home screen and open your PWA. Browse into a few pages if you like. Close the App.
• Disconnect from the internet and now open your PWA again. You should be able to see all the pages that you previously browsed.
• Try visiting a page that you did not visit before. You should see the page you set as your “Offline Page” in the settings of SuperPWA.

Troubleshooting Your Progressive Web App

Uh, oh. Your PWA did not work as expected? You do not see the “Add to Home Screen” notice?

• Make sure your website has a SSL certificate installed. i.e. your website should be https instead of http (as in https://your-domain.com).
• Make sure you are using a supported device and a supported browser. Refer to the “Device and Browser Support For PWA” list above.
• Make sure your Application Icon and Splash Screen Icon’s are of PNG format and 192px X 192px and 512px X 512px in size respectively.
• Clear the browser cache and try again. In Chrome for Android, go to Settings > Privacy > “Clear browsing data”.
• If the application icon does not update after first install, delete the PWA from your phone, clear browser cache and install again. (We are working on making it better.)
• Create a new support ticket and share a link to your website. We will take a look and figure it out for you.

Feature Requests, Issues, Pull Requests

Here is our repository on GitHub. Send us your pull requests, feature requests or issues, if any.

About us

We are a duo who got excited about the idea. Our mission is simple: Help you build an awesome PWA that your users would want to have on their home screen.

When we first heard about PWA we wanted to learn everything about it. We have spent countless hours learning and wants to share it with the world.

Please give us your constructive feedback and support.

Screenshots

Installation

To install this plugin:

1. Install the plugin through the WordPress admin interface, or upload the plugin folder to /wp-content/plugins/ using FTP.
2. Activate the plugin through the ‘Plugins’ screen in WordPress.
3. Go to WordPress Admin > SuperPWA

FAQ

If you have any questions, please ask it on the support forum.

Will Progressive Web Apps work on iOS devices?

Starting with Safari for iOS 11.3, Apple devices offer partial support for PWA’s. However, there is no native Add To Home Screen prompt just yet. You can add your app by tapping “Add to Home Screen” button in the share menu of the browser ( look for the square icon with an up arrow in the foreground ).

Just like you, we are eagerly awaiting the upcoming releases and we hope to see better compatibility in the coming months.

How To Customize Splash Screen

You can easily change the icon and the background color in SuperPWA > Settings.

Further customizations are not available right now, not because of any limitation of SuperPWA, but because they are not available in the PWA technology. When more options come up in the future, we will add them to SuperPWA then.

How To Track Visits Originating From Your Progressive Web App

You can track visits from your PWA in your analytics software (for e.g. Google Analytics) using the UTM Tracking add-on of SuperPWA. Go to SuperPWA > Add-Ons and activate UTM Tracking. Then in SuperPWA > UTM Tracking, you can set the UTM parameters as needed. Please refer the documentation for further information.

GDPR Compliance

SuperPWA does not collect or store user data, nor does it set cookies or store tracking data. Content visited by users from your PWA is stored in the user’s own device, in the cache of the browser. This is very similar to how modern browsers caches content offline for faster browsing.

With the UTM Tracking Add-On, you will be able to differentiate the visits originating from your PWA in your analytics software. You may have to include this in your privacy policy. Please note that SuperPWA does not track the visits, we just help you add the UTM parameters to the URL of the Start Page of your app so that third party analytics tools can differentiate the visits.

Feel free to get in touch if you have any questions.

Reviews

Best Plugin to add PWA

Oddusee October 23, 2024

Ok, So far we back on track. I hope this helps me greatly. Thanks for yall hard work on this plugin.

It seems like a scam / Parece estafa

felipeleveke October 8, 2024

After purchasing the PRO version and noticing that it did not work as expected, breaking some functionalities on the website, I requested a refund almost immediately. After sending numerous emails, they finally refunded my money, but I had to persist for more than a month with several follow-ups. Even though they had supposedly accepted the refund, several days passed with no updates, forcing me to contact them again to request the refund to be processed. They responded by saying that they would forward the issue to the relevant department. Later, I received another response where they tried to get access to the Admin to fix the issue, to which I replied that the refund had already been approved and they should process it without further delays. Once again, they said they would forward it to the finance department, where it was supposedly approved and would be processed soon. However, more days passed with no updates (it seemed like they were waiting for me to forget about it), so I sent another email requesting the refund. Finally, after more than a month, they processed it. I will remember Magazine3 and their SuperPWA plugin to never buy anything from them again. It was a terrible experience, bordering on fraud.——Después de adquirir la versión PRO y notar que no funcionaba como se esperaba, ya que rompía algunas funcionalidades de la web, solicité el reembolso casi de inmediato. Tras enviar múltiples correos, finalmente me reembolsaron el dinero, pero tuve que insistir durante más de un mes y en varias ocasiones. A pesar de que supuestamente habían aceptado el reembolso, pasaron varios días sin novedades, lo que me obligó a contactarlos nuevamente para pedir que hicieran efectivo el reembolso. Me respondieron diciendo que derivarían el asunto al área correspondiente. Más tarde, recibí una nueva respuesta en la que intentaban acceder al administrador de la web para solucionar el problema, a lo que respondí que ya habían aprobado el reembolso y que lo hicieran sin más demoras. De nuevo, dijeron que lo remitirían al departamento de finanzas, donde supuestamente ya estaba aprobado y se procesaría pronto. Sin embargo, pasaron más días sin noticias (parecía que estaban esperando que olvidara el asunto), por lo que les envié otro correo solicitando el reembolso. Finalmente, después de más de un mes, procesaron el reembolso. Recordaré a la empresa Magazine3 y su plugin SuperPWA para nunca volver a comprarles. Fue una experiencia terrible, rozando la estafa.

Instant Smart Web App, good stuff!

DeafJoe August 28, 2024

I installed and activated the Super PWA. Saved a few things in the settings/admin page. On iPhone did Share / Add to Home Screen / Done It worked! Now got full screen WordPress in Safari on iOS (no address bar, no Safari icons)

The SuperPWA WordPress dev team & plugin ROCK!

brilliantideasguide July 30, 2024

The SuperPWA dev and support team are AWESOME! And the SuperPWA WordPress plugin ROCKS! Kudos on a great job and well done. Five (5) ????? all the way! And although I only have the free “Basic Pack” version now—as my site is still new (less than a month old)—I already love this plugin and am going to get the “Pro Pack” version in the near future for sure. Thanks dolls and dudes or gals and guys! ??

Excellent tool — and great support!

angryrabbit May 31, 2024

I’d looked at PWA options for WordPress in the past and thought it was an interesting concept. I’d never had cause to use them until recently. I opted for SuperPWA due to good reviews. The set-up process is pretty straightforward and it pretty much worked ‘out of the box’. I did have one issue that related to maintaining the user logged in status. For this PWA, all users need to be logged in but we were finding that after a very short time, users were being logged out. The support was brilliant at helping to resolve this and within a few days, all was working as expected. Would highly recommend! I’m looking forward to using this for another website later in the year.

El hogar que deseo

apertuza May 20, 2024

It has helped me a lot to make my website compatible with PWA

Contributors & Developers

Changelog

2.2.31

• Date: 09.October.2024
• Feature: Added feature to add APKs to the iOS App Store. #516
• BugFixed: Conflict issue with Show On Scroll feature in CTA #545
• BugFixed: When the Pre-cache Automatic option is enabled, then there is an issue in the console. working fine in 2.0.28 #555
• Improvement: compatibility with nginx server #549
• Improvement: Changes title from ‘Splash Screen Image’ to ‘Touch Icons’ #550
• Improvement: superpwa-frontend-cta.js file is running on Mac book even if the option “Desktop” is not selected #551

2.2.30

• Date: 23.August.2024
• Feature: Added an option to change the colour of the navigation bar icon. #536
• BugFixed: The App Icon is getting replaced by Splash screen Icon on some Android devices #540
• Improvement: Improved in the Navigation bar code. #541
• Improvement: Few Improvements require #542

2.2.29

• Date: 02.August.2024
• Feature: Added compatibility with Translatepress #535
• Compatibility: Tested with WordPress 6.6 #543

2.2.28

• Date: 09.May.2024
• Feature: Need to make feature with form_factor in SuperPWA #526
• Feature: Need to create an option to edit the text in the iOS QR code. #529
• Improvement: Preloader issue after recent recent updates #530
• BugFixed: While clicking on the install button on CTA, the Google search appears for the word Install (Android only) #527

2.2.27

• Date: 09.May.2024
• Feature: Added compatibility with wp-multilang #514
• Feature: Added compatibility with Polylang #437
• Improvement: Apple touch Icons are not getting updated #521
• BugFixed: The CTA cancel button is not working on both Desktop and Android devices. #523

2.2.26

• Date: 25.April.2024
• Feature: Added an option where users can exclude a particular page from the PWA. #429
• Feature: Added all missing translation in SuperPwa pro extension #518
• BugFixed: Pre-caching offline URLs is not working when we add the URLs one by one in next line. #505
• Improvement: Change upgrade plan details page #513
• BugFixed: CTA is not working on the iOS devices. #517

2.2.25

• Date: 29.March.2024
• Feature: Option to change this Text “You’re currently offline.” #493
• Compatibility: Tested with WordPress 6.5 #510
• Feature: Option to hide the navigation bar on certain pages (PRO) #511
• Feature: Dynamic Start URL (PRO) #502
• Feature: Option to generate PWA install QR code for any website link (PRO) #502
• Improvement: Load CTA in body if footer is not present (PRO) #506
• Enhancement: Improve the error message while creating an APK.(PRO) #494
• BugFixed: APK logo and the splash screen icon logo are not showing properly.(PRO) #508

2.2.24.1

• Date: 05.March.2024
• BugFixed: Activating Pro version throwing Fatal error #501

2.2.24

• Date: 17.February.2024
• BugFixed: CTA on the frontpage is not showing. #499
• Feature: Make the offline message “You are offline” as an option #482
• Feature: Make the feature Prefetch manifest URL link as an option #496
• Enhancement: Improvements to the app screenshot option. #495

2.2.23.1

• Date: 24.December.2023
• BugFixed: Parse error: syntax error, unexpected “)” in PHP 7.2 and below

2.2.23

• Date: 22.December.2023
• Feature: Proper sorting of features #314
• Enhancement: Compatibility with loco translate #426
• Enhancement: Updated manifest as per the pwabuilder recommendation. #440
• Enhancement: Code Improvement checklist #486
• Enhancement: Update readme.txt and add all pro feature list #488
• BugFixed: Warning appearing in manifest #487
• BugFixed: On Uninstall few data still remain inside db. #485

2.2.22

• Date: 28.November.2023
• BugFixed: Role Based Access is not working #472
• BugFixed: Fixed Broken Access Control vulnerability Learn More

2.2.21

• Date: 18.October.2023
• BugFixed: Push notification is not working on IOS. #468
• Feature: Added Notification badge on the PWA icon #212
• BugFixed: Role Based Access is not working #472
• BugFixed: If add-on is not activated than do not show the settings button #470
• BugFixed: The button network deactivate is not working #475

Full changelog available at changelog.txt