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.
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.
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:
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.
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 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.
Magento stores can consider several options to perform magento 2 pwa install. It includes:
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.
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.
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:
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
Data bridges that are responsible for moving the data back from your Magento 2 to Vue Storefront data store.
git clone https://github.com/DivanteLtd/vue-storefront.git vue-storefront
yarn installer or node installer
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:
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
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.
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.
You need to copy as well as modify a default theme to create the Vue storefront 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
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.