Я настраиваю новый проект VueJS и внедрил workbox-backgroundSync в моем прогрессивном веб-приложении.Чтобы протестировать этот плагин для рабочего ящика, мне нужно отключить мое устройство (chrome) от интернета и запустить POST-запрос.В Chrome этот запрос находился в состоянии ожидания в течение пары минут, даже без подключения к Интернету.Поэтому мое приложение ожидает ответа на запрос.
Мой POST-запрос:
axios
.post('/createrecipe', recipe)
.then(response => {
commit('createRecipes', recipes);
commit('setSnackbar', { text: "Recipe was created. ( " + response.data.status + response.status + " )", color:'success', snack:true });
console.log("Response from Server for create Recipe: ", response);
})
.catch(error => {
commit('setSnackbar', { text: "Your Post will be stored and send by Internet-Connection", color: 'warning', snack: true });
console.log(error)
});
Мой ServiceWorker:
const matchCb = ({url, event}) => {
return (url.pathname === '/api/createrecipe');
};
const bgSyncPlugin = new workbox.backgroundSync.Plugin('createdRecipes-post-storage-offline', {
maxRetentionTime: 24 * 60, // Retry for max of 24 Hours
});
workbox.routing.registerRoute(
matchCb,
workbox.strategies.networkOnly({
plugins: [bgSyncPlugin]
}),
'POST'
);
Я прервал работу сети в Chrome-devtoolпод вкладкой сети и фоновый процесс прошел успешно.Но это не лучшее решение для пользователей, потому что они не знают, как управлять devtool.
Я ожидаю, что запрос будет отменен, в то время как Chrome не имеет подключения к Интернету.
Здесьэто снимок экрана с запросом в состоянии ожидания, а не с ошибкой:
введите описание изображения здесь
Примечание: мое веб-приложение работает под localhost.