Регистрация Service Worker через Angular и Spring Boot 2

У нас есть приложение, работающее на Spring Boot 2. Большая часть нашего сайта построена с использованием Angular 7. Теперь наш сценарий немного другой, вместо того, чтобы обслуживать файлы Angular dist на сервере, мы используем Spring Boot 2 для обслуживания файлов производственной сборки. из углового,

Таким образом, наш конвейер генерирует файлы производственной сборки Angular (main.js, vendor.js и т. д. и т. д.), и мы копируем их в нашу целевую папку Spring Boot, упаковываем и развертываем.

Это означает, что хотя я регистрирую работника службы с помощью пакета @angular/service-worker, мы обслуживаем его с помощью весенней загрузки.

Таким образом, в конечном итоге файлы сервисного работника обслуживаются из папки js/dist, то есть: https://shop.domain.com/js/dist/ngsw-worker.js

Итак, я регистрирую сервисного работника в порядке из /js/dist/ngsw-worker.js, и все, кажется, загружается.

Но когда я пытаюсь добавить на домашнюю сцену, я получаю сообщение об ошибке:

Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

все соответствующие файлы подаются из папки js/dist. Нравится: /js/dist/manifest.webmanifest/js/dist/ngsw.json/js/dist/safety-worker.js

Итак, я почитал и нашел хороший заголовок под названием Service-Worker-Allowed

Итак, в моем приложении Spring Boot 2 я регистрирую следующий WebFilter

ServiceWorkerHeaderFilter.java

package com.company.project.serviceworker;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(urlPatterns = "/js/dist/ngsw-worker.js")
public class AddServiceWorkerSecurityHeaderFilter implements Filter {

    @Override
    public void destroy() {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        httpServletResponse.setHeader("Service-Worker-Allowed", "/");
        chain.doFilter(request, response);
    }

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }
}

Заголовок, кажется, работает нормально, и файлы загружаются правильно. В моем файле манифеста я указываю start_url

"start_url": "/"

Я больше не указываю scope, так как заголовок http должен переопределять это. Но даже если я укажу это, ошибка продолжает возникать.

Любая помощь будет принята с благодарностью.

Ваш код отлично сработал для меня. Как я полагаю, вы уже поняли, что проблема заключается в области видимости.

colecmc 05.02.2020 18:09
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
1
457
0

Другие вопросы по теме