Multilanguage manifest.json for PWA

This is my 12th write up on dev.to site. I have a solution for manifest.json for multilanguage PWA app without server side actions.

PWA, manifest.json

PWA applications are web pages that can be installed onto devices such as mobile phones or tablets. A PWA includes a manifest.json file, which contains essential information necessary for successful installation on an operating system (e.g., Android, iOS). Some items are mandatory, while others are optional. A good source of information is https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json

In recent days, I have been working on an application that is localized into seven languages (English, Czech, and others). The application includes automatic detection of the device's language and also provides an option to change the language version manually. However, the problem arises with the manifest.json file, as it does not support language versions.

One solution is to use language detection reported by browser on the server side to dynamically generate or inject the manifest.json into the HTML page according to the language. My solution is intended for static hosting and does not require server-side functions.

I have utilized the ideas and methods described in this article: https://blog.omaralshaker.com/2018/01/16/how-to-setup-your-web-app-manifest-dynamically-using-javascript/

For each of the languages supported in my application, I have created a separate manifest.json file. The individual language versions differ only in the "name" and "short_name" keys and the prefix in the file name, for example, en-manifest.json, cs-manifest.json, etc.

Part of the HTML code in the page header includes <link rel="manifest" id="manifest-placeholder"> without the href attribute. After the application code loads, the JS code is executed, which includes the detection of the device's language. The language code is stored in the variable language, and based on its value, the URL for the desired manifest.json file is set in the href attribute.

Here is the JS code that accomplishes this.

var manifestUrl = "";

if (language == "cs"){
  manifestUrl = "/cs-manifest.json"
};

if (language == "sk"){
  manifestUrl = "/sk-manifest.json"
};

if (language == "pl"){
  manifestUrl = "/pl-manifest.json"
};

if (language == "de")
  manifestUrl = "/de-manifest.json"
};

if (language == "sr"){
  manifestUrl = "/sr-manifest.json"
};

if (language == "uk"){
 manifestUrl = "/uk-manifest.json"
};

if (!manifestUrl) manifestUrl = "/en-manifest.json";

document.querySelector('#manifest-placeholder').setAttribute('href', manifestUrl);

I used this solution in an application where you can save your body measurements and clothing sizes. This way, when shopping, you don't have to remember whether you need pants W32 L30 or the other way around. The application is available at:
https://clothing-sizes.replit.app

Happy coding! :-)