Динамичен manifest.json

Ако желаете потребителите на вашето уеб приложение да го „инсталират“ на своите устройства, достатъчно е да попълните manifest.json файла. Има широка поддръжка от всякакви браузъри и операционни системи и е елементарно да се направи, за да се пропуска.

Поддържам едно Vue приложение, което комуникира с SaaS система. Приложението се генерира почти статично, без да има beck-end зад себе си и има една входна точка, но в зависимост от сайта, които я зарежда, в LocaleStorage-а записвам променлива, която съдържа идентификатор на този сайт. Приложението си има изграден manifest.json, но с времето се наложи да го персонализирам за всеки един сайт.

Динамичното зареждане на manifest.json файла трябва да стане при клиента (в браузъра). Vue & Vue Router ги изключихме от сметките, защото манифеста трябва да е наличен, дори и техните 'машинки' да не заработят. Така че, прехвърлихме всичко в index.html файла на приложението.

Написах малка Node конзола, която преминава през активните бази и генерира статично manifest.siteId.json файл за всеки един сайт в определена папка. След това добавих един малък скрипт в index.html файла, който зарежда този файл и го добавя към document.head.

<!-- index.html -->

<script>
  const siteId = localStorage.getItem("siteId");
  const manifestPath = `/manifests/manifest.${siteId || ""}.json`;

  fetch(manifestPath)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      return response.json();
    })
    .then(() => {
      const link = document.createElement('link');

      link.rel = "manifest";
      link.href = manifestPath;

      document.head.appendChild(link);
    })
    .catch(() => {
      const link = document.createElement('link');

      link.rel = "manifest";
      link.href = '/manifests/manifest.json';

      document.head.appendChild(link);
    });
</script>

Защо fetch?

Това е един много добър въпрос. При генерирането на manifest.siteId.json файловете, може да възникне ситуация, при която няма да съществува такъв файл. Понеже JavaScript-а, не може да прави проверка за файл на сървъра - правя fetch заявка за него. Ако заявката не сработи, тогава зареждам manifest.json файл с базовите описания.