Чтобы сделать ваше прогрессивное веб-приложение (PWA) доступным без подключения к интернету, вам нужно правильно настроить сервис-воркеры и кэширование ресурсов. Вот основные шаги, которые помогут вам достичь этой цели:
1. **Создание сервис-воркера**: Сервис-воркеры представляют собой скрипты, которые браузер запускает в фоновом режиме, позволяя вашему PWA работать независимо от подключений к сети. Чтобы создать сервис-воркер, создайте файл `sw.js` в корне вашего проекта.
```javascript
// sw.js
const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/styles.css',
'/script.js',
// Добавьте остальные ресурсы (изображения, шрифты и т.д.)
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Если ресурс кэшируется, возвращаем его
if (response) {
return response;
}
return fetch(event.request); // Иначе загружаем из сети
})
);
});
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
```
2. **Регистрация сервис-воркера**: Необходимо зарегистрировать сервис-воркер в вашем основном JavaScript-файле (обычно это `script.js` или `app.js`).
```javascript
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('SW registered: ', registration);
})
.catch(error => {
console.log('SW registration failed: ', error);
});
});
}
```
3. **Кэширование ресурсов**: Убедитесь, что все нужные ресурсы (HTML-страницы, CSS, JS, изображения) указаны в массиве `urlsToCache` в вашем сервис-воркере.
4. **Разработка и тестирование**: После того как всё настроено, запустите локальный сервер (например, с помощью `http-server` или любого другого инструмента), затем откройте ваше приложение в браузере. Можете отключить Wi-Fi, чтобы проверить, работает ли приложение оффлайн.
5. **Тестирование offline-режима**: Вам стоит использовать девелоперские инструменты (DevTools) в Chrome для тестирования работы PWA в оффлайн-режиме. В консоли DevTools перейдите на вкладку "Application", затем выберите "Service Workers" и включите опцию "Offline", чтобы отключить доступ в сеть и протестировать, как приложение будет работать.
После выполнения этих шагов ваше PWA должно быть способно работать без подключения к интернету, используя кэшированные ресурсы через сервис-воркеры.