What is PWA?
PWA (Progressive Web Application) is a midway of web pages and application. These are the web applications that load like regular web pages/websites but provides us with benefits like easy to load, no installation hassle, works offline, 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 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 lighting 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 store app link on the frontend.
How to install this application?
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.
Once you double click on the app’s name you will be introduced with the ‘Home Page’.
This is the Home Page:
Under this, we have four sections: Home (the one we are currently at), Configuration, Push Notification, and Configure Frontend. Below that we have some of the PWA features displayed.
On the Home page, we have a menu of FAQ which will redirect you to a page where you will get all FAQs related to this application.
Moving ahead, you will see an option of feature configuration. Clicking on the ‘Configure App’ menu will redirect you to the Configuration section (will be discussed ahead in this manual). Next, you have a brief definition of PWA with ‘View App Feature’ and ‘Take a tour’ menu. Go ahead and explore these options.
Lastly, on the Home page we have these two menus:
Click on ‘Schedule Booking’ menu if you want to get one to one live support from our best executives and if you have any query, you can create a ticket by clicking on ‘Create Ticket’ menu and your request will be resolved as soon as possible.
This is all for the Home page, moving ahead to the Configuration section.
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 image 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 ‘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’.
How to get your Firebase ID and keys?
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 ‘setting’ menu below 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 which 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.
How to add Push Notification?
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 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.
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.
For Android Devices:
When your customers will visit your store using your store URL on their Android device, they will get such a display on their screen:
Here, they will see the features of your store which you added on ‘configuration page’ with a message saying ‘Add *your app name* to Home screen’.
Clicking on this message will display a pop up on their screen as shown in the image below:
Clicking on ‘ADD’ will display your web app on their home page.
Once you open the app, you will see this display having shop logo and tagline:
And this is how customers will receive the notifications:
This is how the ‘App Link’ will be displayed on your Store Frontend:
For iOS Devices:
When your customers will visit your store using your store URL on their iOS device, they will get such a display on their screen:
After clicking on the button shown in the image above, they need to click on the Add to Home Screen button.
Click on Add button to add the app on the home screen.
This is how the PWA app will be shown.
Note: PWAfy doesn’t support push notifications on iOS for now.
Frontend Demo Link: https://pwa-demo-shop.myshopify.com/
Furthermore, if you need any kind of support/consultancy then please raise a ticket at https://webkul.uvdesk.com/ or drop a mail at firstname.lastname@example.org.
Thank you for reading this blog!