Killing the natives apps, for good

I know it’s a bold statement but let me show you what I’m talking about, you’ll be amazed.

Developers call them Progressive Web App because:

  • Progressive: It should work for every user, regardless of browser choice (we’ll see about that). The idea should be that all browsers will catch up, eventually.
  • Responsive: Hello? 2016 is calling. Although it’s a must nowadays some customers still don’t get it.
  • Connectivity independent: Offline websites? You got it.
  • App-like: the user will have the same feeling as in a native app.
  • Safe: HTTPS only.
  • Discoverable: Search engines will know this are webapps, we’ll make sure of that by using a valid W3C manifest.
  • Push Notifications: that’s right, this is killer.
  • Installable: The user will be able to “install” this on their homescreen via a browser UI, they’ll launch it like a native app.
  • Linkable: just share the webapp URL and you’re done. No more searching inside App stores.

Don’t want to read? Watch this instead

This 30 minutes video will dive into Progressive Web Apps, check it out if you prefer to hear if from Google Developers.

First of all, Add To Home Screen

Chrome has a built-in UI for adding your webapp to the homescreen of your device (in the example below, an Android phone). It’s great because a consistent UI for this action will be more friendly to users.

More on the criteria to enable it here. (HTTPS, manifest…)

add-to-home-screen

 

Theme Color

Very easy, great impact. Everybody (including myself for newer projects) are adding a simple meta value to change the browser color.

More information on Theme Color here.

theme-color

Launch Style

Need your webapp to be fullwidth? Like a native app? No problemo amigo.

More information on Launch Style.

manifest-display-options

Splash Screen

This is actually pretty awesome. You can create a “loading” screen that will show immediately. User Experience (UX) couldn’t be more awesome, for being a website!

More information on Splash Screen.

On the example below you can see a solid background color. In fact, you can also show a centered icon and the web app name under it (set by the web app manifest file).

background-color

Push Notifications

I had some doubts myself about this. Here’s some clarifications I’ve found:

The service works even if an app or extension isn’t currently running. For example, calendar updates could be pushed to users even when their calendar app isn’t open.

From Google CloudMessaging.

Because I’m skeptical I’ve run a little test:

  • Opened in Chrome on my Android phone: https://simple-push-demo.appspot.com/
  • Accepted to receive push notifications.
  • Closed Chrome, meaning shutting down the application.
  • Running the provided command from my computer terminal to trigger the push notification.

Awesomeness happened. Chrome showed a notification to my Android, even without being open or running.

As you can imagine, we depend on the browser adaption of Service Workers. In Android, for instance, only Chrome, Firefox (44) and Opera have support.
Next time someone tells you Safari or Microsoft Edge are “modern” browsers punch them in the face.

Blame also Apple’s iOS (iPhone), at the time of this writing Chrome for iOS does not have the freedom to use Service Workers. So, it’s the phone operating system that prevents us from moving forward. No surprise there knowing how many millions of dollars Apples makes from its App Store.

service-workers

Conclusion?

At this point I hope I’ve awaken a feeling of curiosity for progressive web apps. I feel like the web is the future of mobile. Not just me but big names such as Google. Native web apps are a pain in the butt, why would you need to learn other languages and technologies to build for Android, Apple, Windows Phones…?

If you already know how to build websites, the learning curve should be way shorter than learning how to code for iOS, for instance.

Eliminating the friction between the user and the service you provide is key for better engagement. One website to rule them all, no matter in what platform or screen size your user is in. No more getting out of space in your phone due heavy apps.

The web, and the future of it, is fascinating!

Want even more?