A short guide on Magento 2 PWA and integrating it in Magento 2

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.

• 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:

  • Platform-agnostic
  • 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:

  • vue-storefront

    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.

  • vue-storefront-api

    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 cd vue-storefront yarn

  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:

  Name (whatever)

  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

• Installing mage2vuestorefront

  To install mage2vuestorefront:

  git clone https://github.com/DivanteLtd/mage2vuestorefront.git mage2vs cd mage2vs/src yarn install

  In this step, you can edit src/config.js file in the directory of mage2vuestorefront for setting this following section:

  magento: {      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      node cli.js attributes      node cli.js categories      node cli.js productcategories      node cli.js products      node --harmony cli.js fullreindex - synchronizes all the products, links and categories between categories and products

• 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:

  cd viu-store-front yarn run build yarn install yarn start

  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.