DEV Community

loading...

What should I prepare for installable Web Application

sadnessojisan profile image sadnessOjisan ・2 min read

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.

Screen Shot 2021-03-05 at 23.37.40

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.

{}
Enter fullscreen mode Exit fullscreen mode

and load this to HTML.

<link rel="manifest" href="manifest.json" />
Enter fullscreen mode Exit fullscreen mode

Then open the application. You will see this warning.

Screen Shot 2021-03-06 at 1.03.39

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/",
}
Enter fullscreen mode Exit fullscreen mode

Set Name

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone"
}
Enter fullscreen mode Exit fullscreen mode

Set display property.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone"
}
Enter fullscreen mode Exit fullscreen mode

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"
      },
   ]
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// @sw.js
self.addEventListener("fetch", function (event) {});
Enter fullscreen mode Exit fullscreen mode

And Deploy it...

Totally Get the App.

Screen Shot 2021-03-06 at 2.02.44

(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.

Discussion (0)

pic
Editor guide