Offline sayfa yapmak?
Updated
•1 min readOffline sayfamızı cache olarak ilk site girişinde tarayıcıya yüklememiz gerekiyor bunu Server Worker ile yapıyoruz örneğin;
sw.js
const CACHE_NAME = 'site-v1';
const OFFLINE_URL = '/offline.html';
// 1. Kurulum: Offline sayfasını hafızaya (Cache) al
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.add(new Request(OFFLINE_URL, { cache: 'reload' }));
})
);
});
// 2. İstekleri Yakala: İnternet kesilirse hafızadaki sayfayı göster
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
event.respondWith(
fetch(event.request).catch(() => {
return caches.open(CACHE_NAME).then((cache) => {
return cache.match(OFFLINE_URL);
});
})
);
}
});
ve `offline.html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>No Connection</title>
</head>
<body>
İnternete Bağlı Değilsiniz!
</body>
</html>
css ve js yazacaksanız inline olması daha sağlıklı olur.
son olarak index sayfamıza
// Tarayıcı Service Worker'ı destekliyor mu kontrol et
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('Service Worker Kaydedildi!', reg))
.catch(err => console.error('Kayıt Başarısız:', err));
});
}
bu kadar