Witam,
próbuję zrobić ze swojej strony aplikację PWA.
Jestem na etapie tworzenia wersji offline strony, udało mi się ogarnąć to na 2 sposoby:
- wybieram które strony mają zapisać się w cache i pobierać w braku internetu,
- przy braku internetu wyświetlanie strony o braku internetu.
Problem w tym że chcę połączyć te 2 sposoby, czyli niektóre strony dodać do cache a jeśli nie ma ich w cache to zwrócić stronę o braku internetu.
Ktoś kombinował z czymś takim i jest w stanie doradzić jak się za to zabrać?
Pozdrawiam
Możesz przecież sprawdzić czy w cache jest dana strona.
Tylko właśnie nie mogłem dojść jak bo po wejściu na dany adres przeglądarka analizuje z powiedzmy 50 plików i nie wiem jak zrobić żeby sprawdziła mi że jest np. /index.php a nie ma /index2.php.
Próbowałem pobrać adres bieżącej strony ale nie szło mi to jakoś.
A po co sprawdzać będąc na index.php czy w cache jest index2.php?
Próbowałem przechwycić linka metodami z js np:
window.location.href
document.URL
ale nie szło mi to coś.
Miałem problem z tym że kolejne sprawdzane pliki przez js jakby nadpisywały mi te zmienne i i tak wychodziło tak że danego pliku w cache nie ma.
Tutaj np.
https://googlechrome.github.io/samples/service-worker/custom-offline-page/
Sprawdzam czy jest sieć jesli nie ma, daje userowi stronę offline.html
Za to tu podaję jakie pliki mają być wgrane do cache:
self.addEventListener('install', event => { event.waitUntil( caches.open('v1').then(cache => { return cache.addAll([ '/', '/helloword.php', 'css.css', ]); }, error => { console.log(`Installation failed with error: ${error}`); }) ); }); self.addEventListener('activate', event => { let cacheKeepList = ['v1']; event.waitUntil( caches.keys().then( keyList => { return Promise.all(keyList.map(function(http://www.php.net/key) { if (cacheKeepList.indexOf(http://www.php.net/key) === -1) { return caches.delete(http://www.php.net/key); } })); }) ); }); self.addEventListener('fetch', event => { if (event.request.method != 'GET') return; event.respondWith(async function() { const cache = await caches.open('v1'); const cachedResponse = await cache.match(event.request); if (cachedResponse) { event.waitUntil(cache.add(event.request)); return cachedResponse; } return fetch(event.request); }()); });
Udało ci się to jakoś ogarnąć ?
nie udało mi się.
Odpuściłem sobie bo nie miałem czasu na to.
Jak będę miał chwilę wrócę do tematu.
Może jakaś mądra głowa coś doradzi w międzyczasie.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)