Await loadLanguageResources and add default banner text

web/i18n/translater.js

@@ -1,8 +1,13 @@
 const i18n = {};
 const languageDefault = 'en';
+const defaultEngText = {
+  title: 'Download Twake Mail application',
+  description: 'Faster and more convenient',
+  open: 'Open'
+};
 
 /**
- * 
+ * @description Check if the language is valid
  * @param {String} language 
  * @returns {boolean}
  */
@@ -13,6 +18,10 @@ function isValidUserLanguage(language) {
   return true;
 }
 
+/**
+ * @description Get the user language
+ * @returns {String}
+ */
 function getUserLanguage() {
   console.info(`[Twake Mail] Current Language: `, navigator.language);
   if (isValidUserLanguage(navigator.language)) {
@@ -21,21 +30,55 @@ function getUserLanguage() {
   return languageDefault;
 }
 
+/**
+ * @description Load the language resources
+ * @returns {Promise<void>}
+ */
 async function loadLanguageResources() {
+  const language = getUserLanguage();
   try {
-    const language = getUserLanguage();
     const response = await fetch(`/i18n/${language}.json`);
     const data = await response.json();
     i18n[language] = data;
     console.info(`[Twake Mail] Successfully loaded ${language} resources:`, i18n[language]);
   } catch (error) {
     console.error(`[Twake Mail] Error loading ${language} resources:`, error);
+    i18n['en'] = defaultEngText;
+    console.info(`[Twake Mail] Using default English resources:`, i18n['en']);
   }
 }
 
+/**
+ * @description Set the text content of smart banner
+ * @typedef SetTextContentParams
+ * @property {String} id
+ * @property {String} text 
+ * @param {SetTextContentParams} param
+ * @returns {void}
+ */
+function setTextContent({id, text}) {
+  document.getElementById(id).textContent = text;
+}
+
 document.addEventListener('DOMContentLoaded', function () {
   const language = getUserLanguage();
-  document.getElementById('banner-title-id').textContent = i18n[language].title;
-  document.getElementById('banner-description-id').textContent = i18n[language].description;
-  document.getElementById('open-button-id').textContent = i18n[language].open;
+
+  let languageResources = defaultEngText;
+
+  if (i18n[language] !== null && i18n[language] !== undefined) {
+    languageResources = i18n[language];
+  }
+
+  setTextContent({
+    id: 'banner-title-id',
+    text: languageResources.title
+  });
+  setTextContent({
+    id: 'banner-description-id',
+    text: languageResources.description
+  });
+  setTextContent({
+    id: 'open-button-id',
+    text: languageResources.open
+  });
 });

web/index.html

@@ -85,8 +85,7 @@
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
   <script>
-    loadLanguageResources()
-    initialWorkerService();
+    loadLanguageResources().finally(initialWorkerService);
   </script>
   <script src="https://unpkg.com/pica/dist/pica.min.js" ></script> 
 </body>