Jason shared some thoughts on designing progressive web apps. One of the things he's pondering is how much you should try make your web-based offering look and feel like a native app.
This was prompted by an article by Owen Campbell-Moore over on Ev's blog called Designing Great UIs for Progressive Web Apps. He begins with this advice:
Start by forgetting everything you know about conventional web design, and instead imagine you’re actually designing a native app.
This makes me squirm. I mean, I'm all for borrowing good ideas from other media—native apps, TV, print—but I don't think that inspiration should mean imitation. For me, that always results in an interface that sits in a kind of uncanny valley of being almost—but not quite—like the thing it's imitating.
With that out of the way, most of the recommendations in Owen's article are sensible ideas about animation, input, and feedback. But then there's recommendation number eight: Provide an easy way to share content:
PWAs are often shown in a context where the current URL isn’t easily accessible, so it is important to ensure the user can easily share what they’re currently looking at. Implement a share button that allows users to copy the URL to the clipboard, or share it with popular social networks.
See, when a developer has to implement a feature that the browser should be providing, that seems like a bad code smell to me. This is a problem that Opera is solving (and Google says it is solving, while meanwhile penalising developers who expose the URL to end users).
Anyway, I think my squeamishness about all the advice to imitate native apps is because it feels like a cargo cult. There seems to be an inherent assumption that native is intrinsically "better" than the web, and that the only way that the web can "win" is to match native apps note for note. But that misses out on all the things that only the web can do—instant distribution, low-friction sharing, and the ability to link to any other resource on the web (and be linked to in turn). Turning our beautifully-networked nodes into standalone silos just because that's the way that native apps have to work feels like the cure that kills the patient.
If anything, my advice for building a progressive web app would be the exact opposite of Owen's: don't forget everything you've learned about web design. In my opinion, the term "progressive web app" can be read in order of priority:
- Progressive—build in a layered way so that anyone can access your content, regardless of what device or browser they're using, rewarding the more capable browsers with more features.
- Web—you're building for the web. Don't lose sight of that. URLs matter. Accessibility matters. Performance matters.
- App—sure, borrow what works from native apps if it makes sense for your situation.
Jason asks questions about how your progressive web app will behave when it's added to the home screen. How much do you match the platform? How do you manage going chromeless? And the big one: what do users expect?
Will people expect an experience that maps to native conventions? Or will they be more accepting of deviation because they came to the app via the web and have already seen it before installing it?
These are good questions and I share Jason's hunch:
My gut says that we can build great experiences without having to make it feel exactly like an iOS or Android app because people will have already experienced the Progressive Web App multiple times in the browser before they are asked to install it.
In all the messaging from Google about progressive web apps, there's a real feeling that the ability to install to—and launch from—the home screen is a real game changer. I'm not so sure that we should be betting the farm on that feature (the offline possibilities opened up by service workers feel like more of a game-changer to me).
People have been gleefully passing around the statistic that the average number of native apps installed per month is zero. So how exactly will we measure the success of progressive web apps against native apps …when the average number of progressive web apps installed per month is zero?
I like Android's add-to-home-screen algorithm (although it needs tweaking). It's a really nice carrot to reward the best websites with. But let's not carried away. I think that most people are not going to click that "add to home screen" prompt. Let's face it, we've trained people to ignore prompts like that. When someone is trying to find some information or complete a task, a prompt that pops up saying "sign up to our newsletter" or "download our native app" or "add to home screen" is a distraction to be dismissed. The fact that only the third example is initiated by the operating system, rather than the website, is irrelevant to the person using the website.
My hunch is that the majority of people will still interact with your progressive web app via a regular web browser view. If, then, only a minority of people are going to experience your site launched from the home screen in a native-like way, I don't think it makes sense to prioritise that use case.
The great thing about progressive web apps is that they are first and foremost websites. Literally everyone who interacts with your progressive web app is first going to do so the old-fashioned way, by following a link or typing in a URL. They may later add it to their home screen, but that's just a bonus. I think it's important to build progressive web apps accordingly—don't pretend that it's just like building a native app just because some people will be visiting via the home screen.
I'm worried that developers are going to think that progressive web apps are something that need to built from scratch; that you have to start with a blank slate and build something new in a completely new way. Now, there are some good examples of these kind of one-off progressive web apps—The Guardian's RioRun is nicely done. But I don't think that the majority of progressive web apps should fall into that category. There's nothing to stop you taking an existing website and transforming it step-by-step into a progressive web app:
- Switch over to HTTPS if you aren't already.
- Use a service worker, even if it's just to provide a custom offline page and cache some static assets.
- Make a manifest file to point to an icon and specify some colours.
See? Not exactly a paradigm shift in how you approach building for the web ...but those deceptively straightforward steps will really turbo-boost your site.
I'm really excited about progressive web apps ...but mostly for the "progressive" and "web" parts. Maybe I'll start calling them progressive web sites. Or progressive web thangs.
This was originally posted on my own site.
