Время чтения: 2 мин.
Для реализации механизма обновления фронтенда Nuxt.js при выходе новой версии можно использовать несколько подходов:
1. Проверка версии при загрузке приложения
// В файле plugins/check-update.client.js
export default async ({ app }) => {
if (process.client) {
const currentVersion = process.env.npm_package_version
const lastVersion = await fetch('/version.json?t=' + Date.now())
.then(res => res.json())
.then(data => data.version)
.catch(() => currentVersion)
if (currentVersion !== lastVersion) {
const shouldUpdate = confirm('Доступна новая версия приложения. Обновить?')
if (shouldUpdate) {
localStorage.setItem('shouldRefresh', 'true')
window.location.reload(true)
}
}
if (localStorage.getItem('shouldRefresh') === 'true') {
localStorage.removeItem('shouldRefresh')
// Очистка кеша
caches.keys().then(cacheNames => {
cacheNames.forEach(cacheName => {
caches.delete(cacheName)
})
})
}
}
}2. Использование Service Worker (рекомендуемый способ)
// В файле nuxt.config.js
export default {
pwa: {
workbox: {
clientsClaim: true,
skipWaiting: true,
offlineGoogleAnalytics: true,
runtimeCaching: [
// настройки кеширования
]
}
}
}3. Периодическая проверка обновлений
// В компоненте или плагине
setInterval(async () => {
const res = await fetch('/version.json?t=' + Date.now())
const data = await res.json()
if (data.version !== process.env.npm_package_version) {
// Показать уведомление об обновлении
}
}, 3600000) // Проверка каждый час4. Создание файла версии
Создайте файл version.json в папке static:
{
"version": "1.0.0"
}И обновляйте его при каждом деплое.
5. Автоматическое обновление при обнаружении новой версии
// В плагине или основном layout
if (process.client) {
window.addEventListener('load', () => {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(reg => {
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// Показать уведомление об обновлении
showUpdateNotification()
}
}
})
})
})
}
let refreshing = false
navigator.serviceWorker.addEventListener('controllerchange', () => {
if (!refreshing) {
refreshing = true
window.location.reload()
}
})
})
}Рекомендации
- Для SPA-режима Nuxt используйте первый или третий подход.
- Для универсального режима (SSR) лучше подходит подход с Service Worker.
- Всегда уведомляйте пользователя перед обновлением, чтобы не прерывать его работу.
- Для критических обновлений можно принудительно перезагружать страницу.
Не забудьте добавить плагин в nuxt.config.js:
export default {
plugins: [
'~/plugins/check-update.client.js'
]
}
Добавить комментарий