Оболочка приложения для кэширования в React PWA с рендерингом на стороне сервера

Question

Допустим, у вас есть мобильное веб-приложение на основе React, которое использует преимущества рендеринга на стороне сервера для начального представления (по соображениям скорости + SEO). Файл index.html отсутствует - индексный файл динамически создается на стороне сервера и возвращается в исходном ответе.

Теперь предположим, что вы хотите добавить функциональность PWA в это приложение. Вы подключаете сервисного работника для кэширования активов и т. Д.

Одним из основных арендаторов PWA является то, что они обеспечивают работу в автономном режиме. Скажем, мы просто хотим показать страницу обновления: "Вы не в сети, нажмите здесь, чтобы обновить", когда работник службы обнаружит, что пользователь не в сети.

Онлайн-примеры, представленные Google, рассказывают об использовании App Shell - статического HTML-файла, который может кэшироваться работником службы при первом посещении и который будет "оболочкой", в которой находится ваше реагирующее приложение. Эта оболочка связана с отображением "автономного" представления.

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

Любые демонстрации или примеры этой функциональности в дикой природе?

Answer 1

Любые демонстрации или примеры этой функциональности в дикой природе?

Да!

Посмотрите на https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, где используется dynamicUrlToDepndencies вариант в sw-precache определить, какие базовые ресурсы используются для серверной визуализации HTML-кода App Shell.

Служебный работник, сгенерированный им, позаботится об обновлении HTML-кода App Shell всякий раз, когда какие-либо ресурсы зависят от изменений.

В этой модели работник сервиса вернет один и тот же HTML-документ App Shell для всех запросов на навигацию, поэтому он предполагает, что HTML-код App Shell достаточно универсален, чтобы затем заполнять его во время выполнения динамическим контентом, связанным с фактическим URL-адресом через стандартный клиент. логика маршрутизации