We’re happy to share with you our Magento PWA Demo! Created by our team, based on PWA Studio tools and practices. Check out the highlights and key features below and see the demo in action!
We’ve used PWA Studio to create this demo, which is a more streamlined, fine-tuned solution (with room for improvements, of course), compared to the official Venia concept. As a result, this showcase’s main goal is to show what can be achieved in both UX and performance consistency standpoint when you create your own Magento PWAs using PWA Studio.
And the possibilities only expand from here. We’ll make sure to add new features to this demo as we continue working on PWA Studio and on our client projects, so stay tuned!
Key demo highlights:
- based on PWA studio, Buildpack and Peregrine
- mobile AND desktop PWA
- showcasing all key workflows, complete checkout included
- Lighthouse scores of 100 on 4/5 audits on regular networks
- 93-100 on all audits on slow 3G networks
- the “standard” PWA stuff – works offline, add to home screen, and more
What do these scores tell us?
They show that the team behind the PWA project had spent considerable time into optimizing the solution, and that they know what they’re doing.
Now, it doesn’t really matter if a certain audit score is a 100 or a 97, and Lighthouse scores can vary, depending on many factors.
The important thing to note is that this is not a race to Lighthouse 100, this is more of a marathon towards creating more streamlined, better performing solutions for merchants everywhere.
And this is the main promise of PWAs.
Feature update (May 2019)
We have, since the original article was published, added a number of features, so now, when you access the demo, you can also see in action the following:
- Offline add to cart
- Layered navigation (display only so far)
- Yotpo reviews
- Coupon codes
- Shipping estimates
- Grouped and bundle products support
Say no more – take me to the demo!
The team behind the demo
This is what our team members who worked on creating this demo have to say about the experience:
I’m having fun working on Inchoo PWA demo and improving my skills along the way. It is a rewarding and fulfilling experience to create the frontend for eCommerce PWA from scratch: from designing the site, planning out the architecture and components, being playful with frontend and putting it all together, to seeing it in action and admiring the final results. I hope that the product reflects all the fire and creativity that went into it.
The most interesting thing while working on Inchoo PWA was applying my previous knowledge in React and PWA to an eCommerce project. Progressive web applications are the way of the future and React gives a desirable level of flexibility and performance. Working on this project is fun and challenging at the same time.
How do I start with PWAs?
If you are a developer, make sure to hop on to Magento PWA Documentation. This will start you up and bring you up to speed with what’s happening around PWA Studio. And, more importantly, show you how you can join!
If you’re an agency, you can check some of our thoughts covered across several blog posts.
And if you are a merchant entertaining the thought of PWAs, but still haven’t decided on this approach, drop us a line to start the conversation. We will answer most of your questions (and if we don’t have all the answers, we’ll find them together)!