Как исключить кэширование страниц рабочего сервиса при использовании предварительного просмотра CMS (в iframe) - PullRequest
0 голосов
/ 19 февраля 2019

Я работаю над сайтом, который регистрирует работника службы, и он отлично работает, за исключением случаев редактирования страниц с помощью CMS.Сайт использует Craft CMS, которая имеет отличный вариант Live Preview для редактирования контента (в iframe).У работника службы возникают проблемы с сохранением и редактированием, поскольку страницы кэшируются, но я не уверен, как исключить область прямого просмотра из кэша.

const version = 'V0.01';

const assetCacheName = version + 'assets';
const imageCacheName = 'images;';
const pagesCacheName = 'pages';

const cacheList = [
    assetCacheName,
    imageCacheName,
    pagesCacheName
];

addEventListener('install', event => {
    event.waitUntil(
        caches.open(assetCacheName)
        .then( assetCache => {
            return assetCache.addAll([
                '/assets/css/style.css',
                'assets/js/min/scripts.min.js',
                'offline.html'
            ]);
        })
    );
});

addEventListener('activate', event => {
    event.waitUntil(
        caches.keys()
        .then( cacheNames => {
            return Promise.all(
                cacheNames.map( cacheName => {
                    if (!cacheList.includes(cacheName)) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
        .then( () => {
            return clients.claim();
        })
    );
});

addEventListener('message', messageEvent => {
    if (messageEvent.command == 'trimCaches') {
        trimCache(pagesCacheName, 20);
        trimCache(imageCacheName, 50);
    }
});

addEventListener('fetch', event => {
    const request = event.request;
    if(request.headers.get('Accept').includes('text/html')) {
        if(!/\/admin\/.+/.test(request.url)) {
            console.log("this isn't an admin page");
            event.respondWith(
                caches.match(request)
                .then( responseFromCache => {
                    if (responseFromCache) {
                        event.waitUntil(
                            fetch(request)
                            .then( responseFromFetch => {
                                caches.open(pagesCacheName)
                                .then( pagesCache => {
                                    return pagesCache.put(request, responseFromFetch);
                                });
                            })
                        );
                        return responseFromCache;
                    }
                    return fetch(request)
                    .then( responseFromFetch => {
                        const copy = responseFromFetch.clone();
                        event.waitUntil(
                            caches.open(pagesCacheName)
                            .then( pagesCache => {
                                return pagesCache.put(request, copy);
                            })
                        );
                        return responseFromFetch;
                    })
                    .catch( error => {
                            return caches.match('/offline.html');
                    });
                })
            );
            return;
        }
    }
    if(request.headers.get('Accept').includes('image')) {
        event.respondWith(
            caches.match(request)
            .then( responseFromCache => {
                if (responseFromCache) {
                    event.waitUntil(
                        fetch(request)
                        .then( responseFromFetch => {
                            caches.open(imageCacheName)
                            .then( imageCache => {
                                return imageCache.put(request, responseFromFetch);
                            });
                        })
                    );
                    return responseFromCache;
                }
                return fetch(request)
                .then( responseFromFetch => {
                    const copy = responseFromFetch.clone();
                    event.waitUntil(
                        caches.open(imageCacheName)
                        .then( imageCache => {
                            return imageCache.put(request, copy);
                        })
                    );
                    return responseFromFetch;
                });
            })
        );
        return;
    }
    event.respondWith(
        caches.match(request)
        .then( responseFromCache => {
            if (responseFromCache) {
                return responseFromCache;
            }
            return fetch(request);
        })
    );
});

function trimCache(cacheName, maxItems) {
    cacheName.open( cache => {
        cache.keys()
        .then( items => {
            if (items.length > maxItems) {
                cache.delete(items[0])
                .then(
                    trimCache(cacheName, maxItems)
                );
            }
        });
    });
}
...