How you can develop Progressive Web Apps that feel native

How you can develop Progressive Web Apps that feel native
0.0 0

#1

Written by Samuele Dassatti.

I’m currently developing a Progressive Web App that will also serve as the native app of my next service.

As many of you know, PWAs are apps that can run in the browser or in a standalone window and can take advantage of features native to the OS, such as push notifications and the ability to work offline.

They’ve recently gotten a lot of media coverage because they’re the best option for developers who want to reach many different platforms. Just think of an app that needs to work both on mobile and desktop devices that requires native features. Its developers would be forced to develop four apps: one for Android, one for iOS, one for Windows, and one for macOS.

Now, thanks to the fact that Google and Microsoft (and hopefully Apple in the not too distant future) are embracing this new set of web technologies, developers are able to add a native touch to their web apps. And this requires only minimal tweaks to ensure the best experience on any system.

The problem with this new software paradigm is that many developers are failing to give a native feel to their apps. I’m not talking about missing native features or bad performance. Rather, I mean the lack of polish that is needed in certain aspects of an app to make it feel native.

In this article I will try to explain what are the little touches that can transform your PWA.

Keep in mind that this article will not focus on the practical side of implementing these solutions (that is coding) but rather on the theoretical aspects.

Disable pinch-to-zoom

Many Progressive Web Apps (for example Twitter) allow their users to freely zoom in by pinching. The main problem of this approach is that, by doing so, some parts of the UI inevitably wind up out of the view. Furthermore, most of the native apps do not allow pinch-to-zoom outside limited areas (such as pictures or maps), and this makes PWAs look not that native by comparison.

Because of these downsides, I would suggest disabling this feature. At this point, you might argue that it is handy to have this ability in text-based web apps. But in my opinion, two buttons to increase or decrease the font size work far better.

Make interactive elements not selectable

No native app lets you select with the mouse cursor the interactive elements of its interface. Meanwhile, almost every web app is completely (or for the most part) selectable. This has the effect of making the web page look more like a document and less like a full-fledged interface.

Since a page can be made not selectable with literally six lines of CSS code (see the snippet below), I cannot see why it is not more common. Still, I think that every developer should think about this while developing a PWA.

div {
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}

Reactive programming

You have probably heard about React and Angular. These JavaScript-based programming languages allow the page to be refreshed instantly as soon as some of its data is updated. Thus, not only is there no need to refresh the page repeatedly to have access to the latest set of data (which is quite common as you might have noticed), but also the app feels much more responsive since it does not refresh when changing the page (just like in a native app).

Of course, React and Angular are suited for dynamic content. So if your app is mostly static, feel free to choose any other technology and your PWA will look just as good.

If needed, override the right-click menu

If you need to provide your users with a context menu, do not shy away from overriding the default right-click behavior.

For starters, having the browser’s context menu pop up every time you right click does not feel very native. Also, sometimes it can be difficult to allow the users to do everything with just one mouse button, considering how far the complexity of web apps has come.

Google’s web apps (Docs in the picture) often feature a custom context menu

If you have been coding web apps for a long time (or at least since before progressive web apps became widespread), you have probably frowned at the title. Some years ago, it was considered bad practice, since no user expected web apps to have custom context menus.

Instead, nowadays it is much more common. Just think about Gmail and Google’s other web apps. So don’t fear adding a custom context menu to your website if it’s needed.

That said, I consider this to be a bad practice when the right-click does not have a predicable behavior (that is, it does not open a context menu or something that resembles it) — so be careful.

Set a home screen icon for every platform

One of the most important features of Progressive Web Apps is the ability for users to pin the apps to their home screens. This means that, since every OS has a different interface, every one of them needs its own icon. I would suggest using PWA Builder to download the necessary icon for every system.

If you want to, I would also encourage you to slightly change the icon to better match the style of each platform, as long as it does not become unrecognizable. For example, you could add a diagonal shadow in the Android icon.

And do not forget to choose a theme color for you app, so that the browsers that support this feature can change their color to match the main one of your app.

Conclusion

As you may have seen, many of these guidelines are meant to change normal browser behavior. This can be scary considering how users are used to it. But don’t worry — with PWAs spreading this fast, I can assure you these practices will become the new normal very quickly.


How you can develop Progressive Web Apps that feel native was originally published in freeCodeCamp on Medium.