On November 28, 2018, Magento introduced the most awaited release of Magento 2.3.
Magento 2.3 has introduced a ton of new features along with a lot of smaller optimizations.
But the most awaited feature is Magento PWA Studio. It is a suite of tools that empower developers to develop progressive web applications.
Magento PWA Studio also uses GraphQL which is one of the new feature introduced in Magento 2.3
Progressive Web Apps uses progressive enhancements that offers features similar to a native mobile application.
Progressive Web Apps and Android Instant Apps combined together lets you create beautiful apps with material design and animations without the need of installing them on any device.
Have you ever encountered a popup while browsing a website on mobile device saying “ADD TO HOME SCREEN”? When you click on the button, the application installs itself in the background. Now that application shows in your app drawer and offers the experience of a native mobile application.
The app was downloaded from a web application without seeing the face of Play Store or App Store. Isn’t it great!!!
These PWA apps offer offline access to the content without the need of an internet connection.
A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. It is –
PWA has numerous features that differentiate them from the traditional web and native applications –
PWA’s are built using progressive enhancement principles which is a web design strategy to provide the basic functionality and content to everyone irrespective of the browser. So PWA’s work with all the available browsers and are fully responsive which offers the same experience to a tablet or a mobile user.
PWA uses many optimization techniques to offer a blazing fast app experience and is completely secure as the apps are served through HTTPS, so no unauthorized user can access the app.
PWA sites cache content to ensure that some content can be served when a user is offline.
PWA’s offers support for push notifications which helps in keeping the end user engaged and motivated to open and use the app more often.
PWA’s are applications but are not distributed through app stores. The apps can be shared via a URL and can be easily installed by just visiting a site and adding it to the home screen.
Progressive Web App uses the web stack for the development. It results in less time and efforts which results in cost efficiency. Moreover, the same application can work on iOS, Android devices so you don’t need to build an app for multiple platforms.
Progressive Web App helps in saving your precious time as you don’t need to have a separate app for Android and iOS. One app can be used on both the platforms which result in faster time to market.
In many developing countries, mobile data is still an expensive commodity. PWA solves the data usage issue as it uses only a fraction of data compared to a native mobile app.
PWA offers up-to-date experience to users without the need of any installation. It also addresses the problem of software fragmentation as you don’t need to maintain an older version of the application.
Loading time of a Progressive Web Application is 2–3x faster as compared to a responsive website or an m.dot web stores. It results in smooth performance on a mobile device.
Magento is becoming a Progressive Web Application platform. That means they made a suite of tools for building online stores as Progressive Web Applications.
These tools help developers learn PWA techniques, build lightning-fast PWA front-ends, and create PWA components and extensions for reuse or sale on the Magento Marketplace.
Taken together, they are tentatively calling this suite of tools the Magento PWA Studio. In other words, we can say –
Magento PWA Studio is used to develop online Magento stores as Progressive Web Apps. It is a set of tools used for the development of React-powered Magento 2 templates.
The Magento PWA Studio provides the following tools –
For More information refer — https://magento-research.github.io/pwa-studio/venia-pwa-concept/
GraphQL is a query language for APIs. It is one of the modern technique to build and query API. In simple words, GraphQL is a syntax that addresses how to ask for data from a server and helps in loading data to a client.
GraphQL Offers –
Magento 2.3 executes GraphQL as an elective API endpoint in addition to REST API and SOAP API.
GraphQL opens up data retrieval possibilities for PWAs by allowing to request precise information that you require. It means that you can get a smaller amount of data more efficiently with the lesser number of API requests.
It allows Magento PWA to be quick even on slow mobile network connections.
Note: Before installing Venia theme please make sure that the version of Node.jsis greater than or equal to 8.0.0, and the version of NPM is greater than or equal to 5.0.0. The latest LTS versions of both are recommended.
I hope you are already aware of Magento 2 installation. But still, if you are new please refer to the following link for Magento 2 installation –
You can also download the Magento 2.3 from here and just extract it to your localhost directory. After that just hit the Magento directory on your browser and complete the Magento setup.
Create base PWA theme which will be the parent theme for PWA Venia theme from here
Now navigate to Magento Admin → Content → Design and here you can see PWA theme (as shown below)
ln -s /var/www/html/magento/pwa-studio/packages/pwa-module app/code/Magento/
ln -s /var/www/html/magento/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia
Now you will see that client.js is not loading
Magento PWA Studio has given developers a very useful toolkit which they can use to create beautiful PWA themes.
If you are looking for a progressive solution that offers better workflow, then Magento PWA Studio is the best solution.
Have any additional questions in your mind? Request a callback from our industry experts.
For a live demo please refer to our Proof Of Concept (POC).
Blog originally published on VT Netzwelt on 26 December 2018.
Original article link — Getting Started with Magento PWA Studio