PWA | Add To HomeScreen in 2 mins

What and Why PWA?

Harish
Oct 8 · 4 min read

Progressive — Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
Responsive — Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent — Enhanced with service workers to work offline or on low-quality networks.
App-like — Feels like an app, because the app shell model separates the application functionality from application content.
Fresh — Always up-to-date thanks to the service worker update process.
Safe — Served via HTTPS2 to prevent snooping and to ensure content hasn’t been tampered with.
Discoverable — This is identifiable as an “application” thanks to the W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable — Makes re-engagement easy through features like push notifications.
Installable — Allows users to add apps they find most useful to their home screen without the hassle of an app store.

Ok let’s get started

Manifest JSON

Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension’s functionality, such as background scripts, content scripts, and browser actions.

Add the Manifest file
<link rel="manifest" href="/manifest.json">

Key manifest properties

Name or short name
You must provide at least the short_name or name property. If both are provided, short_name is used on the user's home screen, launcher, or other places where space may be limited. name is used in the prompt

“name”: “PWA Demo App”,
“short_name”: “PWA Demo”

Theme color
The theme_color sets the color of the toolbar

“theme_color”: “#6154c8”

Display
The display property to tell how the UI need to look while launching the application

Manifest Json display properties
Manifest Json display properties

Note*: In order to show Add to HomeScreen Prompt and for the look and feel like a native app Use Standalone property

“display”: “standalone”

Background color
The background_color property is used on the splash screen when the application is first launched.

“background_color”: “#fff”

Description
The description property is used to give a quick description of our App

“description”: “PWA | Demo App”

Icons
The icons are which add to home screen it is the launcher logo for our application. When a user adds your site to their home screen, you can define a set of icons for the browser to use. These icons are used in places like the home screen, app launcher, task switcher, splash screen, etc.

icons is an array of image objects. Each object should include the src, a sizes property, and the type of image.

“icons”: [{
“src”: “./images/icons/pwa_75x75.png”,
“sizes”: “72x72”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_144x144.png”,
“sizes”: “144x144”,
“type”: “image/png”
},{
“src”: “./images/icons/pwa_192x192.png”,
“sizes”: “192x192”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_512x512.png”,
“sizes”: “512x512”,
“type”: “image/png”
}]

Note*: It is must to add icon 192x192 and 512x512 so that chrome automatically scale up the icon based on your device.
If you’d prefer to scale your own icons and adjust them for pixel-perfection, provide icons in increments of 48dp.

Start URL
The start_url tells the browser where your application should start when it is launched and prevents the app from starting on whatever page the user was on when they added your app to their home screen.

“start_url”: “/”

Orientation
We can tell the app to open in a specific orientation.

“orientation”: “landscape”

Note*: The change in orientation will cause the user experience. The application like games will open in default landscape orientation

That's it here your complete manifest JSON file

{
“name”: “PWA Demo App”,
“short_name”: “PWA Demo”,
“start_url”: “/”,
“theme_color”: “#6154c8”,
“display”: “standalone”,
“background_color”: “#fff”,
“description”: “PWA | Demo App”,
“icons”: [{
“src”: “./images/icons/pwa_72x72.png”,
“sizes”: “48x48”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_75x75.png”,
“sizes”: “72x72”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_96x96.png”,
“sizes”: “96x96”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_128x128.png”,
“sizes”: “128x128”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_144x144.png”,
“sizes”: “144x144”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_168x168.png”,
“sizes”: “168x168”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_192x192.png”,
“sizes”: “192x192”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_384x384.png”,
“sizes”: “384x384”,
“type”: “image/png”
}, {
“src”: “./images/icons/pwa_512x512.png”,
“sizes”: “512x512”,
“type”: “image/png”
}]
}

Add to Home Screen Prompt

PWA demo site and add to homescreen prompt
PWA demo site and add to homescreen prompt
Add to Home Screen Prompt
Add to Home Screen

Installed as an App

PWA installed as an App
PWA installed as an App

Splash Screen

PWA Splash Screen
PWA Splash Screen
Splash Screen

That’s it now our site will launch as a native one

Harish

Written by

Harish

Prolific, a full stack web developer with a passion for metrics and beating former "best-yets."

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade