JSFeeds: anago.io - Installing a Progressive Web App. Writing a Web App Manifest

Monday, 9 September, 2019 UTC

Installing a Progressive Web App. Writing a Web App Manifest

Summary

The JavaScript is present in mobile apps development for quite some time now. Tools like React Native and Cordova have been around for years. Another valuable tool that we can use are Progressive Web Apps, and in this article, we go through the process of installing them. We also take a look at the current state of integrating them with the Google Play store and the Apple App Store.

Putting things simply, PWA can be installed on your device straight from the browser. By doing so, we can integrate our application with, for example, a phone. This way, it can be launched straight from the home screen. It should also work offline, or with a flimsy network connection.

Our site has to meet specific requirements to deliver an experience similar to a native application. First thing in creating a PWA is to define a

manifest.json

file.

Web App Manifest

The web app manifest is a JSON file that provides information about our web application that are necessary for it to be installed on a device.

{
  "name": "Hello world!",
  "icons": [
    {
      "src": "/images/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone"
}

One of the required properties is the one that represents the name of our application. You can also provide the

short_name

that can come in handy in places with limited space.

We also need to define a set of icons. The browser is capable of scaling them to fit the device, but we at least need the images with 192×192 and 512×512 sizes.

The

start_url

defines the starting point of the installed application. You can, for example, mot your landing page and direct the user to your application.

By setting the

display

property, we can define how much of the original browser interface do we want to show:

the default value,
```
"browser"
```
leaves the full browser interface on
```
minimal-ui
```
strips most of the UI, leaving the navigation
```
standalone
```
excludes almost all of the UI elements but can include things like the status bar
```
fullscreen
```
takes advantage of all of the available display space and lets no elements of the browser to be shown

Although the above properties are the bare minimum, there are many others that you can specify. The

theme_color

is the one that can make a distinguishable difference because it sets the color of the toolbar.

You can verify your manifest in the Application tab in the Developer Tools.

Once we have the manifest ready, we need to link it in the head of our document.

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

For a full list of available Web App Manifest parameters, check out the documentation

Other PWA installation criteria

Another thing that we need to do so that the browser allows our PWA to be installed, is to register a service worker. It needs to listen to the fetch event.

If you want to know how to install service workers, check out The basics of Service Workers: how should our application behave when offline?

Since we need a service worker, we also need to serve the application using HTTPS.

Firefox does not require you to register a service worker for the installation to take place. For more information, check out the MDN docs

Prompting PWA installation

Once we meet all of the above criteria, we can prompt our users to install the PWA application on their device. To do this, we need to listen for the

beforeinstallprompt

event.

window.addEventListener('beforeinstallprompt', (event) => {
  event.prompt();
});

Once we click “install” the application gets registered on our device.

This is how it looks like on my Ubuntu machine

It might not be the best approach to prompt the user right away. The idea is not to distract him from what they are currently working on, for example, filling some form in the application. Fortunately, we can use the reference to the event and call the

prompt()

function later.

window.addEventListener('load', onLoad);

function onLoad() {
  const button = document.getElementById('installButton');
  window.addEventListener('beforeinstallprompt', (event) => beforeInstall(event, button));
}

function beforeInstall(event, button) {
  button.classList.remove('invisible');
  button.addEventListener('click', () => {
    event.prompt();
  });
}

The appinstalled event fires once the application installs successfully.

Google has a cool article by Peter Mclachlan on how to promote PWA installation from the UI/UX perspective. Check it out!

Google Play and the Apple App Store

Even though Progressive Web Apps were announced quite a few years ago, we had to wait quite a few years for them to take off. Chrome 72, released in 2019, ships a new feature called “Trusted Web Activities” that uses the Custom Tabs protocol. Putting it simply, TWA allows Chrome to run in a fullscreen mode inside of an app. Setting it up requires you to use Android Studio. Google has a detailed article on how to do it.

When it comes to Apple devices, they also can handle PWA installation through the browser. The issue is that they don’t allow them in the App Store. You might try using a native wrapper like Cordova.

Summary

PWA can be easily discoverable for your users – they just need to visit your website. They can also easily share it by just sending a link. When deciding if you want to go with the PWA approach, you need to take into account that native apps can be more integrated with the operating system. PWA is as useful as a website can be, and it is for you to decide if that is enough.

The post Installing a Progressive Web App. Writing a Web App Manifest appeared first on Marcin Wanago Blog - JavaScript, both frontend and backend.

... more @ anago.io

anago.io