Translation without internet connection

[phuongnguyenzoi]

We are thinking of bring this tolgee into our react native app since web version is using Tolgee and work magically.
But we gonna have offline mode for our app soon, so I'm wonder if Tolgee support offline mode?

[stepan662]

Hey, it depends on how you use it. We recommend bundle translation files directly with your application for production. If you do that it works offline without problem. You can read more e.g. here.

[phuongnguyenzoi]

@stepan662
Hey, hope you doing fine.

The reason that we want to use tolgee is that we can change the translation without having to make another version to store.

And since my app have offline mode, so I'm wonder if I can have tolgee both way, online communication with tolgee server while use have internet, and use dynamic files when users are in offline mode

[stepan662]

Hello, do I understand correctly, you are loading translations from Tolgee platform on production?

It should work if you configure it this way:

<TolgeeProvider
  staticData={{
    en: () => import('./i18n/en.json'),
    de: () => import('./i18n/de.json'),
  }}
  apiUrl="..."
  apiKey="<readOnlyApiKey>"
  ...
>
  ...
</TolgeePrivider>

Tolgee SDK should fallback to them if it fails to load translations from Tolgee platform.

But be aware, that this is kinda hack.

[phuongnguyenzoi]

Right now I don't use static data.

          <TolgeeProvider
            filesUrlPrefix="i18n/"
            apiUrl={"https"}
            apiKey={"tgpak"}
          >
          <App/>
         </TolgeeProvider>

This is how I'm using it.
But somehow, the app return blank screen when I add the Tolgee Provider in

[phuongnguyenzoi]

So, I'm trying to do another way, kind of create an instance of Tolgee. Something like this

import { Tolgee, IcuFormatter } from "@tolgee/core";

const tg = Tolgee.use(IcuFormatter).init({
  apiKey: "tgpak_geztenk7ofuhk4bqmm2gszjqmf2go2zwgiztczdegjvtk5jrn4",
  apiUrl: "https://app.tolgee.io",
})

console.log('tg: ', tg.translate("quality_standards.task_actions").then(res => console.log('res translate: ', res)
));

Here is the log when trying to call tg.translate
res translate: %-%tolgee:quality_standards.task_actions%-%

[stepan662]

The first example should be correct. What kind of error does it throws?

BTW: We don't officially support React native, did you make it work? 😄

[anatoliesernii]

Incase someone still looking for a solution ("@tolgee/react": "6.0.0")

This is the implementation i managed to make it work if the app can not connect remotely (either Tolgee CDN is down, or offline usage of the current ReactApp.

import { FormatIcu } from '@tolgee/format-icu';
import { BackendFetch, DevTools, Tolgee } from '@tolgee/react';

const elTranslation = import('~/locales/el/translation.json');
const enTranslation = import('~/locales/en/translation.json');

const tolgeeApiUrl = process.env.REACT_APP_TOLGEE_API_URL;
const tolgeeApiKey = process.env.REACT_APP_TOLGEE_API_KEY;
const tolgeePrefixLink = process.env.REACT_APP_TOLGEE_CDN_PREFIX_LINK;
const systemDefaultLanguage = process.env.REACT_APP_SYSTEM_DEFAULT_LANG ?? 'el';

export const availableLanguages = ['el', 'en'];
const localLanguage = localStorage.getItem('I18N_LANGUAGE');

// If no language is set in local storage, set it to default language
if (!localLanguage) {
	localStorage.setItem('I18N_LANGUAGE', systemDefaultLanguage);
}

// If user messed with localStarage, set it to default language
if (localLanguage && !availableLanguages.includes(localLanguage)) {
	localStorage.setItem('I18N_LANGUAGE', systemDefaultLanguage);
}

const mainLanguage = localLanguage ?? systemDefaultLanguage;

const getStaticData = {
	el: () => elTranslation,
	en: () => enTranslation
};

const tolgeeInstance = Tolgee()
	.use(DevTools())
	.use(FormatIcu())
	.use(
		BackendFetch({
			prefix: tolgeePrefixLink,
			fallbackOnFail: true, // This will enable fallback to static data when fetch fails
			timeout: 5000,
			getData: async response => {
				if (!response.ok) {
					console.warn('Tolgee: Network response was not ok, using static translations');
					throw new Error('Network response was not ok');
				}
				return response.json();
			}
		})
	)
	.init({
		availableLanguages: availableLanguages,
		apiUrl: tolgeeApiUrl,
		apiKey: tolgeeApiKey,
		fallbackLanguage: mainLanguage,
		defaultLanguage: mainLanguage,
		staticData: getStaticData
	});

export default tolgeeInstance;