We are happy to share our Magento PWA demo with you! Created by our team based on PWA studio tools and practices. See the highlights and key features below and see the demo in action!
We used the PWA studio to create this demo, compared to the official demo concept, which is a more streamlined, precisely solution (with room for improvement). As a result, this showcase’s main goal is to show what can be achieved in both the UX and performance stability, when you create your own Magento PWA using PWA Studio.
And the possibilities are expanded only from here. We will be sure to add new features to this demo because we continue to work on PWA studio and 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!
If you’re already interested, you can check the demo in action here. Or you can visit our demo landing page with some more information on what you can expect.
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 Gurubhyo 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 Gurubhyo 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)!