Как сообщить посетителям веб-сайта Blazor Webassembly, что их браузер не поддерживает Webassembly? - PullRequest
Новая
       107

Как сообщить посетителям веб-сайта Blazor Webassembly, что их браузер не поддерживает Webassembly?

2 голосов
/ 01 августа 2020

Я попробовал Blazor Webassembly. Я создал новый проект Blazor Webassembly в Visual Studio. Это дает нам базовый пример проекта c с такими вещами, как счетчик, который вы можете увеличивать, щелкнув, страницу, которая извлекает некоторые данные, ...

Когда я запускаю его в новейшей версии Firefox, он работал нормально.

Но потом я подумал: что происходит, когда я запускаю его в старой версии Firefox, которая не поддерживает Webassembly ?? Например, Firefox 50 с 2017 года.

Он просто показывает это. Не загружается. Больше ничего не происходит:

enter image description here

Looking into the WebConsole I found this:

введите описание изображения здесь

Таким образом, приложение Blazor Webassembly знает, что оно не может работать в этом браузере, но не сообщает об этом посетителю. Есть ли простой способ сообщить пользователю, в чем проблема (возможно, указав альтернативный файл HTML), вместо того, чтобы солгать, что что-то «загружается ...»?

1 Ответ

4 голосов
/ 01 августа 2020

Согласно блогу по следующей ссылке:

https://medium.com/@waelkdouh / how-to-detect-unsupported-browsers-under-a-blazor-webassembly-application-bc11ab0ee015

Вы можете заставить Blazor запускать ленивую загрузку и явно запускать Blazor.

Это позволяет загружать только в том случае, если текущий браузер поддерживает это, в противном случае отображать сообщение для пользователя.

По сути, вам нужно добавить следующий сценарий в индекс. html: 

    <!--prevent autostarting-->
<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>

    //check if webassembly is supported
    const webassemblySupported = (function () {
        try {
            if (typeof WebAssembly === "object"
                && typeof WebAssembly.instantiate === "function") {
                const module = new WebAssembly.Module(
                    Uint8Array.of(0x0, 0x61, 0x73, 0x6d,
                        0x01, 0x00, 0x00, 0x00));
                if (module instanceof WebAssembly.Module)
                    return new WebAssembly.Instance(module)
                        instanceof WebAssembly.Instance;
            }
        } catch (e) {
        }
        return false;
    })();

    // Modern browsers e.g. Microsoft Edge
    if (webassemblySupported) {
        Blazor.start({});
    }
    // Older browsers e.g. IE11
    else {
        window.location = window.location + "BrowserNotSupported.html";
    }

</script>

Обратите внимание, что первый сценарий уже должен существовать, но вам нужно убедиться, что он лениво загружает Blazor.

...