It includes responsive websites, hybrid apps, or native apps. When it comes to magento 2 pwa, it appears as a useful and hot trend in recent days. Hence, it is a perfect moment to be informed about this technology and how to apply it to your existing Magento sites.
What is PWA?
Progressive Web App (PWA) is a popular web application that applies various web capabilities to deliver better user experience. It can works like native applications with the icons on the splash page, mobile home screen, push notifications, full-screen display, and more. All kinds of PWAs surely meet three vital criteria, including engaging, reliable, and fast.
What makes PWA ideal for Magento 2?
PWA is grabbing more attention from the Magento users, mainly when magento 2 pwa studio is released. Here are other major reasons to consider pwa for magento 2 as follow:
Improved user experience over mobile devices
There is no need for downloading to get PWA on the user's mobile. It is a door to them for enjoying the wonderful functions, including background sync, offline mode, and remaining app-like features.
Less maintenance and development cost than native apps
You need to develop two apps for your native apps suitable for Android and iOS platforms. It leads to more effort and time for app maintenance and development. Also, a solo codebase is required for creating PWA, which can function regardless of the operating system.
PWA is more than a hot tread
PWA in your Magento 2 store is not only a big trend but also the future of many applications. It is the main reason many Magento sites adopt this new technology. It can improve the satisfaction level of mobile users.
- Improved user experience over mobile devices
How to convert your Magento 2 store into PWA?
Magento stores can consider several options to perform magento 2 pwa install. It includes:
Install PWA Extensions for Magento 2
It is simple to add PWA features to the Magento website. Many PWA extensions are available for this purpose so that you can choose the right one. These models are not only affordable but also save installation time.
Use Magento 2 PWA Studio
This magento 2 pwa setup helps to deploy, develop, and maintain the PWA storefront for your Magento 2 websites. The main aim of this comprehensive solution is that it replaces the existing storefront with a PWA storefront.
Useful details of Magento 2 Vue Storefront
If you look for a backend-agnostic and headless eCommerce PWA, you can prefer Vue Storefront. With a headless architecture, it permits Vue Storefront to connect with various eCommerce platforms easily. As a result, it appears as the frontend PWA for Magento. It has many useful features, including:
- Focus on performance
- Mobile-first approach
- Endless theming and customization options
- Excellent developer experience
- Offline mode
Setup of Magento 2 Vue Storefront
There are three main components available for integrating this vue storefront that includes:
It is a primary project where people can find documentation, problems mapped to upcoming releases and remaining resources, to begin with, Vue.js on webpack.
This API layer offers data to the vue-storefront app. It includes docker instances for ElasticSearch and Redis required by pimcore2vuestorefront and mage2vuestorefront
pimcore2vuestorefront or mage2vuestorefront
Data bridges that are responsible for moving the data back from your Magento 2 to Vue Storefront data store.
Installation of Magento 2 Vue Storefront
git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront
yarn installer or node installer
Integration with the Magento 2 platform
This tool is utilizing Magento 2 API through OAuth authorization. Hence, you should prepare the access to Magento Integration at first. You can enter the admin panel of Magento 2 and click: System → Integrations.
Click Add New Integration and fill in:
Your password to confirm the changes
On API Permissions tab, you can check resources > Save
Finally, you can click on Activate option and receive few OAuth access tokens:
Installing vue-storefront-api locally:
You can ensure that Docker is running. Also, you are asked few questions immediately:
This process generally takes a few minutes and you can look at this following screen after successful installation.
Get the docker instances for Elastic Search and Redis up and running
Get the vue-storefront-api up and running on localhost:8080
Get the vue-storefront up and running on localhost:3000
To install mage2vuestorefront:
git clone https://github.com/DivanteLtd/mage2vuestorefront.git mage2vs
In this step, you can edit src/config.js file in the directory of mage2vuestorefront for setting this following section:
url: process.env.MAGENTO_URL || "http://your-magento-url.com/rest/", <- change to your Magento 2 URL,
consumerKey: process.env.MAGENTO_CONSUMER_KEY || 'alva6h6hku9qxrpfe02c2jalopx7od1q',
consumerSecret: process.env.MAGENTO_CONSUMER_SECRET || '9tgfpgoojlx9tfy21b8kw7ssfu2aynpm',
accessToken: process.env.MAGENTO_ACCESS_TOKEN || 'rw5w0si9imbu45h3m9hkyrfr4gjina8q',
accessTokenSecret: process.env.MAGENTO_ACCESS_TOKEN_SECRET || '00y9dl4vpxgcef3gn5mntbxtylowjcc9',
The remaining config.js entries actually point out to vue-storefornt-api based Redis and Docker instances that are required by the mage2nosql to function.
If you want to make a complete import, you can run these following commands.
node cli.js taxrule- synchronizes all the products, links and categories between categories and products
node cli.js attributes
node cli.js categories
node cli.js productcategories
node cli.js products
node --harmony cli.js fullreindex
The theme of Magento 2 Vue Storefront
Vue Storefront lets people develop themes and utilize their core business logic. Every e-commerce feature is implemented in the core, so anyone can develop smoothly functioning online store by writing CSS and HTML and also inheriting business logics from a core. Users can modify and even extend their core logic easily in their theme.
The magento 2 pwa theme is located in the themes/src folder.
How to switch themes?
If you want to use these themes, you can modify the theme property in the configuration file for naming the property form a package.json file available in the root directory of your theme. In this process, you can copy the default.json file to a similar folder and name it local.json. Finally, you can make changes.
A guide on creating a custom theme
You need to copy as well as modify a default theme to create the Vue storefront theme.
- At first, you can copy your default folder existing in src/themes. After that, you can change the name of an existing theme to the name new theme.
- Modify the property of name in the package.json file of your theme
- The next step is to insert a name in the theme property of the config file in config/local.json.
- Then, you can run yarn install so Lerna can easily detect the new theme.
Once you make the changes, you can run the following command for detecting the new changes in a frontend:
yarn run build
Next, you can run the localhost:3000 for seeing the custom theme in a frontend
Here is a demo of Vue Storefront Custom theme as follow:
Progressive Web App will surely replace the native apps soon. Even it is not sure, but considerable growth of PWA in the future is indisputable. Hence, the process of integrating PWA in your Magento 2 websites is essential.