Introduction to installable feature of PWA

This article will introduce PWA installable feature which makes web app looks like a native app.

What is a Progressive Web Apps

PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features

There are some key principles a web app should try to observe to be identified as a PWA. It should be:

Discoverable: so the contents can be found through search engines.
Installable: so it's available on the device's home screen
Linkable: so you can share it by simply sending a URL
Network independent: so it works offline or with a poor network connection
Progressive: so it's still usable on a basic level on old browsers, but fully-functional on the latest ones.
Re-engageable: so it's able to send notifications whenever there's new content available
Responsive, so it's usable on any device with a screen and a browser -- mobile phones, tablets, laptops, TVs, fridges, etc
Safe: so the connection between you an the app is secured against any third parties trying to get access to your sensitive data.

In this article, We just focus on the Installable feature.

Install a PWA web app

The demo web app is here: https://tsq-demo-app.github.io/coinmarket . It's a SPA and built with Vue.js.

We will use Chrome on Mac, Windows, Android and use Safari on iPhone.

Installation on Mac

mac

Installation on Windows

windows

Installation on iPhone

iPhone

Installation on android

android

How make a website installable

To make the website installable, it needs the following things in place:

A web manifest, with the correct fields filled in
The website to be served from a secure(HTTPS) domain
An icon to represent the app on the device

The key element is a web manifest file, which lists all the information about the website in a JSON.

We can create a file named manifest.json. It should be included in the <head> section of the index.html file via the following line of code:

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

The content of the file looks like this:

{
  "name": "COINMARKET",
  "short_name": "COINMARKET",
  "description": "An App that displays the mark cap rankings, price, details and more for the top 100 larget crytocurrencies based on overall market cap.",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#00d1b2"
}

let's break down the document and explain them in detail:

name: The full name of your webapp
short_name: Short name to be shown on the home screen
description: A sentence or two explaining what your app does
icons: A bunch of icon information, source URLs, sizes and types. Be sure to include at least a few, so that one that files best will be chosen for the user's device.
start_url: The index document to launch when starting the app
display: How the app is displayed: can be fullscreen, shandalone, minimal-ui, or browser
background_color: A color for background, used during install and on the splash screen
theme_color: A primary color for the UI, used by operating system

The bare minimum requirement for a web manifest is name and at least one icon (with src, size and type). The description, short_name and start_url and recommended.

Summary

Installable is a very cool feature which makes your website look like a native app. Even though, it's not supportted by all browsers now, I think it will become more and more popular in the future.

If you want to learn more about PWA, the MDN web docs is a good place.

CYDAS Developer's Blog

サイダス技術者ブログ