Use fetch api when supported

I’m using i18next in a service worker setup right now with this xhr backend, however, there was one obstacle to get it working: XMLHttpRequest is not defined in the service worker context. I did manage to get the backend working in the following manner however:

import i18next from 'i18next';
import i18nextXHR from 'i18next-xhr-backend'; // eslint-disable-line import/no-unresolved,import/no-extraneous-dependencies

let t = null;

self.addEventListener('activate', (event) => {
  event.waitUntil(new Promise((resolve, reject) => {
    i18next
      .use(i18nextXHR)
      .init({
        fallbackLng: ['ja', 'en', 'zh'],
        preload: ['ja', 'en', 'zh'],
        ns: 'translation',
        defaultNS: 'translation',
        keySeparator: false, // Allow usage of dots in keys
        nsSeparator: false,
        backend: {
          loadPath: '/locales/{{lng}}/{{ns}}.json',
          ajax(url, options, cb) {
            fetch(url, options)
              .then((res) => {
                if (res.ok) {
                  return res.text()
                    .then((json) => {
                      cb(json, res);
                    });
                }

                return new Error('Error loading translation json');
              });
          },
        },
      }, (err, _t) => {
        if (err) {
          reject(err);
          return;
        }

        t = _t;
        resolve();
      });
  }));
});

By using the ajax option and using the fetch API, this backend works like charm… however, maybe it’s a good idea to use the fetch API here wherever it’s supported by default? It’s a more modern API supported by modern browsers, and would make using i18next in service worker contexts, or other modern context much more easy

[perrin4869]

Just published the module here

[perrin4869]

Actually, what do you think of this as the fetch-backend:

import XHRBackend from 'i18next-xhr-backend';

class FetchBackend extends XHRBackend {
  constructor(services, options = {}) {
    options.ajax = options.ajax || ((url, options, cb) => {
      fetch(url, options)
        .then((res) => {
          if (res.ok) {
            return res.text()
              .then((json) => {
                cb(json, res);
              });
          }

          return new Error('Error loading translation json');
        });
    });

    super(services, options);
  }
}

Just tested it and seems to work in my case. I’ll publish it as an npm module tomorrow