How to Create Progressive Web Apps (PWA)?

What are Progressive Web Apps?

Progressive web apps are not native Android or iOS apps but have capabilities that are very close to native apps.

We can store data offline, we can send post notifications. A PWA is essentially a “boosted” web app that can load some of its content even without an internet connection. It does that by storing the data in an offline cache.

Once installed, a PWA looks like any other app, it has features such as:

1. It has an icon on the home screen, app launcher, launchpad, or start menu.

2. It appears when you search for apps on the device.

3. It opens in a standalone window, wholly separated from a browser's user interface.

4. It can work offline.

What OS versions and browsers support PWA?

PWA compatibility varies with what device and OS you are using. For now, PWA is only compatible with the following browsers:

Mac: Chrome 45+,

Windows: Chrome 45+, Brave (latest)

Android: Chrome (Push Notifications Supported)

iOS: Safari 11.3+ (Push notifications Not Supported)

How to Customize and Install a Membership PWA?

Customizing a Membership PWA:

To customize your Memberships PWA, Please head to Memberships> Courses> Settings> App Settings:

You can switch the Enable PWA toggle once you are sure that your Customization is complete.
Under App Details, you can enter the Name, Short Name, and Description.

Under App Icon you can customize the icon of your app:

Please Note:

We have no control over which image the device OS actually does populate in the end but we have provided these two options to make the decision easier for the OS in the backend. Chrome automatically scales the icon for the device. Supported file formats for icon images are JPEG and PNG (PNG recommended for Android Apps).File Size should not be an issue here as long as it is accepted by the device.

Under App Colors  you can customize the color scheme of your app:

Please Note:

You are limited to the color options available as of now, Custom Colors are not available (Nor advised) as they can break your app's visual design.

Once all of this is done, you can scroll up Toggle on Enable PWA, and then Save.

If the Name field is left unfilled or if you have not uploaded even one App Icon, the save button will be greyed out and make it impossible for you to save

Installing PWA on a Windows Computer:

After you are done customizing and enabling your Memberships WPA, all that is needed to be done by your client is for them to click on this icon in their Browser Address Bar in Chrome, when logging in to your Memberships Login Portal:

And it would allow them to access your WPA on their desktop as a shortcut:

The Brave browser on Windows can be installed in the same way:

Please Note:

Being logged in to the Memberships course portal before installing the WPA is not required.

Installing PWA on a Mac Computer:

Once your PWA configurations are complete and PWA is enabled, only using a Chrome browser your clients would be able to download the Memberships PWA by clicking here when logging in to your Memberships Login Portal:

Depending on your Chrome download preferences, your WPA will either be downloaded in your Chrome apps dashboard:

Or on your Mac desktop:

Installing PWA on an Android Mobile device:

PWA is only supported on a Chrome browser in an Android device. It can be installed by Adding the PWA to your Home Screen from your Chrome browser as in the video below.

Installing PWA on an iOS Mobile Device:

On an iOS Mobile device, only Safari (versions 11.3+) is supported for PWA. On your iPhone/iPad, open Safari and open the memberships website. Follow the onscreen pop-up instructions as follows: