Slack is a web app. Trello is a web app. Google Docs. Gmail. Even Twitter.
The web started out as a collection of hyperlinked documents. The “Web 2.0” hype in the mid-2000s was about how the web was becoming interactive. At first we were just commenting and upvoting on hyperlinked documents, but before long, people like me could do almost all of their work in what are now called “web apps.” Some of those apps added collaboration or other nice-to-haves to traditional desktop app tasks, like email or document creation. Others are more hyperlinked-document in nature — think embeds on Slack and Twitter, or Trello’s multi-user nature.
But there’s one near-golden rule about web apps: the native app is probably better.
But the web platform continues to evolve, and there are a few upcoming web technologies that could give web apps a better chance at competing with their native counterparts.
Let’s talk about a few of them.
Progressive Web Apps
Microsoft made a big splash in February with its support for Progressive Web Apps on Windows. But did you know iOS quietly added support for PWAs to Safari in the 11.3 update? That means you can now make a Progressive Web App and ship it to Android, iOS, Chrome OS, and Windows.
So, what is a Progressive Web App?
Well, for starters, it’s just a website with a special “manifest” file that defines the name of the app, the icon for the home screen, and whether or not the app should show the typical browser UI or just take over the full screen. Users can add any website with a manifest file to their home screen or their Start menu and launch it like a regular mobile or desktop app.
Progressive Web Apps, importantly, can also support push notifications and other background work due to a new web technology called “service workers.” Service workers can help cache new content and synchronize local changes to a remote server, which keeps Progressive Web Apps as up-to-date as a typical website, while staying as responsive as a native app.
Right now the best example of a Progressive Web App is the Twitter Lite client. It’s fast, minimal, and even has a toggle so you can minimize data usage. Some online stores and publications have also taken advantage of the snappy performance of PWAs. I’ve actually been playing a minimal 2048 clone PWA on my iPhone for the last week. It works offline and remembers my high score between sessions. Sometimes it even saves the game state so I can resume a long run, but it’s not perfect.
Apple’s support for the Progressive Web App standards is scattered and far from complete. In fact, Apple seems to have a different vision than Google for how much a PWA should really be capable of. We’ll see how that vision evolves as PWAs become more ubiquitous and powerful on the platforms of Apple’s competitors.
What’s nice about WebAssembly is that you don’t have to learn a whole new programming language to use it. High performance code that’s already written in C and C++ can be compiled to WebAssembly. For instance, both Unity and Unreal Engine have been ported to WebAssembly. That means that you can play games in your browser window without worrying about installing a special plug-in.
Unlike many web technology proposals that languish for years stuck in standards committees, or only ever enjoy spotty or inconsistent support from various browsers, WebAssembly has been fully embraced by Google, Mozilla, Apple, and Microsoft, and is now shipping in every major browser if you don’t count Internet Explorer.
Pairing WebAssembly with Progressive Web Apps turns a boring old website into a viable contender for a spot on your home screen next to “real” apps built with native technologies, without sacrificing any of the advantages of being a boring old website.
To be honest, I don’t often hear people say “Yeah, but native apps look and feel better than websites,” but it sounds like something someone would say if I went to the right kind of parties.
I mean, sure, you can download a PWA that persists offline, gives you push notifications when they’re warranted, and performs just as well as a native app thanks to WebAssembly. But won’t it still just look and feel like a website?
Yes, it will. No matter how much work you do to mimic the aesthetic and animations of iOS or Android, your hands are tied by the basic limitations of HTML and CSS.
So, speaking of web technology proposals that languish for years stuck in standards committees… let me introduce you to Houdini.
Houdini refers to a set of new features that allow developers to talk more directly to a browser’s CSS rendering engine. Instead of merely defining a set of style rules and letting the browser handle it, a designer working with Houdini could create incredibly custom layouts, styles, and animations.
To help understand why this might be a powerful thing to have, take Google’s Flutter app development framework as an example. Flutter can simulate the look and feel of a native iOS or Android app, with supposed pixel-perfect accuracy, down to the correct scroll speeds. Flutter isn’t for making a website, though, it’s for making iOS, Android, and Fuchsia apps.
But under the hood, Fuchsia does all that pixel-perfect layout, styling, and animation with the Skia graphics library, which is the same engine that powers the Chrome browser’s rendering. When you make a website, you define the content in HTML and the style in CSS, but it’s a rendering engine like Skia that paints the actual pixels. You said, “make me a red box,” but Skia is in charge of exactly how.
That’s a big responsibility, but that responsibility gives you a lot of power. Thankfully, Houdini code will coexist just fine with traditional CSS layout and styling. It’s just an extra option when you need something to look and feel a very specific way.
It’s hard to tell if the Houdini proposals will ever advance deeply enough into the browser’s internals to mimic everything Flutter does with Skia. But it’s interesting that the browser vendors want to progress in that direction.
Unfortunately, right now most of the Houdini spec is still up in the air, and Chrome is the only browser you can test many of these ideas in. But if web apps are ever going to look and feel “native,” Houdini might be the path they take to get there.
But what about native APIs?
So, to recap:
- Progressive Web Apps give me an icon on my home screen, offline support, and push notifications.
- WebAssembly gives me native or near-native performance.
- Houdini, if it ever happens, gives me the fancy animations and drop shadows that I crave.
“But what about Feature X, my favorite new API from Android / iOS?” Well, you’re probably out of luck.
There will always be a role for native apps. A native iOS or Android app can take advantage of all the specific benefits the platform has to offer: Apple’s ARKit, Google’s Visual Core chip, native graphics APIs, and the multitude of other features that pile onto operating systems every year to keep them competitive. But for apps that value ubiquity and convenience over bleeding-edge functionality, it seems to me that web apps are only going to grow in number and importance on our home screens and desktops in the coming years.
It’s hard to predict which next-gen web apps will make the biggest impact. Right now, Twitter Lite is the golden example of Progressive Web Apps, and soon we’ll be seeing a ton of lightweight games built with WebAssembly (typically as ads), but what’s over the horizon?
One place to start looking: anything that seems useful as an app, but for whatever reason isn’t in the app stores.