Я начал использовать интегрированного сервис-воркера моего приложения Create-React-App. Я также реализовал диалог, чтобы сообщить пользователю, что доступно обновление. При нажатии кнопки обновления служебный воркер обновляется и страница перезагружается.
![enter image description here](https://i.stack.imgur.com/Rw8vr.png)
Here is the code I am using to make this work:
index.js
serviceWorker.register({
onSuccess: () => store.dispatch({ type: SW_INIT }),
onUpdate: registration =>
store.dispatch({ type: SW_UPDATE, payload: registration }),
});
newVersionDialog.js
const serviceWorkerRegistration = useSelector(state =>
getserviceWorker(state).serviceWorkerRegistration);
const updateServiceWorker = () => {
setLoader(true)
const registrationWaiting = serviceWorkerRegistration.waiting;
if (registrationWaiting) {
registrationWaiting.postMessage({ type: 'SKIP_WAITING' });
registrationWaiting.addEventListener('statechange', e => {
if (e.target.state === 'activated') {
window.location.reload()
}
});
}
};
reducer.js
const initalState = {
serviceWorkerInitialized: false,
serviceWorkerUpdated: false,
serviceWorkerRegistration: null,
}
const serviceWorker = (state = initalState, action) => {
switch (action.type) {
case SW_INIT:
console.log("INIT")
return {
...state, serviceWorkerInitialized: !state.serviceWorkerInitialized
}
case SW_UPDATE:
return {
...state,
serviceWorkerUpdated: !state.serviceWorkerUpdated,
serviceWorkerRegistration: action.payload,
}
default:
return state
}
}
The "Bestätigen" Button trigger the updateServiceWorker method.
I followed this guide to achieve this behavior:
https://medium.com/better-programming/let-users-know-when-you-have-updated-your-service-worker-in-create-react-app-b0c2701995b3
Вот мой вопрос: Даже если это работает абсолютно нормально в Google Chrome, это диалоговое окно появляется дважды в сафари ... Я нажимаю «Обновить», и страница перезагружается, но диалоговое окно снова отображается. Только после нажатия второй кнопки кажется, что сервис-воркер обновляется, и диалог исчезает после перезагрузки.
Вот гифка для лучшего понимания:
введите описание изображения здесь
Есть идеи, почему это работает в Chrome, но не в Safari?
С уважением
Мартин