init
« Back to Blog
Development

The Web is Finally Ready for "Progressive Web Apps"

by Matteo Cargnelutti | May 30, 2018 | [[ readEstimate ]] min read

PWA: three letters that have been on every web enthusiast’s lips for more than a year now. Often presented as a web application revolution, the advent of Progressive Web Apps is more like a long-awaited harvest; developers, users and tech companies sow the seeds of the web as an almighty platform by tearing down long established boundaries between desktop and mobile, web and native, online and offline. 

What is a Progressive Web App?

The term “Progressive Web App” has been recently adopted by the tech industry to designate a web application (a software that lives within a web browser) that matches a number of criteria. While the precise meaning of “Progressive” can be interpreted in various ways (depending on where the person explaining it sits within the tech-savviness spectrum), the key characteristics of what makes a web app “Progressive”  are now easier to understand.

Mozilla and Google both offer very comprehensive lists of criteria and advices - but instead of going through a list, let’s take an example:

The Web is Finally Ready for "Progressive Web Apps"- Lyft

Lyft released a PWA in 2016. Accessible in a browser via a simple url and indifferent to being opened on a computer or smartphone, it offers the same features as its “native” app counterpart found in the Apple app store or Google Play, including notifications and offline access. 

Their PWA provides instant access to their service, powered by web technologies, with no installation required. In short, it provides a better user experience at a fraction of the cost and time that would have been required to build iOS and Android native apps on top of their web version.

These are PWA in a nutshell: advanced, seamless, easily accessible and fast applications in the browser. But the road to PWA acceptance has been long and uncertain...

How Did We Get Here?

The endeavor of pushing the limits of what is possible within a web browser is as old as the web itself. Over the years, we have seen many attempts to bring the capabilities of a “real” application to the web, sometimes with success, but mostly not.

It started with stone-age DHTML, relying on proprietary implementations of JavaScript, followed by bloated Java Applets and unsafe Active X for Internet Explorer, before Adobe (then Macromedia) Flash became for a solid 10 years - the way to go for everything interactive in a browser. But nobody was really satisfied with this solution as users had to have a plugin installed (which was prone to security flaws) and content editors had to pay a fee to use Adobe’s proprietary technology.

So much content had been built using Flash that it disappearance seemed unlikely, despite growing frustrations and the fast evolution of the web standards. It seemed "too big to fail". That only remained true until the advent of the iPhone, and of smartphones in general, nailed the coffin for Flash and helped HTML5, CSS3 and JavaScript ES5 (open web standards with then brand new capabilities) emerge. While people blood was boiling when not able to view Flash videos through their devices’ browser, the HTML5 video API was ready to take off and Google’s revolutionary JavaScript V8 engine was stirring.

Warning! Understatement ahead! The smartphone revolution deeply transformed the way people use the web. The ever-growing traffic from mobile forced everyone to adapt and offer the best possible experience for mobile users. Since Flash wasn’t compatible, it disappeared in the process.

Another breakthrough that made PWAs possible is directly related with how the process of building web standards has changed. Before the HTML5 era, every standard was engraved in rock, leading to various anachronisms between a standard built for early 2000 websites and actual use cases that weren’t anticipated. Nowadays, HTML, CSS, JavaScript and the Web API are continually evolving standards; their specifications adapt to the reality of the web today, instead of catching up years later with what the new web browsers implemented. As such, browser evolution went from an horizontal mode (where one copied the other’s new proprietary feature by making its own), to a vertical one (where every browser tries to come up with the best - or fastest - implementation of a standard feature everyone agrees on beforehand).

On top of this, there is also the fact that most browsers now automatically update and work together to release new standard features around the same time. This allows for little miracles like the implementation of the CSS Grid specification across every major browser within a three month period (another blog on this soon!). As a consequence, offering a richer user experience, regardless of the browser they use, has never been easier.

Throughout the process of adopting PWA, gigantic leaps in progress has been made in closing the gap between desktop and mobile, web and native, performance-wise and feature-wise. A decade ago, who would have thought it would be possible to trigger notifications from the browser, or access your webcam without using a plugin?

Finally, the way we develop for the web has changed a lot. New capabilities and new use cases has equaled new tools. The advent of JavaScript frameworks such as jQuery, AngularJS, and now, ReactJS makes it easier to develop heavy live applications in the browser, and is the another phenomenon that helped PWAs come of age.

The Next Big Thing: Web Assembly

Not quite as ready as the rest, Web Assembly will be the cherry on top of the sundae. In short, it is a standardized binary format for the web which allows for never-before-seen performance levels in the browser.

It allows system-oriented programming languages to use the browser as a compilation target. As a result, the browser can now use pre-compiled code for specific tasks instead of relying solely on JavaScript, allowing for extremely fast execution times for CPU-intensive tasks such as video editing. This allowed AutoDesk to release a PWA version of AUTOCAD in March 2018.

With Web Assembly, PWAs are about to be able to compete with native applications on performance and heavy computational tasks.

Possible Caveats

While all these new features and possibilities are exciting, we must not forget that a web app is still a web page. So, it must respect its rules, philosophy and occasional constraints such as security, bandwidth and device limitations, the need for accessibility, or even search engine optimization needs.

The web is for everyone, but everyone does not have the latest device or fastest internet connection, and so not everyone has equal access visual content. We must not leave anyone behind, and that is really what “Progressive” stands for - harvesting the latest in web technologies so as many people as possible can use our products.

We're Ready

The web is now ready to become the main platform for, well, most things: reliable, resilient, widely-available, and capable of almost anything.

We are ready and up to the challenge! We love the web and web standards, and have followed its evolution throughout the years building many different web products - from hand-crafted, custom websites to fully-fledged web applications.

With our experience in JavaScript, and now, React JS, we are ready and excited to embrace the age of PWAs and tackle all the challenges it throws our way.