Да, разумно использовать Transferstate с PWA в Angular, но есть предостережение.
Transferstate вступит в силу при первом посещении веб-приложения. Angular universal полностью отобразит html для представления, соответствующего вашему URL, и отправит все данные, полученные через Transferstate, как вы ожидаете, чтобы предотвратить «флэш», который происходит, когда клиентское приложение загружается и снова выполняет все те же вызовы API ,
В фоновом режиме сервисный работник либо кеширует, либо проактивно загружает дополнительные элементы PWA вашего приложения, такие как файл index.html. После этого последующие посещения веб-приложения будут полностью обрабатываться PWA, который теперь кешируется в браузере, инициируя любые вызовы API из браузера, полностью обходя рендеринг на стороне сервера и необходимость в TransferState. Это происходит даже в том случае, если вы случайно запрыгнули в веб-приложение по маршруту, который ранее не посещали.
В этом сценарии трансфертное государство имеет своей целью предотвратить «флэш», возникающий при первом посещении веб-приложения в браузерах, поддерживающих PWA, а также для последующих посещений веб-приложения для браузеров, которые не поддерживают PWA, поскольку эти запросы будут всегда заходите на сервер Angular Universal.
Предостережение заключается в том, что трансфертное государство не должно рассматриваться как единственный возможный источник данных. Всегда должен быть какой-то API-интерфейс, к которому можно обратиться в случае, если искомые данные отсутствуют в TransferState.
Пример из моего личного опыта: я использовал Transfertate для отправки значений конфигурации, считанных из переменных среды сервера, в браузер. Когда PWA взял на себя конфигурации, не было, где можно найти, потому что не было TransferState в index.html PWA. Решение состояло в том, чтобы настроить конечную точку API для обслуживания конфигураций, а не полагаться на TransferState для этого.
Предыдущий ответ (игнорируйте предложения здесь):
Кажется, что есть ограничение при использовании Transferstate с PWA. Я обнаружил, что тег сценария, в котором хранится jF-файл Transferstate, отсутствует в DOM во время срабатывания триггера DOMContentloaded.
Когда Chrome Devtools открыт на вкладке «Приложение», в разделе «Сервисные работники» снимите флажки «Обновлять при перезагрузке» и «Обойти для сети». Затем перезагрузите приложение и обратите внимание, что любые запросы XHR, которые вы, возможно, кэшировали в Transferstate, фактически выполняются в браузере, хотя они должны были уже быть выполнены во время рендеринга на стороне сервера.
Это не идеально, но один из вариантов - удалить запись /index.html из любого массива assetGroups.resources.files в файле ngsw-config.json. Это препятствует тому, чтобы ваше приложение было полноценным PWA с автономными возможностями, но оно по-прежнему имеет преимущество загрузки других ресурсов из сервисного работника.