Why Progressive Web Apps is next big thing

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. These apps meet certain requirements, are deployed to servers, accessible through URLs, and indexed by search engines.

Progressive Web Apps are user experiences that have the reach of the web, and are:

  • Reliable
  • Fast
  • Engaging

Lets discuss the basic first.

Apps

Technically, apps got two categories

  • Native Apps
  • Web Apps

Native Apps are the apps which we used to download from play store or apple store or windows store. Native Apps are the apps which have developed to do operation of particular company or product.

Web Apps are the apps which we browse using the browser. Basically its a website, we browse and use it based on our needs.

PWA or Progressive Web Apps fills the gap between these techniques to provide more accessibility to end user and make engaging withing the product.

Target Audience

The world is moving towards portable devices. If we are building a application which basically serves via web browser, that can be build as PWA.

The above shows the Global User (Millions) of Internet. And we can clearly see the rise of mobile users drastically.

If we want to stay in the market, we need to support the latest technologies and adapt the same thing in our product.

PWA – FIRE

A Web Application should meet the FIRE to become Progressive Web Apps. And the FIRE is

  • F – Fast
  • I – Integrated
  • R – Reliable
  • E – Engaging

Fast

  • Respond quickly to user interactions with silky smooth animations and no janky scrolling.
  • So how fast a web app should load a page?
    • ~ < 3 seconds
  • 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no janky scrolling or slow-to-respond interfaces.

Bounce rate is 20% if your website takes more than 3.3 seconds to load.

And if your website takes more than 9.9 secs, the user have already started to leave your site.

Now, tell me how fast the websites we are developing/developed is loading?

Integrated Experience

Airhorner (https://airhorner.com/) is my favorite website which i used to show in demo whenever I go to public talks about PWA.

Any PWA should be really integrated in any platforms. Once it developed well adapted and integrated, the application will open in the dedicated window and let end users stays within the application without any distraction.

The integrated experience can be achieved with the help of Manifest. We already discussed about this earlier.

Reliable

Load instantly and never show the downasaur, even in uncertain network conditions.
When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.

Connection mode

Basically, we have following connection mode in Application

  • Perfect
  • Slow
  • Lie-fi
  • Offline

Perfect

When you are Perfect connection, everything happens as expected and you don’t have to worry about anything.

Slow

Slow is the one of the connection mode which suffers the user a lot. Everything will happen but not at the right time.

Lie-Fi

Lie-Fi is the connection mode which we usually experience in travel mode. There will be lots fluctuation in the connection type. Suddenly it goes to high and suddenly it goes very low.

Offline

When we are offline, we go mad.

A successful PWA should handle all kind of connection mode and keep the users engaged.

A user should get notified whenever connection is slow or unstable.

Engaging

A PWA should Feel like a natural app on the device, with an immersive user experience.

Progressive Web Apps are installable and live on the user’s home screen, without the need for an app store.

They offer an immersive full screen experience with help from a web app manifest file and can even re-engage users with web push notifications.

The Web App Manifest allows you to control how your app appears and how it’s launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.

Why build a Progressive Web App?

Building a high-quality Progressive Web App has incredible benefits, making it easy to delight your users, grow engagement and increase conversions.

  • Worthy of being on the home screen
  • Work reliably, no matter the network conditions
  • Increased engagement
  • Improved conversions

PWA of Twitter is just 0.6 MB.

What’s Next?

Approaches to making an web app into PWA

  • Offline first
  • Service workers
  • Indexed db and caching
  • Web App Manifest
  • Push notifications

We will discuss about these things in detail in upcoming posts.

Further Reading

Why build a Progressive Web Apps?

Progressive Web Apps – Web App Manifest

To get latest updates you can follow or subscribe! #peace

Progressive Web Apps – Web App Manifest

The web app manifest is a simple JSON file that gives you, the developer, the ability to control how your app appears to users in areas where they would normally see apps in mobile devices.

Screenshot_20180821-000049

 

Web app manifests are part of a collection of web technologies called progressive web apps, which are websites that can be installed to a device’s homescreen without an app store, along with other capabilities like working offline and receiving push notifications.

And, more importantly, how it behaves when it’s launched from the home screen.

Installs to the homescreen

When a user clicks “Add to homescreen”, they will see the app being added on the homescreen.

At a minimum, the manifest must contain the name of the app and a short_name.

The short_name is used on the home screen and in other places where there is limited space.

It also needs the start_url, the URL the app should open when launched from the home screen.

Defining the manifest metadata

{
"short_name": "Pandiyan",
"name": "Pandiyan Murugan",
"icons": [{
"src": "/img/portrait_small.jpg",
"type": "image/jpg",
"sizes": "192x192"
},
{
"src": "/img/portrait.jpg",
"type": "image/jpg",
"sizes": "512x512"
}
],
"start_url": "/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6"
}

Make sure, the page you specify is cached as part of the app shell. Otherwise, you won’t get the benefits of a cached app shell and your app won’t work offline.

One quick tip.

To track the number of users who are launching your app from their home screen, you can add a query string to the end of your URL.

And use any analytics to track launches, with that query string.

But don’t forget to ensure that you’ve cached the URL with the query string, in your service worker.

Adding icons and Splash screen color

Finally, we need to provide a set of icons for things like the home screen icon and the tab switcher, and splash screen.

The icons parameter takes an array of icons and must include the source, the size of the icon, and the type.

For example, image/jpg.

I recommend providing eight icon sizes,

48 x 48, 96 bx 96, 128 bx 128, 144 x 144,

192 x 192, 256 x 256, 384 x 384 and 512 x 512.

Just make sure you have icons for 1x, 2x, 3x and 4x devices.

Chrome uses the 48 device independent pixel icons for the home screen icon and the tabs footer. And the 128 device pixel icons for the splash screen.

Those are the minimum requirements. But there are a few other helpful things that you should set in the manifest.

The background color, and theme color are used by the browser along with an icon, as part of the splash screen.

Shown the instant the web app is launched, until its first render. As we provide the splash screen color as blue in manifest. The splash screen, icon and short name is displayed while the browser is rendering the application. (http://pandiyan.cool)

Once the app is loaded, the theme color tells the browser, what color to display in the UI elements such as the address bar or the notification tray.

Display and orientation property give you control over how the app is displayed. For example, you can hide the address bar and the back and forward buttons, by setting “display”: “standalone”. Or if you’re building a game that works better in landscape, you can force landscape view by specifying, “orientation”: “landscape”.

Web apps will launch full-screen with no vestiges of a browser. The URL will not be present, nor will traditional browser actions such as bookmarking and navigation controls.

Linking the manifest

When you have created the manifest add a link tag to all the pages that encompass your web app:

<link rel="manifest" href="/manifest.json">

Manifest metadata in browser

To confirm whether the manifest is properly, we can use the chrome DevTools to view the manifest as below

(Switch to Application tab in the Chrome Dev Tools)

manifest

Happy Coding!