What should I prepare for installable Web Application

As you know, now we can create an installable web application as PWA. And I think you already know how to create it. "Write manifest.json". But sometimes I forget what is the correct configure. This post is for the problem.

SUMMARY: Just solve-all warnings in your developer tools.

All you should do is written there.

What is correct manifest.json

If you want to make an installable PWA, you must write a manifest.json. But I think you would already experience that although you write a manifest.json, the web application didn't become installable. The reason would be you wrote the wrong configure.

How can I write a correct manifest.json. The method is just obeying Developer Tools. If you write the wrong config, the Developer Tools teach me how to fix it.

My Real Workflow

From now I will change this Web app to Installable PWA. (Sorry, this app is written in Japanese, but the contents are not important. Don't worry.)

(merged PR is here)

Create from empty manifest file

Ok, let's prepare an empty config file.

{}

and load this to HTML.

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

Then open the application. You will see this warning.

The warning is ...

• Manifest start URL is not valid
• Manifest does not contain a name or short_name field
• Manifest display property must be one of standalone fullscreen or minimal-ui.
• Manifest doesn't contain a suitable icon -PNG, SVG or WebP format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include any or maskable.
• No matching service worker detected. You may need to reload patge, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
• No supplied icon is at least 144px square in PNG, SVG or WebP format

Let's configure

Set start URL

{
  "start_url": "https://birthstone.web.app/",
}

Set Name

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone"
}

Set display property.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone"
}

Set icon property and prepare image.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone",
  "icons": [
      {
        "src": "/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
   ]
}

Prepare service worker.

<!-- index.html -->
<script>
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("sw.js")
      .then(function (registration) {
        console.log("success load");
      })
      .catch(function (err) {
        console.log(err);
      });
   }
</script>

// @sw.js
self.addEventListener("fetch", function (event) {});

And Deploy it...

Totally Get the App.

(Sorry, this is Japanese. The meaning is "Please select install or not")

Summary

• Please check Developer Tools. All you should do is written in Application tab.
• Write a manifest.json, sw.js and load it to index.html.

Comments

[Tanya Gupta]

Is this working in wordpress website as well?