Как заставить Angular Universal и PWA работать вместе? - PullRequest
Новая
       27

Как заставить Angular Universal и PWA работать вместе?

0 голосов
/ 30 мая 2019

У меня есть приложение SSR Angular, которое я пытаюсь преобразовать в PWA.Я хочу, чтобы он выполнялся на стороне сервера для SEO и для «быстрого первого рендеринга», который он обеспечивает.

Режим PWA работает нормально в сочетании с SSR, но после загрузки приложения, когда мы обновляем егоклиентский индексный HTML-файл загружается вместо серверной страницы.

Я копался в коде ngsw-worker.js, и я видел это: 

// Next, check if this is a navigation request for a route. Detect circular
// navigations by checking if the request URL is the same as the index URL.
if (req.url !== this.manifest.index && this.isNavigationRequest(req)) {
    // This was a navigation request. Re-enter `handleFetch` with a request for
    // the URL.
    return this.handleFetch(this.adapter.newRequest(this.manifest.index), context);
}

У меня нетконтроль над этим файлом, так как он из фреймворка и не доступен для разработчиков.Кто-нибудь нашел решение или обходной путь для этого?

1 Ответ

0 голосов
/ 31 мая 2019

Я нашел рабочее решение, свойство navigationUrls в ngsw-config.json содержит список включенных или исключенных URL-адресов навигации (с восклицательным знаком), как описано в документации .

Затем я настроил его следующим образом: 

"navigationUrls": [
    "!/**"
]

Таким образом, ни один из URL-адресов не перенаправляется на index.html, и приложение, отображаемое на стороне сервера, вступает в игру при первом запросе (или обновлении) приложения.независимо от того, какой это URL-адрес.

Чтобы пойти дальше, три вида URL-адресов, которыми управляет работник сервиса:

  • Не навигационные URL-адреса: статические файлы, кэшированные работником сервиса иперечислены в сгенерированном файле ngsw.json с соответствующими им хэшами
  • URL-адреса навигации: по умолчанию перенаправляются на index.html, перенаправляются на сервер, если используется конфигурация "!/**"
  • GETзапросы к бэкэнду: перенаправлены на бэкэнд

Чтобы отличить GET XMLHttpRequest от запроса навигации, работник сервиса использует Request.mode property и заголовок Accept, который содержит text/html при навигации и application/json, text/plain, */* при запросе серверной части.

...