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!

Keep yourself updated

 

This is just random post to discuss about how we can keep ourselves updated.

What does it mean when we mention being updated? Is that similar to software updates in laptop or app updates in mobile devices.

Yes, exactly same.

We are receiving various updates in our devices and gadgets in daily basis to provide better solution to match the real world.

Why should you have to keep yourself updated in the world of technology?

Similarly, we have to keep our skills updated when it comes to working with technology.

For example, you are working on a particular project which uses a UI framework / programming language. You have to be aware of the next big thing happening in the particular programming language.

  • What are all the latest features available in past release?
  • What the new thing are there in the queue in the release cycle?
  • How the world reacting to the things happening?
  • What tech news/blogs talking about particular tools or technologies?

 

All these question are just a starter level question occurred in my mind when I started learning technology.

How can you keep yourself updated?

We can subscribe to learning websites like Pluralsight or Safari. If we feel those costly, we can just start with free channels in YouTube which provides better of what we need.

Books is the one of major resource when it comes to learning (for me). In the modern world, we started getting more information via blogs or video tutorials for learning. Few more ways to retrieve the information from internet

  • Subscribe to newsletters of official documentation
  • Follow social media updates of the techie people who are actually working certain technologies
  • Bloggers – You can always find some bloggers who keep on writing about technologies, so become a reader of those blogs
  • Micro blogging – Nowadays people started writing tech related stuffs in Twitter itself. Twitter became the micro blog for tech writers.

Why should contribute to the developer community?

The developer community is very huge. Whenever we are in the need of some information. Most of the time, we are getting the solution from the internet. The small contribution from the N number of developers builds this whole big community.

Its each and individual developers responsibility to keep this community alive and take it to next level.

How can you contribute to the developer community?

It can be anything,

  • Discussing with people in various forums like Stackoverflow
  • Writing a blog which will provide particular solution for problems.
  • Micro-Blogging – Participating in various Twitter based developer like #CodeNewbie, #DevDiscuss
  • Github – Find some interesting open source project repos and start contributing without conflicting existing rules

 

There is large space in comment section left to fill up by you. Make a comment about your thoughts and feedback.

#HappyReading