Chrome, webdev

Progressive Web App?!

pwa 2016-02-24 at 10.00.27 AM

We have today on the web capabilities to create web apps that feel and act like a native application.
Yes – We do.
We can have offline first, push notification even when the browser is running in the background and add to home screen. These three features bring us to a point where we can give users our content and features with one click and with all the benefits of the web.
What is this new monster you ask?
Well, let’s try to describe it and give few examples.

Progressive Web Apps contain these characteristics:

  • Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet. On the green browsers below you can use service worker and have push notifications, and on all others, you should give features base on their capabilities.
    Screen Shot 2016-02-28 at 9.18.28 AM
  • Responsive – Fit any form factor: desktop, mobile, tablet and watch.
  • Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
  • App-like – Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
    Screen Shot 2016-02-28 at 1.48.13 PM
  • Fresh – Always up-to-date thanks to the service worker update process.
  • Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  • Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  • Re-engageable – Make re-engagement easy through features like push notifications.
  • Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  • Linkable – Easily share via URL and not require complex installation.

Two Examples (in the price of one)

Voice recorder

Screen Shot 2016-02-28 at 1.28.10 PM

Check the console to see how the service worker is progressively making sure we will have the offline capabilities.

Air horner

Screen Shot 2016-02-28 at 1.30.06 PM

Same here, once we learn that the browser support service worker, we register it and activating it. From now on, it will make sure our app shell is stored locally and we can run this wonderful web app even when we don’t have any internet connection.
Thank Mr. Kinlan not me.

If you want to see more, check this list of PWA.
Like slides?

Prefer to watch a good video the sum it up?
You can find one below.


Build something amazing.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s