Progressive Web Apps — 10 questions about eCommerce and Magento

Piotr Karwatka
The Vue Storefront Journal
4 min readJan 25, 2018

Piotr Karwatka, CTO at Divante, contributor at Vue Storefront is answering José Maria Beltramini questions about PWA

What about iOS compatibility?
iOS (all browsers), Safari and MS Edge does support PWA in their latest Developer Preview Editions. That means the mechanisms are going to be supported in next major release of the browser. It’s important to add here that all other browsers, especially these based on Webkit already support Service Workers and other PWA related mechanisms!

What happens if someone with iOS browses PWA?
The Website WILL WORK but will not take advantage of all the features of PWA — like offline support, push notifications or possibility to install the app on the home screen. PWA sites like Lancome are showing ~50% of session length increase on iOS. This is because even though it can’t take advantage of all features, the technologies and design principles involved per se optimize loading times and usability.

How can I recognize and benchmark a PWA solution?
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more https://developers.google.com/web/tools/lighthouse/

Is it necessary for the user to download anything before being able to use the PWA version?
No, from the user standpoint it is like browsing any website. Additionally, users can add the PWA site to their phone’s Home screen and after a quick download (~10 times smaller size compared to an app download) take advantage of app-like features (offline storage, listed in Apps installed list, Home screen icon, etc.)

How Your project — Vue Storefront — goes along with what Magento is doing around PWA?
We try to not compete with Magento — and what they are doing is set of tools and components to build the whole Magento theme with PWA support, all extensions supported, etc. It’s very sophisticated and will take quite long of the time.

We decided not to be limited by the performance of Magento API. By doing so, we were also able to get results fast and build tool which is easy and fast to customize.

I’ve discussed the matter with Alan Kent from Magento team and they told me that Magento is pursuing similar goals — like one of the community projects is focused on bringing (finally) the NoSQL support. So I would say we’re outpacing Magento in some parts :)

We decided to choose slightly different technologies (Vue vs. React for example) also to not compete but rather to offer a wider range of options developers can choose from.

Has been there any contact or interest from Magento on what’s being done with Vue StoreFront?
Yes, a lot. We’ve discussed the project with Andrew Levine, Eugene Tulika and others from Magento and had even demo session scheduled. Magento is very supportive here and we’re discussing the Magento Community Engineering support for the project right now

Then, we started the es-indexer, official Magento Community Engineering project to bring the ElasticSearch support for Magento natively (https://github.com/magento-engcom/es-indexer).

So I would say we’re mutually supporting: Magento and VS.

Vue Storefront. When is the expected date for a Beta version?
It’s already there! In fact, the latest version was marked as the first implementation ready. Right now we’re just finishing 0.4.0 which is planned to be released on 29th of January. Check/star our Github for some more news.

Shall I pay anyone for using this solution?
No. Vue Storefront can be downloaded, customized and used it under MIT License.

Is there any Roadmap on the features that V1 will include and what’s coming next?
The roadmap is available on Github. We’re open to needs of Agencies and developers. If something bothers you, or you’re just waiting for features XYZ to start your implementation: lets us know via Github or contributors@vuestorefront.io. The project is Open Source project; everyone involved; we’ll try to adjust our roadmap to your needs. This is how we work here.

Why Vue vs. React or Angular?
Vue is second-to-React on Github; so it’s extremely popular. It has pretty the same performance (it’s using virtual-dom as well), but still it’s much easier to learn. Speaking with many frontend devs, we discovered that especially in eCommerce the way Vue.js is very well perceived.

How difficult and what infrastructure do I need to use this solution for my eCommerce site with Magento 2?
Basically, you have to have access to some Node.js + Elastic Search + Redis environment to run the API + Frontend. It’s very resource-saving, so probably it can run on your existing Magento2 hosting without any additional hardware.

What are the ideas on how to overcome payments and stock synchronization challenges?
As for now the solutions are pretty straightforward:
when you’re offline, you have Cash on Delivery + payment links (link received after the order is in sync with the backend),
Stocks are synchronized for offline use but of course where there is no Internet access we cannot be sure. In that case, we inform the user that although we can send the order, the confirmation will be provided just after we confirm the stocks.

The core Vue Storefront team is going to visit Vuejs.Amsterdam conference! If you’re somewhere nearby just drop us an email to contributors@vuestorefront.io to meet us there and grab a coffee or beer!

ps. José works at Summa Solutions — official Vue Storefront partner from Argentina. If you’re familiar with Spanish — check out José’s video about PWAs from Meet Magento Argentina!

--

--