Пожалуйста, прекратите загрузку библиотек JS во время выполнения в PWA.

Это разрушает UX

Почему? Из-за этого автономная возможность PWA нарушена.

Как? Вот пошаговый пример UX:

  1. Пользователь подключается к автономному Blazor WebApp через свой обычный браузер.
  2. Пользователь начинает взаимодействовать с веб-приложением, еще не достигнув ни одной страницы/компонента, который использует компоненты библиотеки/DI.
  3. Внезапно у пользователя нет подключения к Интернету, но это не проблема, веб-приложение до сих пор кешировало то, что ему нужно для разрешения *.js библиотек (и других ресурсов) из кеша.
  4. (в автономном режиме) Пользователь получает доступ к той части WebApp, которая зависит от библиотеки, которая динамически загружает модули JS.
  5. (оффлайн) Веб-приложение ломается, DI не работает, компоненты ломаются везде, работа в автономном режиме нарушается, и пользователь покидает веб-приложение недовольным

Обычно serviceWorker используется для кэширования всех необходимых ресурсов/активов фреймворка, поэтому, когда нет сети, можно использовать локально кэшированные ресурсы/активы, и веб-приложение может продолжать работать, более или менее полнофункционально, как если бы оно все еще было в сети, заставляя его вести себя больше как реальное приложение, чем простой веб-сайт.

Когда в игру вступает импорт/загрузка во время выполнения, а веб-приложение не достигло точки использования этой библиотеки, вызов import завершится ошибкой, учитывая отсутствие соединения, и вы оставите пользователя с меньшим количеством функций или просто неработающим приложением.

Если вы предлагаете автономные возможности в своем веб-приложении, основное простое решение, которое сработало для меня, — это просто отключить действия/страницы/модальные окна, которые запускают DI (внедрение зависимостей) компонентов, которые полагаются на эти автономные неподдерживаемые библиотеки ¯\_(ツ )_/¯

Довольно неприятно для конечного пользователя, но это лучше, чем развязывать ад и оставлять веб-приложение в сломанном или нестабильном состоянии.

Исходя из Blazor WebAssembly, загрузка/импорт библиотек во время выполнения кажется хорошей оптимизацией с точки зрения меньшей необходимой пропускной способности и более быстрой загрузки веб-приложения в первый раз, но для меня я считаю, что пользовательский опыт на первом месте, и оставляю эти функции заблокированными или отключены, когда они могут быть полностью в порядке в автономном режиме, это потеря.

[Обновление] Я понял, что есть обходной путь, и можно загрузить эти библиотеки без необходимости изменения внешних библиотек, просто поместите модуль js как обычный скрипт модуля в index.html, как показано ниже. и вы готовы идти!

<script src="_content/Some.Blazor.Library/jsFunctions.js" type="module"></script>

К сожалению, существуют библиотеки, которые используют довольно много модулей, но не помещают их все в документацию, так что вот ваша бесплатная рутинная работа по очистке исходного кода для *.js импортных ссылок, которых можно было бы полностью избежать в primis.

Первоначально опубликовано на https://blog.thepra.dev 23 октября 2021 г.