google

Why build a Progressive Web Apps?

Featured1 Comment

Want to know what is Progressive Web Apps(PWA)? Take a look here!

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

Worthy of being on the home screen

Is an app worthy to present in our home screen?

We need following qualities to answer YES for this question.

  • Reliable
  • Fast
  • Engaging

When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web App to their home screen.

Actually, we use service workers to trigger installable shortcut based on our needs. Lets say, we are targeting only the mobile based users to install our PWA in their devices. We can detect the device based on browser and then we can prompt the user to install PWA apps.

Work reliably, no matter the network conditions

We have to handle various network conditions in PWA to meet the reliability.

The various connection modes are

  • Perfect
  • Slow
  • Lie-Fi
  • Offline

Increased Engagement

Web push notification helping a lot to provide the feel of native apps to keep the user engaged. And keeping the user more engaged once they visited the PWA application.

Improved conversions

The ability to deliver amazing experience without any distraction. Once the user started to use the application in dedicated window, it feels like native apps and there is less chance to jump to between other application similar to switching tabs in browser.

Lighthouse

Lighthouse, an open-source, automated tool for improving the quality of your Progressive Web Apps, eliminates much of the manual testing that was previously required. You can even use Lighthouse in continuous integration systems to catch regressions.

PWA Checklist

Lighthouse provides an chrome extension which provide helpful checklist that can be used to track of features of PWA.

Advantage of PWA over Native Apps

In the native application, the upgrade process is tedious or complex based on structure.

We need think of migration and data integrity, and we don’t have control at certain extent.

But in a PWA, we have control to all updates or upgrades to application. We can provide wide range of security fixes, bug fixes without any hesitation.

When we have SaaS platform application, PWA is the right combination of website with native application feel. User won’t have to worry about the upgrade scenarios. The developers will take of everything.

Popular Realtime Progressive Web Apps

There are plenty of popular websites converted their website into PWA to engaged more with their audience.

Dev.to

Dev.to is blogging or social forum where programmers share ideas and help each other grow.

They are displaying following canvas to users whenever the internet goes down. The user can paint in the meantime when the internet is trying to reconnect.

This has been achieved with the power of Progressive Web Apps.

Spotify

The popular music giant application which has large number of user base.

With all these things going on, it looked like Spotify was unable to resist the temptation and joined the race with their own version of Spotify PWA, despite having their own desktop app.

Your background colors are now adaptable to your needs as you progress through the PWA, making your experience more personalized and unique—as a music player should be.

Ola cabs

In the competitive ola cabs did the trick and leads the market over Uber by using PWA.

During installation time native apps (Apps from play store or Apple store), you can just open Ola cabs PWA and book your ride within.

You can save your mobile data and works well in unstable 3G network as well.

Sounds like a master plan.

Swiggy

Swiggy is an online food ordering app. It leads the market over Zomato by having adaptive screen in mobile devices.

Even though you have poor mobile network, the PWA works out of box and serves you the perfect needs of the user.

Can you spot difference between native app and Progressive Web App?


And lazy loading and service workers helps the website to load only required content instead downloading whole assets files.

Even though Swiggy and Zomato is popular in India. User feels Zomato is providing more offers than Swiggy.

Because they didn’t proper user engagement and mobile app user retention.

That’s the place Zomato losing the market with Swiggy (Based on my personal experience, I’m mentioning these point; not to offend anyone)

As a user of 2+ years in both apps, I prefer PWA app whenever I needed.

Pinterest

Pinterest – Infinite scrolling – never ending image social media

The design of this application itself makes the application user to stay for long time.

You would feel the difference between native app and web app (and also PWA)

Twitter

The popular social media which lets the people to write shorter and makes PWA to use the mobile data also shorter.

The following figure shows the application of Twitter client in various medium.

Take Away

We have seen various aspects of Progressive Web Apps. And the popular web application which uses the power of PWA to engage more with the user base. Do you think its worth to give a try and convert your web application into PWA?

Leave your replies in comment section below.

In the next blog, we can see the approaches to turn the Web Application into Progressive Web Apps (PWA).

Related Post

Why Progressive Web Apps is next big thing?

Progressive Web Apps – Web App Manifest

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

Advertisement

Progressive Web Apps – Web App Manifest

Pandiyan Murugan2 Comments

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!