Я добавил Workbox в Angular при первом производственном развертывании, все работает нормально, но после обновления модуля и восстановления Angular и внедрения Workbox, а затем посещения сайта, я вижу, что работник сервиса обновляет новую версию и обновляет страницу, но теперь пытаетсядля использования обновленного модуля я получаю ошибки
Refused to execute script from 'https://example.com/8-es2015.203674bf0547eff7ff27.js'
because its MIME type ('text/html') is not executable,
и включена строгая проверка типов MIME.
main-es2015.45ba4a512f87eefb1b3a.js:1 ERROR Error: Uncaught (in promise): ChunkLoadError:
Loading chunk 8 failed.(error: https://example.com/8-es2015.203674bf0547eff7ff27.js)
ChunkLoadError: Loading chunk 8 failed......
Я посмотрел на сеть в Chrome и вижу, что файл 8-es2015.203674bf0547eff7ff27.js обслуживается из (дискового кэша) в отличие от остальных файлов, которые обслуживаются (ServiceWorker), его содержимым является файл index.html, откуда я не знаюэто даже не часть новой сборки? chrome помещает его в верхнюю часть кадра под скриптами
В чем причина этой ошибки, в angular.json У меня есть "outputHashing": "all" , Iудалите все и восстановите, но все равно эти ошибки, пока я не очищу деньги браузера, удалите ServiceWorker и полностью обновите систему, чтобы ошибка перестала происходить, пока я не перезагрузил страницу и не вернулся. Нужно ли удалять весь кеш после каждого обновления, я думал, что Workbox делает это автоматически. Я добавляю что-то подобное в sw.js
self.addEventListener('activate', event => event.waitUntil(
caches.keys().then(cacheNames => cacheNames.forEach(name => caches.delete(name)))
)
);
Я использую экспресс, поэтому я установил maxAge наsw.js в 0 и даже изменить общедоступный маршрут на статические файлы на глубокий маршрут, но ничего
app.use('/sw.js', express.static(path.resolve('./public/dist/static/sw.js'), {maxAge: 0}));
app.use('/', express.static(path.resolve('./public/dist/static/'), {maxAge: 86400000}));
tools : angular 8.2.4 - workbox 4.3.1
Обновление Удалено рабочее окно и приложение работает, я предполагаю причину их нового пакета Рабочее окно-окно или способ, которым я пытаюсь его использовать. Я поместил его в сервис модуля, который загружается из app.module, затем сервис вызывается из AppComponent ngOnInit. Это может быть неправильный способ инициализации.
настройка кода:
import {Workbox} from 'workbox-window';
@Injectable()
export class WorkerService {
supportWorker: boolean;
supportPush: boolean;
constructor(@Inject(WINDOW) private window: any, private loggerService: LoggerService) {
this.supportWorker = ('serviceWorker' in navigator);
this.supportPush = (this.supportWorker && 'PushManager' in window);
}
initWorker() {
if (this.supportWorker && environment.production) {
const wb = new Workbox('sw.js');
if (wb) {
wb.addEventListener('installed', event => {
if (event.isUpdate) {
// output a toast translated message to users
this.loggerService.info('App.webWorkerUpdate', 10000);
setTimeout(() => this.window.location.reload(), 10000);
}
});
wb.addEventListener('activated', event => {
if (!event.isUpdate) {
this.loggerService.success('App.webWorkerInit', 10000);
}
});
wb.register();
}
}
}
}
Этот компонент приложения, я подумал, что было бы лучше добавить его в main.ts после bootstrapModule.then() но я не знаю, как внедрить службу в этом методе
@Component({
selector: 'app-root',
template: '<route-handler></route-handler>'
})
export class AppComponent implements OnInit {
constructor(private ws: WorkerService) {
}
ngOnInit(): void {
this.ws.initWorker();
}
}