Progressive Application for Shopify

PWA (Progressive Web Application) is a midway of web pages and applications.

These are the web applications that load like regular web pages/websites but provide us with benefits like easy to load, no installation hassle, working offline, and push notification feature.

What else do we want without actually installing the apps in our devices and bulking our phones with heavy GBs of applications but still experiencing an app-like interface!

This app comes with two different plans, i.e., Monthly & Yearly.

• Executive Plan (monthly): $9
• Premium Plan (yearly): $99

∼Plans related details are discussed ahead in this blog.

Highlighting some of the features of PWA here:

• No need to install. Simply just add on your home screen.
• Very light on memory.
• Less data-hungry.
• Works well on flaky networks.
• Loaded pages can be viewed even if you don’t have access to your internet i.e., works offline.
• Push notification is one appreciated feature of PWA.
• A hassle-free way to turn your store into an app.
• Makes your website lightning fast.
• Configure app name & icon on android/iOS.
• Completely responsive on almost all platforms.
• Admin can upload and change the application icon.
• He can set the splash background color of the Progressive Web Application.
• The Admin can add a store app link on the frontend.

Go to Landing Page, enter the shop URL where you want this app to be installed and click on the ‘install’ menu.

Once you install the app, you can find it in the app section of your Shopify store backend.

This is the Home Page:

Configuration section will be displayed like this:

Firstly, you will have to manage General Configuration settings where you basically need to enter a name for your app (which will be displayed below the web app launcher icon when your users will install it in their devices), the Tagline (this will be the welcome line which will be displayed on the screen for once when you are done installing the web app on your device) and you also need to upload the Launcher icon (which will represent your web app).

Next, in general configuration, you need to check the box which says ‘Show App Features to customers while App Installation’ if you want your customers to see your apps feature while installing it with a brief description. Upload a ‘splash screen’, which could be any picture that you want to display on the background of your app while installation (refer to the image below). ‘Save & Publish’ to save all the changes made.

Under the ‘General Configuration’ setting, you have the ‘Push Notification Configuration’.

Here you need to enter your Firebase Sender ID, Server Key, Application Public Server Key, Application Private Server Key (know how to get these keys). Then you need to upload a ‘Push Notification Icon’, which will be shown on the very first welcome notification just after you install the web app.

Lastly under ‘Push Notification Configuration’, you need to enter ‘Push Notification Title’ and ‘Push Notification Description’ which will be displayed on the welcome notification sent to your customers once they install your web app. After this, click on ‘Save’.

Firstly login to your Firebase account using your credentials. This will be the page where you will land on:

Here, click on ‘Add Project’, this action will give you this pop up:

Enter the project name, check the ‘I accept’ message and then click on ‘Create Project’. After a few blinks, your project will be created and then after clicking ‘continue’, you will land on this Home page:

Click on the ‘setting’ menu below the Home icon (as shown in the image above) and then go to ‘Project Settings’.

This is what you will get:

From ‘Settings’, go to ‘Cloud Messaging’, here you will get your Sender ID as well as Server Key. Now, scroll down to the bottom of this page, you will get this ‘Web Push certificates’ section:

Click on ‘Generate Key Pair’, it will give you this page:

Here, you will have your ‘Application public server key’. For ‘Application private server key’, click on the three dots as shown in the image above. It will give you an option to ‘Show Private Key’ (refer image below).

Clicking on the ‘Show private key’ will give you a pop up with ‘Application private server key’.

Copy all these keys and paste it in the ‘Push Notification Configuration’.

This will be the page that you will get once you click on the ‘Push Notification’ menu.

On the top right of the page, you have the ‘Add Push Notification’ menu.

Below that, you have a table with Title, Description, Push Notification Icon, Schedule Date, Push Notification, Status, and Action.

• Title: This is the heading of the notification that will be sent to your customers like if you are having a sale on your store, you can put up a title like ‘sale’.
• Description: This is the details about your notification like what is the sale about or offers your giving.
• Push Notification Icon: This icon will be shown with the notification depicting the reason for the notification or can be your store logo.
• Schedule Date: This is the duration for which you want your customers to be notified about this particular notification.
• Push Notification: This is a button for manual notifications. You can press it any time you want to send your customers that particular notification.
• Status: If the status is active, notifications will be sent to your customers as per the duration defined. If it is inactive, notifications will not be sent to your customers. Though, you may send manual notifications even if the status is inactive.
• Action: This allows us to perform three actions on the notification, i.e., Delete, Edit and Inactive.

Click on the ‘Add Push Notification’ menu on the top right and this action will display a pop up on your screen like this:

Enter FROM and TO date, Title, Description, Push Notification icon and click on ‘add notification’.

When you click on the ‘edit’ menu in the ‘more actions’ option, a similar pop up will appear, make the desired changes and click on ‘add notification’ to save the changes made.

This is all about ‘Push Notification’. Let’s move on to the last section ‘Configure Frontend’.

This page will be displayed when you go to the ‘Configure Frontend’:

Here you have an option to auto inject the code or you may even copy the code and paste it in your theme.liquid file, manually.

You can find the ‘theme.liquid’ file from your store’s backend section. Go to Online Store > themes > Actions > edit code > search for theme.liquid file and paste the provided code.

My Plan

PWAfy comes with two different plans, i.e., monthly & yearly:

The My Plan section of the app will display your current plan details.

You can click on the ‘View All Plans’ button to change your PWAfy plan.

If you are using the executive plan then you can change your current plan before 7-days of the plan expiry date or in the trial period only.

PWA for Android Devices:

• Splash Screen: When your customers will visit your store using your store URL on their Android device, they will get the splash screen.
• Users can add the app to your homescreen either clicking on the ‘Add PWA to Homescreen’ text at the bottom of the page (refer image 1) or clicking on the ‘Add to homescreen’ header message (refer image 2).
• After that, a dialog box will open, click on ‘Add’. Refer to image 3.
• The app will be added to the home screen (encircled app icon in image 4).
• Once you open the app, you will see this display having the shop logo and tagline (refer to image 5).
• The last image (6) shows the push notifications!