Banner for Progressive Web Apps
Use a Progressive Web App implemented with React JS to enhance the experience of your mobile users. Wordpress Tutorial
Noted That:
  • To install correctly this progressive-web-apps.zip .
  • Fisrt Download the progressive-web-apps.zip to your computer
  • Extract/Open progressive-web-apps.zip to Your Computer.
  • Then, Find readme.txt file inside progressive-web-apps.zip and Open readme.txt .
  • Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
  • Then, Follow the Tips Below.
Start the Tips:

Step-1 : Download " progressive-web-apps.zip " to Your Local Computer.

Step-2 : Then, Login to your " yourdomain.com/wp-admin " Dashboard.

Login to Wordpress Progressive Web Apps

Step-3 : Then, Click on " Plugins " + " Add New " from left Side Menu of Dashboard.

Go to Plugin Install Progressive Web Apps

Step-4 : Now, Click on " Upload Plugin " button.

Click Upload Button Progressive Web Apps

Step-5 : Now, Browse " progressive-web-apps.zip " Downloaded plugin from your computer, Where you downloaded " progressive-web-apps.zip " According to Step – 1 Above then, click on " Install Now "

Upload Plugin Progressive Web Apps

Step-6 : Now, Click on " Active Plugin "

Activate Progressive Web Apps

Step-7 : Then, See left Side Menu. " Progressive Web Apps " folder is added on left Side Menu. Now, Click on " Progressive Web Apps " folder.

Noted that: If you do not see " Progressive Web Apps " folder on left Side Menu then, see at left Side Menu " Settings " or " Tools ".

Step-8 : Now you configure yourself oR Watch video tutorial below about Progressive Web Apps Configurations and Settings or How to work " Progressive Web Apps " in your WordPress site.

oR

After Activated Plugin According to Step-6 then,

  1. Go to " Plugins " + " Installed Plugin " from Wordpress Admin Panel Leftside Menu.
  2. or Direct go to: https://yourdomain/wp-admin/plugins.php
  3. Then, Find " Progressive Web Apps " Activated Plugin from Plugin List.
  4. Then, Click on " Settings " from Plugin that is Progressive Web Apps
  5. Now, Edit/Add/Config the setting and Click on " Save Changes " button,
WP Plugin Setting



Guide

Simple installation for WordPress v4.8 and later

  1. Go to the ‘Plugins’ / ‘Add new’ menu
  2. Upload progressive-web-apps.zip then press ‘Install now’.
  3. Enjoy.

Comprehensive setup

A more comprehensive setup process and guide to configuration is as follows.

  1. Locate your WordPress install on the file system
  2. Extract the contents of progressive-web-apps.zip into wp-content/plugins
  3. In wp-content/plugins you should now see a directory named progressive-web-apps
  4. Login to the WordPress admin panel at http://yoursite.com/wp-admin
  5. Go to the ‘Plugins’ menu.
  6. Click ‘Activate’ for the plugin.
  7. Go to the ‘Progressive Web Apps’ admin panel.
  8. Choose color schemes, fonts and add your own logo and app icon.
  9. Access your site in a mobile browser and check if the application is displayed. If the app is not loading properly, make sure that the WordPress REST API can be accessed in the browser and doesn’t return an error.
  10. You’re all done!

Testing your installation

Ideally, use a real mobile device to access your (public) site address and check that the switching and mobile web app work correctly.

You can also download a number of mobile emulators that can run on a desktop PC and simulate mobile devices.

Please note that the progressive web app will be enabled only on supported devices: iOS & Android. Only the following browsers are compatible: Safari, Google Chrome, Android – Native Browser.


Name