How to properly translate a web application into multiple languages?

Question

JavaScript

An HTML5 web application is stored on the user's mobile device in the Application Cache.
Some of the words are in the "skeleton" in html-files: section headings and auxiliary information.
Part of it produces javascript: most often these are messages about the success of the operation or about errors.
Dynamic content is given by the server through the API, everything is clear with it and there are no questions.
The minimum program is to organize the loading of the necessary language phrases.
The maximum program is to allow visitors to take part in localization.
I looked at a bunch of services like Transifex, Pootle, Crowdin, etc. - all of them are either zabubble or require an environment that is not available on the hosting.
The service is non-commercial, it will never pay off, there are no sponsors for this.
It became clear that most likely I would have to give birth to another bicycle :(
Request to the guru: please push in the right direction! I'm still learning programming and have never done anything like this. I don't need anything ready, just tell me how to a) organize language phrases and b) upload them to users?
At least according to the minimum program, there are few phrases and, in principle, crowdsourcing may not be involved.
Thank you.

Answer 1

1. Get JSON files - dictionaries for each language, for example ru.json en.json
2. Loading the required json at the start of the page (at the user's choice, if not chosen yet - by the Accept-language header) via ajax or immediately embed it into the page
3 We need a js function to convert the dictionary key into a phrase, I will write you an example:
the 0th argument takes the key, the subsequent ones take substitutions into the phrase string, for example $1 in the phrase will be replaced by the 1st argument

var dict = {}; //загруженный словарь
function lang(key) {
  var str = dict[key] || '';
  var args = new Array(arguments.length);
  for(var i = arguments.length; i--;) args[i] = arguments[i];
  return str.replace(/\$\d+/g, function(matched) {
     return args[matched.slice(1)] || matched;
  };
}

4. You can immediately add html processing when loading the page - for all elements with the data-lang attribute, replace the content according to the dictionary<p data-lang="key"></p>

document.addEventListiner('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('[data-lang]');
  for(var i = elems.length; i--;) {
    elems[i].innerText = lang(elems[i].getAttribute('data-lang'));
  }
}, false);