✨ [Story localization] Fetch strings for localization files if in experiment

build-system/test-configs/dep-check-config.js

@@ -400,6 +400,7 @@ exports.rules = [
       'extensions/amp-story/1.0/amp-story-localization-service.js->src/service/localization/index.js',
       'extensions/amp-story*/**/*.js->src/service/localization/strings.js',
       'extensions/amp-story-auto-ads/0.1/story-ad-localization.js->src/service/localization/index.js',
+      'extensions/amp-story/1.0/amp-story.js->src/service/extension-script.js',
 
       // Accessing calculateScriptBaseUrl() for vendor config URLs
       'extensions/amp-analytics/0.1/config.js->' +

extensions/amp-story/1.0/amp-story.js

@@ -41,6 +41,7 @@ import {
   setImportantStyles,
   toggle,
 } from '#core/dom/style';
+import {devError} from '#core/error';
 import {isEsm} from '#core/mode';
 import {findIndex, lastItem, toArray} from '#core/types/array';
 import {debounce} from '#core/types/function';
@@ -53,6 +54,7 @@ import {getHistoryState as getWindowHistoryState} from '#core/window/history';
 import {isExperimentOn} from '#experiments';
 
 import {Services} from '#service';
+import {calculateScriptBaseUrl} from '#service/extension-script';
 import {createPseudoLocale} from '#service/localization/strings';
 
 import {getDetail} from '#utils/event-helper';
@@ -318,34 +320,7 @@ export class AmpStory extends AMP.BaseElement {
       ? new AmpStoryViewerMessagingHandler(this.win, this.viewer_)
       : null;
 
-    getLocalizationService(this.element)
-      .registerLocalizedStringBundle('default', LocalizedStringsEn)
-      .registerLocalizedStringBundle('ar', LocalizedStringsAr)
-      .registerLocalizedStringBundle('de', LocalizedStringsDe)
-      .registerLocalizedStringBundle('en', LocalizedStringsEn)
-      .registerLocalizedStringBundle('en-GB', LocalizedStringsEnGb)
-      .registerLocalizedStringBundle('es', LocalizedStringsEs)
-      .registerLocalizedStringBundle('es-419', LocalizedStringsEs419)
-      .registerLocalizedStringBundle('fr', LocalizedStringsFr)
-      .registerLocalizedStringBundle('hi', LocalizedStringsHi)
-      .registerLocalizedStringBundle('id', LocalizedStringsId)
-      .registerLocalizedStringBundle('it', LocalizedStringsIt)
-      .registerLocalizedStringBundle('ja', LocalizedStringsJa)
-      .registerLocalizedStringBundle('ko', LocalizedStringsKo)
-      .registerLocalizedStringBundle('nl', LocalizedStringsNl)
-      .registerLocalizedStringBundle('no', LocalizedStringsNo)
-      .registerLocalizedStringBundle('pt-PT', LocalizedStringsPtPt)
-      .registerLocalizedStringBundle('pt-BR', LocalizedStringsPtBr)
-      .registerLocalizedStringBundle('ru', LocalizedStringsRu)
-      .registerLocalizedStringBundle('tr', LocalizedStringsTr)
-      .registerLocalizedStringBundle('vi', LocalizedStringsVi)
-      .registerLocalizedStringBundle('zh-CN', LocalizedStringsZhCn)
-      .registerLocalizedStringBundle('zh-TW', LocalizedStringsZhTw)
-      .registerLocalizedStringBundle(
-        'en-xa',
-        createPseudoLocale(LocalizedStringsEn, (s) => `[${s} one two]`)
-      );
-    this.registerInlineLocalizationStrings_();
+    this.installLocalizationStrings_();
 
     if (this.isStandalone_()) {
       this.initializeStandaloneStory_();
@@ -2471,28 +2446,99 @@ export class AmpStory extends AMP.BaseElement {
     }
   }
 
+  /**
+   * Adds the localization string bundles to the localization service.
+   */
+  installLocalizationStrings_() {
+    const localizationService = getLocalizationService(this.element);
+    const storyLanguage = localizationService.getLanguageCodesForElement(
+      this.element
+    )[0];
+    if (this.registerInlineLocalizationStrings_(storyLanguage)) {
+      return;
+    }
+    if (isExperimentOn(this.win, 'story-remote-locales')) {
+      this.fetchLocalizationStrings_(storyLanguage);
+    } else {
+      getLocalizationService(this.element)
+        .registerLocalizedStringBundle('default', LocalizedStringsEn)
+        .registerLocalizedStringBundle('ar', LocalizedStringsAr)
+        .registerLocalizedStringBundle('de', LocalizedStringsDe)
+        .registerLocalizedStringBundle('en', LocalizedStringsEn)
+        .registerLocalizedStringBundle('en-GB', LocalizedStringsEnGb)
+        .registerLocalizedStringBundle('es', LocalizedStringsEs)
+        .registerLocalizedStringBundle('es-419', LocalizedStringsEs419)
+        .registerLocalizedStringBundle('fr', LocalizedStringsFr)
+        .registerLocalizedStringBundle('hi', LocalizedStringsHi)
+        .registerLocalizedStringBundle('id', LocalizedStringsId)
+        .registerLocalizedStringBundle('it', LocalizedStringsIt)
+        .registerLocalizedStringBundle('ja', LocalizedStringsJa)
+        .registerLocalizedStringBundle('ko', LocalizedStringsKo)
+        .registerLocalizedStringBundle('nl', LocalizedStringsNl)
+        .registerLocalizedStringBundle('no', LocalizedStringsNo)
+        .registerLocalizedStringBundle('pt-PT', LocalizedStringsPtPt)
+        .registerLocalizedStringBundle('pt-BR', LocalizedStringsPtBr)
+        .registerLocalizedStringBundle('ru', LocalizedStringsRu)
+        .registerLocalizedStringBundle('tr', LocalizedStringsTr)
+        .registerLocalizedStringBundle('vi', LocalizedStringsVi)
+        .registerLocalizedStringBundle('zh-CN', LocalizedStringsZhCn)
+        .registerLocalizedStringBundle('zh-TW', LocalizedStringsZhTw)
+        .registerLocalizedStringBundle(
+          'en-xa',
+          createPseudoLocale(LocalizedStringsEn, (s) => `[${s} one two]`)
+        );
+    }
+  }
+
   /**
    * If there are inline localization strings, register as current document language.
+   * @param {string} languageCode
+   * @return {boolean}
    */
-  registerInlineLocalizationStrings_() {
+  registerInlineLocalizationStrings_(languageCode) {
     const inlineStringsEl = this.win.document.querySelector(
       'script[amp-localization="amp-story"]'
     );
     if (
       inlineStringsEl?.getAttribute('i-amphtml-version') !==
       getMode(this.win).rtvVersion
     ) {
-      return;
+      return false;
     }
     const stringsOrNull = tryParseJson(inlineStringsEl.textContent);
+
     if (!stringsOrNull) {
-      return;
+      return false;
     }
     const localizationService = getLocalizationService(this.element);
     localizationService.registerLocalizedStringBundle(
-      localizationService.getLanguageCodesForElement(this.element)[0],
+      languageCode,
       stringsOrNull
     );
+    return true;
+  }
+
+  /**
+   * Fetches from the CDN or localhost the localization strings.
+   * @param {string} languageCode
+   */
+  fetchLocalizationStrings_(languageCode) {
+    const localizationService = getLocalizationService(this.element);
+
+    const localizationUrl = `${calculateScriptBaseUrl(
+      this.win.location,
+      getMode(this.win).localDev
+    )}/v0/amp-story.${languageCode}.json`;
+
+    Services.xhrFor(this.win)
+      .fetchJson(localizationUrl)
+      .then((res) => res.json())
+      .then((json) =>
+        localizationService.registerLocalizedStringBundle(languageCode, json)
+      )
+      .catch((err) => {
+        devError(TAG, err, 'Bundle not found for language ' + languageCode);
+      });
   }
 }
 

extensions/amp-story/1.0/test/test-amp-story.js

@@ -1709,6 +1709,77 @@ describes.realWin(
           'Swipe up'
         );
       });
+
+      describe('remote locales', () => {
+        beforeEach(() => {
+          toggleExperiment(env.win, 'story-remote-locales', true);
+        });
+
+        it('should fetch the localization strings for the default laguage from the cdn', async () => {
+          const fetchSpy = env.sandbox.spy(
+            Services.xhrFor(env.win),
+            'fetchJson'
+          );
+
+          await createStoryWithPages(1, ['cover']);
+
+          expect(fetchSpy).to.be.calledOnceWithExactly(
+            'https://cdn.ampproject.org/v0/amp-story.en.json'
+          );
+        });
+
+        it('should fetch the localization strings for the document laguage from the cdn', async () => {
+          env.win.document.body.parentElement.setAttribute('lang', 'es-419');
+
+          const fetchSpy = env.sandbox.spy(
+            Services.xhrFor(env.win),
+            'fetchJson'
+          );
+
+          await createStoryWithPages(1, ['cover']);
+
+          expect(fetchSpy).to.have.been.calledOnceWithExactly(
+            'https://cdn.ampproject.org/v0/amp-story.es-419.json'
+          );
+        });
+
+        it('should fetch the localization strings for the document laguage from the local dist if testing locally', async () => {
+          env.win.document.body.parentElement.setAttribute('lang', 'es-419');
+          env.win.__AMP_MODE.localDev = true;
+
+          const fetchSpy = env.sandbox.spy(
+            Services.xhrFor(env.win),
+            'fetchJson'
+          );
+
+          await createStoryWithPages(1, ['cover']);
+
+          expect(fetchSpy).to.have.been.calledOnceWithExactly(
+            '/dist/v0/amp-story.es-419.json'
+          );
+        });
+
+        it('should use the remote localization strings', async () => {
+          env.win.document.body.parentElement.setAttribute('lang', 'es-419');
+
+          const fetchMock = env.sandbox.mock(Services.xhrFor(env.win));
+          fetchMock.expects('fetchJson').returns(
+            Promise.resolve({
+              json: () =>
+                Promise.resolve({
+                  '35': 'REMOTE-STRING',
+                }),
+            })
+          );
+
+          await createStoryWithPages(1, ['cover']);
+
+          expect(localizationService.getLocalizedString('35')).to.be.equal(
+            'REMOTE-STRING'
+          );
+          fetchMock.verify();
+        });
+      });
     });
   }
 );