Браузер хранит запутанную кэшированную версию углового приложения в корневом каталоге index.html, размещенном в службе приложений Azure. - PullRequest
Новая
       19

Браузер хранит запутанную кэшированную версию углового приложения в корневом каталоге index.html, размещенном в службе приложений Azure.

2 голосов
/ 05 апреля 2019

В настоящее время у нас есть 2 версии нашего приложения Angular для служб Azure / App для поддержки интернализации.

Они размещены в одном и том же месте, но в разных папках / en и / фр .Наше дерево папок выглядит следующим образом: 

-> 
wwwroot/index.html
wwwroot/web.config
wwwroot/en/index.html
wwwroot/en/..
wwwroot/fr/index.html
wwwroot/fr/..

У нас есть правила перезаписи web.config, которые отлично работают.Смотрите ниже: 

<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="Angular Routes fr" stopProcessing="true">
                <match url="fr/.*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="fr/" />
            </rule>
            <rule name="Angular Routes en" stopProcessing="true">
                <match url="en/.*" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="en/" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
</configuration>

Вот поворот;мы предоставляем корневой index.html на тот случай, если пользователь перейдет на www.app.com вместо www.app.com/en.В этом случае запускается корневой index.html, и мы запускаем некоторый js-скрипт для перенаправления, используя «window.location.href» пользователя в зависимости от языка локального хранилища.

По какой-то причине, когда мы запрашиваемURL из корня www.app.com ссылка на браузер и кеширование первой версии на этот URL.

Если мы запрашиваем URL с таким ресурсом, как этот www.app.com/en/*, браузер связывает ДРУГУЮ версию с этим путем, несмотря на то жеdomain.

Проблема в том, что каждый раз, когда мы внедряем новую версию, обновляется только путь с любыми ресурсами, например: www.app.com/en/* или www.app.com/fr/*, но корневой URL www.app.com остается привязанным к старой версиии никогда не обновлять.

Если пользователь использует корневой URL-адрес, он будет перенаправлен на старую версию приложения, доступную только в памяти или на диске.

Обратите внимание, что www.app.com/en/* или www.app.com/fr/*отлично работает

На данный момент я не знаю, в чем проблема - в наших правилах перезаписи или в нашем перенаправлении скрипта js.

Вот угловой скрипт сборки для / en -> ng build --output-path=dist/en --prod --base-href /en/ --i18n-locale en-CA --i18n-format=xlf

Вот наш корневой index.html код: 

<html>
<head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <script>
        var edRedirectManager = (function () {
            var _this = {};

            _this.storageLocaleKey = "EDLocale";

            _this.locale = "";
            _this.init = function(){
                _this.locale = (_this.getUserLanguage());
            } 

            _this.redirect = function () {
                var currentUrl = new URL(window.location.href);

                var lgPrefix = _this.getUrlPrefixByLanguage();
                currentUrl.pathname = _this.insert(currentUrl.pathname,lgPrefix,0);

                window.location.href = currentUrl.href;
            }

            _this.getUserLanguage = function () {

                try {
                    _this.locale = localStorage.getItem(storageLocaleKey);
                } catch (error) {}

                if (!this.locale) {

                    if (navigator.language.toUpperCase().indexOf("FR") !== -1)
                        this.locale = "fr-CA";
                    else
                        this.locale = "en-CA";

                    localStorage.setItem(this.storageLocaleKey, this.locale);

                }

                return _this.locale;
            }

            _this.getUrlPrefixByLanguage = function(){
                var lgPrefix = "/fr";

                if(this.locale.indexOf('en') !== -1){
                    lgPrefix = "/en";
                }

                return lgPrefix;
            }

            _this.insert = function (main_string, ins_string, pos) {
                if (typeof (pos) == "undefined") {
                    pos = 0;
                }
                if (typeof (ins_string) == "undefined") {
                    ins_string = '';
                }
                return main_string.slice(0, pos) + ins_string + main_string.slice(pos);
            }


            return _this;
        })();
    </script>

</head>

<body>

    <script>
        // self executing function here
        edRedirectManager.init();
        edRedirectManager.redirect();
    </script>
</body>

</html>
...