1.0 Introduction
Being in the retail eCommerce industry, you must have come across the word PWA (Progressive Web App). If yes, you must be also aware of the capability they carry as a shopping application. In case not, you’ve landed in the right place. With the constant growth in the usage of shopping apps (both native & PWA), online stores are shifting to PWA Mobile App development for their businesses. Launching a Progressive Web App is quite a simpler and affordable task these days.
KnowBand has launched Magento 2 PWA Mobile App, a complete no-code and automated tool to launch a Progressive Web App. In simple words, whenever any user opens your store URL on the mobile browser, he will get a prompted message of “Add To Home Screen”. The Magento 2 Progressive Web App will be added in the user’s device like any other app and online purchasing can be done on the go.
1.1 View Demo App:
Explore Progressive Web App demo for Magento 2 and take a glance at how your final apps will look and work:
Demo Store URL: https://ma2demo.knowband.com/pwa/manager/
PWA App URL: https://ma2demo.knowband.com/pwa/pwa-app/
[IMP] Notes For Magento 2 iOS PWA:
–> iOS devices do not offer any inbuilt “Add To Home Screen” prompt. Users need to manually add the Magento 2 PWA Mobile App to the home screen of iPhone or iPad.
–> iOS does not support web push notifications. The push notifications can only be sent to the Android device from the admin panel of Magento 2 PWA Mobile App Builder.
[NEW UPDATE] Magento 2 PWA supports RTL Languages:
The Magento 2 PWA Mobile App Creator now supports all worldwide languages including RTL (Right To Left). The PWA Mobile App for Magento 2 can have languages like Arabic, Hebrew, Persian, etc. The store owner can offer all website languages on the Progressive Web App and can even add new ones.
2.0 Admin Panel Screens:
With the friendly admin panel backend, the store admin can configure and customize the look, feel, and working of the PWA Mobile Application. It’s just a matter of a few clicks and mouse toggles to make changes in the Magento 2 Progressive Web Apps. Let’s take a detailed overview of the Admin panel screens:
2.1 General Settings:
a) Enable the Extension: Enable Magento 2 PWA module to make web app work on the users’ smartphones.
b) Redirect on Cart Page when Add To Cart: Enable to re-direct users to shopping cart or disable to keep them on the product screen.
c) Display Short Description: Enable to add & display a short description on the product screen of Progressive Web App.
d) Enable Request Log Reporting: Enable this tab to activate the log file on the PWA Mobile App. This log file can be used to rectify any abnormal behavior of Progressive Web Application.
e) Show App Preview: Enable to add a preview phone in the admin panel. All color, font, home screen changes will be displayed in real-time preview phone.
f) Enable Tab Bar: Add a bottom tab bar on the Magento 2 PWA Mobile App.
g) Select Layout for Home Page: Choose desired layouts from the added ones and improve look and feel of app.
h) Image for App Icon: Upload Magento 2 PWA app icon on your own and change the same as well if required.
i) Name For PWA App: Enter the name of the Magento 2 Progressive Web App.
j) Select Font For PWA App: Choose the font of your PWA app for Magento 2.
k) App Button Color: Choose button color for your PWA Mobile App.
l) App Button Text Color: Choose the button text color for your Magento 2 Progressive Web App.
m) App Theme Color: Choose the theme color (header) of your web application.
n) App Background Color: Choose the background color of the Progressive Web Application.
o) Splash Screen Background Color: Choose the right color option for the background of the PWA app splash screen.
p) Disabled Shipping Methods: Choose shipping methods to be restricted from working in Magento 2 PWA mobile app.
q) Enable & Upload Logo: Add the logo image of your store to be displayed on the header of the PWA Mobile app.
2.2 Push Notifications Settings:
The Magento 2 Progressive Web App offers unlimited push notifications to market and promotes store deals and products. The store admin will get push notifications for a lifetime with no additional charges.
The various fields under this setting tab require a Firebase Account set up. Here’s how you may set one:
How to set up a Firebase Account?
Step 1: Login Google Firebase
Step 2: Create a New Project
As you click on Add Project, the following dialog box will pop up:
It will take a few seconds to create the project. Once the project is ready, click continue.
Step 3: Manage Project Settings
Once the project is created, click on Project Settings.
Step 4: Go to Authentication options:
Step 5: Find Firebase Keys
In the project settings, click on Cloud messaging settings. From here, you can directly get the server key.
Step 6: Add your Web-App to Firebase
Step 7: Get other firebase related details and paste the same in PWA module admin panel.
Step 8: Get firebase server key from cloud messaging tab in Settings:
Step 9: Add your domain in authentication>>sign-in.
2.21 Automated Push Notifications:
The store admin gets to schedule automated notification sending for the following cases:
a) New Order Settings: Whenever any new order is placed from the Magento 2 PWA Mobile App.
b) Order Status Change Settings: Whenever the delivery status of any order gets changed/updated.
c) Abandoned Cart Settings: Whenever any user leaves product in cart and abandon Progressive Web App.
2.22 Manual Push Notification:
As shown in the above snapshot, the store admin can personalize and send manual push notifications to PWA Mobile App users. The message, image, discount offered, redirection link can be added/edited to improve the efficiency of notification and bring more sales.
2.3 Home Page Layout:
The Magento 2 PWA Mobile App Builder offers a fully customizable DIY editor panel to customize and configure the look and feel of Progressive Web Application. Various new layouts can be added to the admin panel based on upcoming festivals and occasions.
2.31 Top Categories:
2.32 Square Banner:
2.33 Sliding Banner:
2.34 Grid Banner:
2.35 Countdown Timer Banner
2.36 Square Products:
2.37 Sliding Products:
2.38 Grid Products:
How to get Facebook App details?
Facebook App can be created by following below-mentioned steps:-
Step 1: Go to given URL: https://developers.facebook.com/apps/
Step 2: Click on the “Add a New App” button.
Step 3&4: Enter your App name and email id, then click on “Create App ID” button.
Step 5&6: After clicking on Create App ID you will have to go through a security check as shown:
Step 7: Click on “Setting” tab.
Step 8-13: Two option will be available in the dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”, “Contact Email”, ”Privacy URL”, ”Terms and Conditions URL”, ”Add Logo”, ”Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is correct
yourdomain.com/store is incorrect
www.domain.com is incorrect
Step 14: Now click on “+Add Platform”.
Step 15: And select Website as Platform.
Step 16: Now Enter your site URL.
Step 17&18: Click on “Products+” and select Facebook login.
Step 19: Select web as the platform for the app.
Step 20: Now click on save.
Step 21&22: Click on Settings and add a Valid OAuth Redirect URIs.
Valid OAuth Redirect URIs:
https://example.com/pwa-app/login
Step 23&24: Click on “App review”. And mark “Make ‘your app name’ Public” to Yes.
Final Step: Copy the App ID and App Secret and paste it into the fields provided in the module.
How to get Google App details?
- Go to Google Developers Console
(https://console.developers.google.com/project) or click on link given top right of the respective tab in module configuration page. - Now click on Create Project on the left of the page.
- Enter a name for your project and proceed to the next step.
- Now click on APIs and auth-> Credentials from the left menu as shown below.
- Click Create New Client ID button from the right panel of the screen.
- You may have to fill the form for Consent Screen before proceeding. To do so, that you have to click on Consent Screen in the left menu as shown in the image above.
- Fill the pop-up form with below details:
Application Type: Web Application.
Authorized JavaScript Origins: Your store domain name (https://www.yourstore.com).
Authorized redirect URI or URI of Loginizer redirect page:
https://example.com/pwa-app/login
- Now click Create Client ID button to get your Client ID and Client Secret Key.
- Now you can use the client secret and client ID to let your customers login to your store using their Google account.
3.0 Front End PWA App Screens:
Take a quick glance on seamlessly designed screens of Progressive Web App for Magento 2:
3.1 Home Screen:
The home screen of the Magento 2 Progressive Web App is fully customizable from the admin panel of the module. You can design the layout of app screens the way you want. Custom layouts can be designed in the admin panel based on events, festivals, occasions, etc. and used whenever required.
1. Dynamic Layout:
Using various designing elements (banners, sliders, categories, etc), the store admin can create dynamic layout as per the need.
2. Store Logo:
Add store logo on the header of the PWA app.
3. Shopping Cart:
The shopping cart icon on the top-right corner of the home screen allows users to switch on cart screen.
4. Navigation Menu:
Browse the categories in the apps with left navigation menu on the home screen.
3.2 Left Navigation Menu:
The Magento 2 PWA Mobile Apps come up with seamless categorization of products. The categories on the PWA Mobile App will be the same as available on the website. Online shoppers can easily browse products from multiple categories without any hassle. Various CMS pages can also be added to the left navigation menu using the admin panel.
1. My Account:
My Account option contains all the user personal, shipping, order information. The PWA app shoppers get to view all the stored data related to them & can update the same as well.
2. Categories
Categories displayed in left navigation menu of PWA app are the same as of your website.
3. CMS Pages:
Various CMS pages like About Us, Contact Us, Terms & Conditions, etc. Can be accessed from here.
4. Language(s)
The language option allows PWA app users to view the web-app in their desired language. All available languages are displayed under this option only.
5. Currency(s)
All available currencies on your website are displayed here on Magento 2 PWA app.
6. Login/Logout
Users can easily sign-in/sign-out from Magento 2 PWA app via this option.
3.3 Category Screen:
1. Multiple Views:
The categories on PWA app for Magento 2 can be viewed in both list and grid view.
2. Sorting:
This option allows the online shoppers to choose the sort order in order to narrow down the search and get desired product with ease.
3. Filter:
Option to filter products simplifies product search. Users can filter all products under categories using various attributes like size, color, price etc.
3.4 Product Screen:
The product screen of the Magento 2 Progressive Web App contains all necessary product information the same as of your store. From multiple product images to short and long description helps in making user’s mind for purchase. The product availability is signaled as “In Stock” or “Out Of Stock” based on inventory status.
1. Product Info & Care
The complete product information as available in the inventory will be displayed here.
2. Short Description
Users get to read the short description of your product to quickly make up their minds about the purchase.
3. Product Options:
All the options related to the product like size, color, etc. are displayed here.
5. Add To Cart:
This button allows users to add products into the cart. The users can further process the cart for purchase.
6. Product Social Sharing:
The sharing option for the product allows users to share products on multiple social channels.
3.5 Login Screen
The Magento 2 Progressive Web App offers quick one-tap login options & make sign-in/registration process more seamless:
– Email Login
– Google Login
– Facebook Login
1. Login
The app users can easily authenticate & login to PWA apps using their previous email login credentials.
2. Sign Up
All the new app users can sign-up & create their account on the store from the Magento 2 PWA App. The sign-up form asks for only the necessary details to create an account.
3. Login with Facebook
The users can log in into the PWA app using their Facebook Account Credentials.
4. Login with Google+
The users can log in into the PWA app using their Google Account Credentials.
3.6 Shopping Cart Screen:
The shopping bag of Magento 2 PWA apps will display all added products along with their quantity and price to pay. The app users can view product details as well to be sure before purchasing one.
1. Apply Voucher:
This option allows users to use website coupons and grab discount offers.
2. Total Product Price:
The users get to view the complete cost of their shopping bag before proceeding further. It is automatically updated according to any update with product quantity or new addition.
3. Update Product Quantity:
The PWA app users can even update the product quantity with the “Update Quantity” option.
4. Remove Product:
The app users can simply remove the product from the cart by simply tapping the “Remove” option.
5. Continue Shopping:
The app users can leave the cart to browse more products on your app.
6. Continue To Checkout:
The PWA app users can proceed further to the checkout & payment screens just by tapping the “Continue To Checkout” option.
3.7 Checkout Screen:
The PWA Mobile apps for Magento 2 comes with a single screen clutter-free checkout with only relevant & necessary fields required. App users get a complete overview of the order before actually making the payment like shipping details, billing details, order summary, order comment, payment summary.
1. Shipping & Billing Details
This screen provides details of the shipping & billing addresses saved by the user. The user can also edit/save the new shipping address if needed.
2. Order Summary
The app users get to view product details before making payment.
3. Shipping Methods
All available shipping methods are displayed here. Users can choose the one suiting their need.
4. Order Comment
Users can also add any comment related to their order which will be visible to store admin on the order web-page in the backend.
6. Payment Summary
This section displays the complete breakdown payment details involved with the purchase.
7. Proceed To Payment
The PWA app users will be re-directed to the Payment screen after tapping the “Proceed To Payment” button.
3.8 Payment Screen:
Magento 2 PWA App brings all web-view (website) payments on the app. The app users will find same payment options here as available on the applications. The payment screen of Magento 2 Progressive Web App is fully optimized for app view.
3.9 My Account Screen:
My account screen of the Magento 2 PWA app offers all users details available on the Progressive Web App. The online shoppers get to view the personal details, shipping address, order details, etc.
1. Personal Details
Users can also view & update their pre-saved profile details.
2. Shipping Address(s)
The app users can see the complete list of pre-saved shipping addresses in the PWA app.
3. Order Details
The app users can get to view the complete list of the previously placed orders from the PWA app and their details.
4. Re-order feature
There is a direct re-order button on the My Account screen of the PWA app. All the previous products under this order will be added into the cart with just a single button.
3.10 Order Detail Screen
The Magento 2 Progressive Web App displays complete order details of previous app orders. This screen contains Order Details, Status History, Shipping & Billing Addresses, etc. for every order placed through the Magento 2 PWA app. The app users can quickly view the entire order summary and get to keep track of delivery status as well.
