cancel
Showing results for 
Search instead for 
Did you mean: 

What is Progressive Web Apps, or PWAs in Magento 2 and What is the deal with REST APIs and PWAs?

What is Progressive Web Apps, or PWAs in Magento 2 and What is the deal with REST APIs and PWAs?

What is Progressive Web Apps ?


  • Looks and behaves like a mobile app.
  • Take advantage of native mobile device features, without requiring the end user to visit an app store, make a purchase and download it locally.

Why PWA?

  • Fast
  • Secure (second last topic of answer)
  • Responsive
  • Cross-browser compatible
  • Offline Mode (Check the last topic in the answer)
  • Mobile “Install”
  • Shareable content

This answer also covers - Installation of Magento 2.3 with PWA


Let's take an example of Flipkart

Flipkart, India’s largest e-commerce site, decided to combine their web presence and native app into a Progressive Web Application that has resulted in a 70% increase in conversions

Flipkart Progressive Web App

Flipkart


Approach


  1. Developed Flipkart Lite, a Progressive Web App
  2. Added service workers for quicker load times
  3. Smooth navigation and scrolling at 60 frames/second
  4. Created an “Add to Home Screen” prompt to encourage users to add the mobile web-page to their home screens

Results


New Progressive Web App helps Flipkart boost conversions 70%

enter image description here


Flipkart also works on Offline mode

  • Service Workers can be scripted to intercept every network request and serve a response from cache even when the user is offline.
  • Service Workers wrapper library that enables using simple patterns such as NetworkFirst, CacheFirst or NetworkOnly. SW-Toolbox provides an LRU cache used in Flipkart app for storing previous search results on the browse page and last few visited product pages.
  • The toolbox also has TTL-based cache invalidation mechanism that we use to purge out of date content. Service Workers provide low-level scriptable primitives that make this possible.

enter image description here



BUT... BUT... BUT...

What is the Magento PWA Studio?

  • • The Magento PWA Studio project is a set of developer tools that allow for the development, deployment, and maintenance of a PWA storefront on top of Magento 2

The Magento PWA Studio project provides the following tools:

pwa-module

  • Its have modules like helpers, server-side functionality and acts as a foundation for all themes created using Magento PWA Studio.

pwa-buildpack -

  • Buildpack is a set of Webpack plugins and tools which is used for development of Magento PWA themes.

  • It is also used to setup and configure local development environment for Magento 2 platform.

It contains the following tools:

  • PWADevServer
  • Magento Resolver
  • Magento Root Components Plugin
  • magento-layout-loader
  • Service Worker Plugin

Peregrine - Peregrine is a set of React components created to handle Magento-specific functionalities like routing, root-components, layout handler, product lists, price display, etc.

Venia theme - venia-concept is a demo theme created by Magento using the Magento PWA studio. It showcases all currently available functionality, workflow and pages

PWA Studio is NOT

  • A New release of Magento

  • A Replacement of all front-end

  • A Desktop Application



Tools & Libraries used in PWA Studios


Webpack

  • Webpack’s primary function is to create one or more bundles from the dependencies in your project’s modules.

enter image description hereApp Shell


  • Total size is smaller
  • Initial load requests three files: login.html, shell-1234.js, 3456.js
  • Initial load needs to load: Shell + Router + content
  • The shell is visible earlier than with Page Shell approach.

Page Shell


  • Total size is bigger (i. e. dashboard content is in dashboard-1234.js and 4567.js)

  • App takes longer to be offline ready.

  • Initial load requests only two files: login.html, login-2345.js

  • Initial load needs to load: Shell + content

  • The shell + content is visible earlier than with App Shell approach.

A hybrid approach can be used where shell and content is separated in two requests (see admin page as example). This makes sense when content is much bigger than shell and shell should be visible earlier.

ReactJs

  • A JavaScript library for building user interfaces.

enter image description here

Redux

  • A JavaScript library used for managing state in a web application. enter image description here

GraphQL

  • A data query language on the client side and a service layer on the server side.

GraphQL in Magento

enter image description here

Authentication and Schema

enter image description here

Reducing amount of Front-end Queries

Phase Render

Desktop Browser compatibility


enter image description here

  • Not supported: IE, Safari


Mobile Browser compatibility


enter image description hereNot supported: Android Webview, IE, Safari


PWAs are More Secure


  • As a web developer, you may know how much Google encourages websites having httpsinstead of HTTP. Cyber threats are always top of the list for web and app developers.
  • In the past, HTTP was not secure enough to protect users’ information.
  • Websites are now being programmed in HTTPs and it is easy to launch a Progressive Web App in a secure environment.
  • While entering personal information in PWA such as credit card information or contact details, they may feel secure and have peace of mind.


PWA - Offline Mode

offline Wikipedia application is a good example of a PWA that uses an app shell model.

  • It loads instantly on repeat visits, but dynamically fetches content using JS.
  • This content is then cached offline for future visits.

enter image description here

Progressive Web App is the future of web development without any doubt. In the future, e-commerce sites, restaurants, and media sources will transition from native app to Progressive Web App. However, still in the initial phase, many of the developers would be actively looking for ways to make most out of the opportunities given by PWAs.


Lets start with Magento 2.3 installation with PWA

1. Enter the following command in DIR /var/www/html/ (m203 is my Magento 2.3 directory):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m203

2. Install Magento by Command Line:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin --admin-email=admin@admin.com --admin-user=admin --admin-paassword=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Create base pwa theme which will be the parent them for PWA Venia theme.

  • For now lets clone base pwa theme repository.

4. Create directory app/design/frontend/Magento/pwa and copy all files and directories of base theme here.

  • Lets check base theme is available or not.

  • Run: php bin/magento setup:upgrade

  • And navigate to your Magento Admin->Content->Themes enter image description here

5. Download PWA studio project.

6. Navigate to your Magento installation’s root directory and create a Pwa symlink folder linking to the project’s module directory(pwa-studio/packages/pwa-module).

  • from this directory i ran my command - /var/www/html/m230

  • This is a directory where my pwa downloaded source is /var/www/html/PWA/


ln -s /var/www/html/PWA/pwa-studio-master/packages/pwa-module app/code/Magento/Pwa

7. Link theme directory as well.Navigate to your Magento installation’s root directory and create a Pwa symlink folder linking to the project’s module directory(pwa-studio/packages/venia-concept).

ln -s /var/www/html/PWA/pwa-studio-master/packages/venia-concept app/design/frontend/Magento/venia

8. Now navigate to your pwa-studio project’s venia-concept directory, copy .env.dist into a new .env file and update the variables with the URL to your Magento development store.

cd /var/www/html/PWA/pwa-studio-master/packages/venia-conceptcp .env.dist .env

9. Install venia theme and Pwa Module:

run: php bin/magento setup:upgrade

we can see the venia theme is installed successfully.

enter image description here

10. Configure venia theme from admin->Content->Configuration

11. Navigate to path (/var/www/html/PWA/pwa-studio-master) run:

npm install

or

npm install webpack-dev-server -g

12. And Finally Navigate to /var/www/html/PWA/pwa-studio-master/packages/venia-concept

npm start

Congratulations! You have set up your development environment for the Venia theme project.

3 REPLIES 3

Re: What is Progressive Web Apps, or PWAs in Magento 2 and What is the deal with REST APIs and PWAs?

Hello,

 

PWA offers a mobile-like experience to your customers by employing the impressive capability of a web browser. 

 

PWA is a web innovation of making a site similar to look like a local application. a web application that uses modern web technologies and design patterns to provide a reliable, fast, and engaging user experience.

Re: What is Progressive Web Apps, or PWAs in Magento 2 and What is the deal with REST APIs and PWAs?

Thanks for explaining it. As we were looking for such a way to make our bike rivals mod apk site web app similar to the design of our website. And it will definitely help us in achieving our goal. Which will increase our app user. also they will not confused between our website and app.

Re: What is Progressive Web Apps, or PWAs in Magento 2 and What is the deal with REST APIs and PWAs?

Installed Progressive Web Apps run in a standalone window instead of a browser tab. They're launchable from on the user's home screen, dock, taskbar, or shelf. It's possible to search for them on a device and jump between them with the app switcher, making them feel like part of the device they're installed on.

New capabilities open up after a web app is installed. Keyboard shortcuts usually reserved when running in the browser, become available. Progressive Web Apps can register to accept content from other applications or to be the default application to handle different types of files.

When a Progressive Web App moves out of a tab and into a standalone app window, it transforms how users think about it and interacts with it.