Salesforce offers a PWA kit for modern front-end development. Our Commerce Cloud store needs to give a wonderful experience and feel to the end-user; that is our goal here.
PWA kit is based on Node.js, React framework, the great single page app framework, and Express.js, the most popular JavaScript web app framework. Develop the app with the most popular bundler and testing frameworks (webpack, Jest, React Testing Library), and now you have a great base to build and deploy the app.
Why Do We Need PWA for Commerce Cloud?
1. Available in offline mode
Web applications or websites will not show content properly if the internet connectivity is limited or there is no internet connection whatsoever. Compared with a mobile app, they are often self-contained and allow users to use them while internet connectivity is limited or has no internet connection. The result: it provides great availability, accessibility, and engagement. PWA offers all these features for you.
2. Behaves like Mobile App
PWA is designed like mobile apps but offers helpful and all kinds of website functionalities like dynamic data rendering in front end and backend database access. Most of the PWA offers from existing frameworks and UX/UI that provides impressive user experiences compared to classic websites. Still, PWAs work like websites and are listable and indexable by all search engines, which help to increase business visibility on the online market.
3. Quick and Smooth installation
We do not want to use the play store or some other marketplace to install the PWA app. Users can download the app directly onto their device from a website. PWA provides shortcuts for quick access, its own icon on smartphones and portable tablets, just like a smartphone app. The icons will differ based on the business identity.
4. Appstore not involved here
No need to publish PWA on app stores. The development team can push changes or latest updates without waiting for any approval. The changes or updates are automatically downloaded and updated when the end-users or customers relaunch the app.
5. Use of device hardware features
PWA can make use of advantages of the device hardware features such as geolocation or camera. Also, push notification is another fantastic way to share data and business updates
PWA apps’ benefit to the desktop users
PWA can also be installed on desktop or PC devices like native mobile apps.
1) Very small size than native application or hybrid application.
2) Update will happen automatically and no need to check manually.
3) Quick installation and is reliable
Kick start with PWA Kit
STEP 1: Setting up your environment based on your operating system.
STEP 2: Create a new project with the help of the following pwa-kit command.
| npx pwa-kit-create-app |
| npx pwa-kit-create-app npx: installed 60 in 4.158s See https://developer.commercecloud.com/s/article/CommerceAPI-ConfigurationValues for details on configuration values What is your project ID (example-project) in Managed Runtime Admin? What is the URL (https://example_instance_id.sandbox.us01.dx.commercecloud.salesforce.com) For your Commerce Cloud instance? What is your Commerce API client ID in Account Manager? What is your site ID (examples: RefArch, SiteGenesis) in Business Manager? What is your Commerce API organization ID in Business Manager? What is your Commerce API shortcode in Business Manager? What is your API Client ID in the Einstein Configurator? (optional) |
STEP 3: Once the node module installation/project creation is done, just simply execute the command below to start the app.
npm start
Now access http://localhost:3000/
Start customizing your base PWA App
Our app front end is based on React framework; so, we must have some knowledge about React js. Let us start to customize our store front-end. What are we going to do now?
Let us add a new alert banner and change the app color.
Just open the following index.jsx file and add Alert and AlertIcon React components
/app/pages/home/index.jsx
Here, we are going to use Chakra UI; so, we need to import that library in our index.jsx
import {Alert, AlertIcon, Box, Button, Grid, GridItem, SimpleGrid, Stack} from ‘@chakra-ui/react’
Add the Alert component to the header section– right before the <Hero> component.
<Alert status=”info” variant=”solid”>
<AlertIcon />
MST Demo App
</Alert>
Final fine tuning is color change. So, open the following js file.
app/theme/components/project/header.js
Just change the background color to override the default color with the CSS in the JS file
backgroundColor:’pink’
Now, you can see the local development server rebuild and refreshed automatically. We do not want to refresh manually; you will see the following store’s front-end result!
Conclusion
The PWA Kit and Managed Runtime bundle are available to all B2C Commerce Cloud users, who are all looking to build great storefront experiences with the latest technology stack on top of the Salesforce APIs.
Reference
Introduction to Progressive Web Application.
About the author
Kumaresan is currently a Front-End Developer at MST Solutions. He is a blogger and Salesforce Community Group Leader, Love to do the front-end development with the latest technology stack.
