Magazine3

<p>PWA plugin is bringing the power of the Progressive Web Apps to the WP & AMP to take the user experience to the next level!</p>
<p><a href="https://pwa-for-wp.com/" rel="nofollow ugc">Home</a> | <a href="https://pwa-for-wp.com/contact-us/" rel="nofollow ugc">Help & Tech Support</a> | <a href="https://pwa-for-wp.com/docs/" rel="nofollow ugc">Documentation</a>  | <a href="https://pwa-for-wp.com/pricing/" rel="nofollow ugc">Pro version Features</a></p>
<p>You can give the APP-like experience to your audience which will get your website to their home screen and works instantly like an APP with offline support.</p>
<h4>Features:</h4>
<ul>
<li><strong>Swipe Navigation in PWA :</strong> Adds swipe left / right feature to load next and previous articles.</li>
<li><strong>WP Hide & Security Enhancer Compatibility </strong></li>
<li><strong>Disable Scrollbar</strong>: Hide scrollbar in PWA app.</li>
<li><strong>AMP Support</strong>: Full PWA compatibility for AMP.  It works well with AMPforWP & AMP for WordPress by Automattic.</li>
<li>NEW: Multi site support</li>
<li>NEW: UTM Tracking</li>
<li>NEW: OneSignal support with multisite</li>
<li>NEW: Easily change start URL</li>
<li>NEW: Caching Strategy for PWA enabled assets</li>
<li>NEW: Added Support with PWA By PWA Plugin Contributors</li>
<li>Cache Expire option added</li>
<li><strong>Service Worker </strong>: We have developed a service worker which automatically gets installed in the background and performs the necessary actions such as caching the external objects to reduce the requests and more.</li>
<li><strong>APP Banners in Home-screen</strong>: Automatically notifies your visitor to get the APP version of the website which directly gets added with the list of Apps and Home-screen. You can customize the icons for this as well.</li>
<li><strong>Web App Manifest</strong>: The Manifest file is necessary to get this functionality rolled out and we have made this automatic and connected with the PWA options.</li>
<li><strong>Offline Support</strong>: The PWA version of your site will load blazing fast even when the user is offline. Once the user is online, it will update the content again. It will also count the analytics as well and updates it when the user goes online again.</li>
<li><strong>Full Screen & Splash Screen</strong>: When you open the PWA version from the mobile, it will load in full screen without any browser toolbar, which gives it a native app like feel in PWA version. There’s also a welcome splash screen which is totally customizable.</li>
<li><strong>Continuous Development</strong>: We will be working hard to continuously develop this PWA solution and release updates constantly so that your forms can continue to work flawlessly.</li>
<li>Dashboard System Status which helps you understand the setup status of the PWA.</li>
<li>Application Icon Uploading</li>
<li>Background color options for Splash screen</li>
<li>Add your own Application and short name.</li>
<li>Easily set the start page from options.</li>
<li>Set Device Orientation easily.</li>
<li>Tested with Google Lighthouse</li>
<li>More PWA Features Coming soon.</li>
<li><strong>[Premium]</strong> the ability to expand PWA for WP with <a href="https://pwa-for-wp.com/extensions/call-to-action-for-pwa/" rel="nofollow ugc">Call to Action</a>, <a href="https://pwa-for-wp.com/extensions/loading-icon-library-for-pwa/" rel="nofollow ugc">Loading Icon Library</a>, <a href="https://pwa-for-wp.com/extensions/data-analytics-for-pwa/" rel="nofollow ugc">Data Analytics</a>, <a href="https://pwa-for-wp.com/extensions/pull-to-refresh-for-pwa/" rel="nofollow ugc">Pull to Refresh</a>, <a href="https://pwa-for-wp.com/extensions/scroll-progress-bar-for-pwa/" rel="nofollow ugc">Scroll Progress Bar</a>, <a href="https://pwa-for-wp.com/extensions/pwa-to-apk-plugin/" rel="nofollow ugc">PWA to APK Plugin</a>, <a href="https://pwa-for-wp.com/extensions/offline-forms-for-pwa-for-wp/" rel="nofollow ugc">Offline Forms for PWA for WP</a>, <a href="https://pwa-for-wp.com/extensions/navigation-bar-for-pwa/" rel="nofollow ugc">Navigation Bar for PWA</a>, <a href="https://pwa-for-wp.com/extensions/quick-action-for-pwa/" rel="nofollow ugc">Quick Action for PWA</a>, <a href="https://pwa-for-wp.com/extensions/multilingual-compatibility-for-pwa/" rel="nofollow ugc">Multilingual Compatibility for PWA</a>, <a href="https://pwa-for-wp.com/extensions/buddypress-for-pwa-for-wp/" rel="nofollow ugc">BuddyPress for PWA for WP</a>, <a href="https://pwa-for-wp.com/extensions/rewards-on-pwa-install/" rel="nofollow ugc">Rewards on PWA Install</a>, <a href="https://pwa-for-wp.com/extensions/qr-code-for-pwa/" rel="nofollow ugc">QR Code for PWA</a>, <a href="https://pwa-for-wp.com/extensions/pwa-to-ios-plugin/" rel="nofollow ugc">PWA to iOS Plugin</a>, and <a href="https://pwa-for-wp.com/extensions/pwaforwp-white-label/" rel="nofollow ugc">Whitelabel for PWA </a> extensions</li>
</ul>
<p><strong>We Act Fast on Feedback!</strong><br />
We are actively developing this plugin and our aim is to make this plugin into the #1 solution for PWA in the world. You can <a href="https://github.com/ahmedkaludi/pwa-for-wp/issues" rel="nofollow ugc">Request a Feature</a> or <a href="https://pwa-for-wp.com/contact-us/" rel="nofollow ugc">Report a Bug</a>.</p>
<p><strong>Technical Support</strong><br />
Support is provided in <a href="https://wordpress.org/support/plugin/pwa-for-wp" rel="ugc">Forum</a>. You can also <a href="https://pwa-for-wp.com/contact-us/" rel="nofollow ugc">Contact us</a>, our turn around time on email is around 12 hours.</p>
<p><strong>Would you like to contribute?</strong><br />
You may now contribute to this PWA plugin on Github: <a href="https://github.com/ahmedkaludi/pwa-for-wp" rel="nofollow ugc">View repository</a> on Github</p>


PWA for WP – Progressive Web Apps Made Simple

PWA plugin is bringing the power of the Progressive Web Apps to the WP & AMP to take the user experience to the next level.

SuperPWA

<p>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.</p>
<p><a href="https://superpwa.com/" rel="nofollow ugc">Home</a> | <a href="https://superpwa.com/docs/" rel="nofollow ugc">Documentation</a> | <a href="https://superpwa.com/contact/" rel="nofollow ugc">Help</a> | <a href="https://superpwa.com/docs/#pro-doc" rel="nofollow ugc">Premium version Features</a></p>
<p>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!</p>
<p>Super Progressive Web Apps makes it easy for you to convert your WordPress website into a Progressive Web App instantly!</p>
<p>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!</p>
<p>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.</p>
<p>And the best part? If you ever get stuck, we are here to watch your back! <a href="https://wordpress.org/support/plugin/super-progressive-web-apps" rel="ugc">Open a support</a> 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!</p>
<h4>Quick Demo?</h4>
<ul>
<li>Open up <a href="https://superpwa.com/?utm_source=wordpress.org&utm_medium=description-demo" rel="nofollow ugc">SuperPWA.com</a> in a supported device. </li>
<li>Add the website to your home screen either from the Add to Home Screen prompt (Chrome for Android) or from the browser menu. </li>
<li>Open the app from your home screen and you will see the splash screen. </li>
<li>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. </li>
<li>Browse to a page that you haven’t visited before. The offline page will be displayed. </li>
</ul>
<h4>Thank You PWA Enthusiasts!</h4>
<p>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!</p>
<h3>What’s in the box</h3>
<p>Here are the current features of Super Progressive Web Apps:</p>
<ul>
<li>Generate a manifest for your website and add it to the head of your website.</li>
<li>Set the application icon for your Progressive Web App. </li>
<li>Set the background color for the splash screen of your Progressive Web App. </li>
<li>Your website will show the “Add to home screen” notice when accessed in a supported browser.</li>
<li>Aggressive caching of pages using CacheStorage API.</li>
<li>Pages once cached are served even if the user is offline. </li>
<li>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.</li>
<li>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. </li>
<li>New in version 1.2: Now you can edit the Application Name and Application Short name.</li>
<li>New in version 1.2: Set the start page of your PWA.</li>
<li>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.</li>
<li>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.</li>
<li>New in version 1.3: Super Progressive Web Apps now accounts for content updates and will update the cache as you update the website. </li>
<li>New in version 1.3: Improved in-browser service worker update handling.</li>
<li>New in version 1.4: You can now set the default orientation of your PWA. Choose from “any” (Follow Device Orientation), “Portrait” and “Landscape”.</li>
<li>New in version 1.4: You can now set the theme_color property in the manifest.</li>
<li>New in version 1.5: OneSignal integration for Push notifications.</li>
<li>New in version 1.6: WordPress Multisite Network compatibility. </li>
<li>New in version 1.7: Add-Ons for SuperPWA is here! Ships with <a href="https://superpwa.com/addons/utm-tracking/?utm_source=wordpress.org&utm_medium=description" rel="nofollow ugc">UTM Tracking Add-On</a> to track visits coming from your PWA.</li>
<li>New in version 1.8: Compatibility issues with OneSignal are now resolved! </li>
<li>New in version 1.8: New Add-On: <a href="https://superpwa.com/addons/apple-touch-icons/?utm_source=wordpress.org&utm_medium=description" rel="nofollow ugc">Apple Touch Icons</a> that sets your app icons as Apple Touch Icons. </li>
<li>New in version 2.0: SuperPWA is now compatible with WordPress installed in a sub-folder. </li>
<li>New in version 2.0: You can now set <a href="https://superpwa.com/doc/web-app-manifest-display-modes/?utm_source=wordpress.org&utm_medium=description" rel="nofollow ugc">display property</a> from SuperPWA settings.</li>
<li>New in version 2.1.1: SuperPWA now supports Maskable Icons.</li>
<li>New in version 2.1.15: SuperPWA now supports Monochrome Icon.</li>
<li><a href="https://superpwa.com/changelog/" rel="nofollow ugc">Full changelog</a> </li>
</ul>
<p><strong>Upcoming features:</strong></p>
<ul>
<li>Offline Indicator Notice.</li>
</ul>
<p><strong>PRO Version</strong> support additional <a href="https://superpwa.com/docs/" rel="nofollow ugc">advance feature</a><br />
* Call To Action (CTA) <a href="https://superpwa.com/doc/call-to-action-cta-add-on-for-superpwa/" rel="nofollow ugc">More Info</a><br />
* Android APK APP Generator <a href="https://superpwa.com/doc/android-apk-app-generator-add-on-for-superpwa/" rel="nofollow ugc">More Info</a><br />
* Data Analytics <a href="https://superpwa.com/doc/data-analytics-add-on-for-superpwa/" rel="nofollow ugc">More Info</a><br />
* Pre-Loader <a href="https://superpwa.com/docs/article/preloader-add-on-for-superpwa/" rel="nofollow ugc">More Info</a><br />
* App Shortcuts <a href="https://superpwa.com/docs/article/app-shortcuts-add-on-for-superpwa/" rel="nofollow ugc">More Info</a><br />
* QR Code Generator <a href="https://superpwa.com/docs/article/qr-code-generator-add-on-for-superpwa/" rel="nofollow ugc">More Info</a></p>
<h3>Progressive Web App Minimum Requirements</h3>
<p>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 <a href="https://wordpress.org/support/plugin/super-progressive-web-apps" rel="ugc">ask us</a> if you need help.</p>
<h3>Device and Browser Support For PWA</h3>
<p>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.</p>
<p>The list is fast growing and is likely to be supported in most major browsers by the end of this year.</p>
<h3>How To Convert Your WordPress Website Into A Progressive Web App</h3>
<h4>WordPress Installation</h4>
<ul>
<li>Visit WordPress Admin > Plugins > Add New</li>
<li>Search for ‘Super Progressive Web Apps’</li>
<li>Click “Install Now” and then “Activate” Super Progressive Web Apps</li>
</ul>
<p>To install manually:</p>
<ul>
<li>Upload super-progressive-web-apps folder to the /wp-content/plugins/ directory on your server</li>
<li>Go to WordPress Admin > Plugins</li>
<li>Activate Super Progressive Web Apps plugin from the list.</li>
</ul>
<h4>Customizing Your Progressive Web App</h4>
<p>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.</p>
<ul>
<li>Go to WordPress Admin > SuperPWA</li>
<li>Set a Background Color for the splash screen to be shown when your PWA is opened on a mobile device.</li>
<li>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.</li>
<li>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.”. </li>
<li>Click “Save Settings”.</li>
</ul>
<h4>Testing Your Progressive Web App</h4>
<ul>
<li>Open a supported browser in a supported device (for eg: Chrome for Android (62 or higher) in an Android Phone)</li>
<li>Enter your website and wait till it fully loads</li>
<li>You should see a pop-up that has your Application Icon and a button that reads “ADD TO HOME SCREEN”.</li>
<li>Click on it and your PWA will be added to your home screen. Wait for the install to complete. </li>
<li>Go to your home screen and open your PWA. Browse into a few pages if you like. Close the App.</li>
<li>Disconnect from the internet and now open your PWA again. You should be able to see all the pages that you previously browsed. </li>
<li>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. </li>
</ul>
<h4>Troubleshooting Your Progressive Web App</h4>
<p>Uh, oh. Your PWA did not work as expected? You do not see the “Add to Home Screen” notice?</p>
<ul>
<li>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).</li>
<li>Make sure you are using a supported device and a supported browser. Refer to the “Device and Browser Support For PWA” list above.</li>
<li>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. </li>
<li>Clear the browser cache and try again. In Chrome for Android, go to Settings > Privacy > “Clear browsing data”.</li>
<li>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.) </li>
<li>Create a <a href="https://wordpress.org/support/plugin/super-progressive-web-apps" rel="ugc">new support ticket</a> and share a link to your website. We will take a look and figure it out for you.</li>
</ul>
<h3>Feature Requests, Issues, Pull Requests</h3>
<p>Here is our repository on <a href="https://github.com/SuperPWA/Super-Progressive-Web-Apps" rel="nofollow ugc">GitHub</a>. Send us your pull requests, feature requests or issues, if any.</p>
<h3>About us</h3>
<p>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.</p>
<p>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.</p>
<p>Please give us your constructive feedback and support.</p>


Super Progressive Web Apps

This plugin is one of those rare gems that goes beyond just adding a feature. This plugin is a standalone reason to use WordPress. In 5 min you can make any of your WordPress sites an app with no code. Really great stuff. 

This is a Top 10 plugin for me now

SuperPWA helps you convert your WordPress website into a Progressive Web App instantly.

PWA for WP – Progressive Web Apps Made Simple vs Super Progressive Web Apps