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?

Chrome DevTools: not just for Developers

First question: what browser do you normally use when surfing the web?

If you said Internet Explorer you can close this tab right now, shutdown your computer and cry in shame.

Jokes aside, you’ll get the best possible web experience using Firefox or Chrome, period.

I’m a Chrome fan myself but it’s well known it sometimes drains battery life or uses too much RAM/CPU. In its defense they’re working very hard every version to fix this major issues. Furthermore, in the latest Chrome 45 the memory consumption has been reduced by an average 10%.

I use Google Chrome on a daily basis to render my HTML slices and debug any web page, it is my first choice. Why? The Chrome DevTools.

All hail the Chrome DevTools

Chrome’s built-in authoring and debugging tool.

If you’re a developer you already know what I’m talking about. If you’re a power user you might have heard about it or even seen it.

Basically it’s a tool that allows us to do magic inside our browser. We can see the source code, see how long takes to load a page, what scripts is it using… It has a lot of goodies. Honestly, there’s options I’ve barely used or never seen.

I would like to do a quick introduction to some of the tools I use when working on projects to speed up development. Some of this tips can be used even if you’re not a developer. A Delivery or Project Manager can make use of them to do their jobs.

Emulate Mobile or Tablet

On of the things you might want to do is see how a website is displayed on a mobile device. If you don’t have a real device with you, you can use the DevTools Device Mode.

If comes with a set of predefined devices that not only will resize the screen to the device size but will also change the User Agent to actually trick the site into thinking you’re using the real device.

Even more, you can also emulate how a website would load on a 3G or 4G network.

Live change any HTML

You might want to try a different heading text real quick without having to log in to your CMS and actually doing the changes.

Use the DevTools to do the changes live:

devtools-live-html-edit

Pick any color

Long gone are the days when we had to use a browser extension or Photoshop to pick colors from a website.

The DevTools will help you identify and change element colors with ease. Apply live changes to the site without exiting your browser.

Just select an element with a color, click on the color box and hover anywhere:

Hover or Focus states

Some CSS effects are only visible when we hover our mouse or click on an element. For instance a menu or a dropdown.

With the DevTools you can select an element, go to the pin and mark the “hover” state, it will simulate a mouse hover for you.

Page size by type

Speed and page size matters. Now more than ever with everybody browsing through a mobile device.
It’s a good selling point and practise to check your website footprint.

To do that open the DevTools, go to Network, make sure the Filters are turned on and then filter by type.
You can see how much Kb’s of CSS, JavaScript or images, among others, is your site loading.

network-filter-types-2

Unminify the Minified

A little extra for the developers out there who might not know this trick.

Open the DevTools, click on a the CSS or JavaScript and then look for the {} icon on the bottom left. It will unminify the content for you.

Your thoughts

Have you already used the DevTools before? Will you use it from now on?