Progressive web apps – the future default

Progressive web apps – the future default

Progressive Web Apps, or PWAs, have been around for some time, but only lately it has become a buzzword. Everyone is talking about it, but is it just a fad, or a future of the web?

What is a PWA?

Progressive web apps are a hybrid between web pages and native apps. The application type attempts to combine features offered by most modern browsers with the benefits of mobile experience. But underneath, PWA is still just a website. It can “become” an app if user wants to use it that way. So if user returns to the website, using supporting OS and browser, he will be prompted to add the website to the home screen. If he decides to do it, he can use the website as an app later on. If not, the website is still reachable through the browser, and still with most of the benefits that make PWA’s great.

Google’s definition of PWA:

  • Reliable – Load instantly and never show the downasaur, even in uncertain network conditions. aka: work offline.
  • Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • Engaging – Feel like a natural app on the device, with an immersive user experience.

Working offline, what kind of sorcery is that?

Service workers. They are the heart of every PWA. Service worker is a script that runs in the background, separate from the web page. It is responsible for caching, content updates, push notifications and makes it possible for the PWAs to work offline. Basically, service workers can intercept and handle network requests, serving assets from the cache if needed.

In most cases, PWAs will be single page app, and on the first load, the Application shell will be stored in the cache.

What is an Application shell?

Application shell is minimal HTML, CSS and JS needed to render the UI of your website. It should contain only UI elements, without any dynamic data. As it is stored in the cache on the first load, every subsequent time that user opens the app (or the website), UI will load immediately, making PWA fetch only dynamic data.

OK… How do I install the app?

You don’t. It is not actually an installation. There is an “Add To home screen“ feature, so users can add a shortcut to your website on their smartphone home screen. It looks and behaves like a native app. Once opened, it will load with the splash screen loader and without browser UI. To enable “Add to home screen” feature, your PWA will need app manifest.

App manifest?

Yes. Web app manifest is just a simple JSON file that gives you the ability to control how your app appears to the user in the areas that they would expect to see apps (for example the mobile home screen), direct what the user can launch and more importantly how they can launch it. This includes app name, various icons and sizes, splash screen background, etc.

PWAs don’t work on Apple devices, so it’s all useless?

Service workers and web app manifest don’t work in Safari at the moment, but are currently in development. That means that we’ll soon have PWAs in all their glory on all devices.

But until then, PWAs work just fine on your iPhones. Like any other regular website. Even better.

That’s all fine, but what about Magento?

Well, Magento is, in fact, working on their PWA studio. It should be released as a part of Magento 2.3. sometime later this year. It will be based on React and Redux.

In the meantime, there are couple of community efforts, such as Deity or Vue Storefront.

What about Inchoo and PWA?

We recognized PWAs as a future default, just as we did back in the days when Responsive Web Design emerged, and we are prepared for this (r)evolution. PWAs have been in our focus for some time now and that’s why we partnered with Deity in order to bring next generation web apps to the merchants who want to stand out from their competition. If you are thinking about running your online business as PWA, we’re at your service.

As a part of our efforts in leveling up our skills, Inchoo delegation will attend Reacticon, the first Magento conference completely dedicated to PWAs, so if you are attending too – get in touch!

Who’s Deity?

First time we heard about Deity was at Meet Magento Poland 2017 in Krakow where The Rake case study was presented. That presentation attracted a lot of interest and we started following the progress. When we got an invitation to become a partner, we didn’t hesitate too much.

We have a feeling that Deity project went farther than announced Magento PWA Studio. Who knows, perhaps Deity could actually become an official PWA Studio. We expect a lot of excitement in the next couple of months!

Update (June 2019)

After working with Deity for a while, Magento has officially rolled out its own PWA Studio, and we have actively contributed to its build-up. You can take a look at several blog posts on this topic by checking out our PWA category for more details. And make sure to see our own PWA demo in action!

If you’re looking at planning your own PWA project, contact us to get the conversation started!

Related Inchoo Services

You made it all the way down here so you must have enjoyed this post! You may also like:

Behind the scenes with one Magento PWA Studio contributor Aron Stanic
Aron Stanic, | 3

Behind the scenes with one Magento PWA Studio contributor

Magento PWA Studio: General Overview Adrian Bece
Adrian Bece, | 2

Magento PWA Studio: General Overview

Review: Reacticon – Power to the front-end developers! Adrian Bece
Adrian Bece, | 0

Review: Reacticon – Power to the front-end developers!

2 comments

  1. @Hrvoje Jurisic

    Nice Article, will PWAs be able to handle complex things like Product Customization( like T-shirt customization tool) l, Try on tool etc and pass data to Magento backend etc?

    What are your thoughts on above

    regards,
    Andrew

    1. I don’t see any reason why PWAs shouldn’t be able to handle that sort of things. But that will, in most cases, require custom Magento APIs.

      As mentioned in the article, PWAs are separate frontend aplications, so there is no limitation on what you can accomplish through them. Of course, you can’t expect that these kind of complex things work out of the box, you would still need to custom code backend functionality + APIs that would “talk” to frontend application.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.