Блог

Главная - Вопросы по программированию - Могу ли я сбросить стиль приложения с помощью PWA и service worker

Могу ли я сбросить стиль приложения с помощью PWA и service worker

#javascript #html #css #node.js #pro&ressive-web-apps

#javascript #HTML #css #node.js #pro&ressive-веб-приложения

Вопрос:

У меня есть PWA, созданный с использованием HTML, CSS и JS с Node.js каждый раз, когда я меняю styles.css приложения, мне приходится загружать его снова, т. е. менять порт. Например, в localhost: 3000 у него был бы старый стиль, но если я загружу его на localhost: 3100, стиль изменится на новый, как я могу сделать так, чтобы кэшированные css-файлы удалялись и загружались вместе с новыми?

Это мой service worker:

 var CACHE_NAME = 'version-1'; // bump this version when you make chan&es.
// Put all your urls that you want to cache in this array
var urlsToCache = [
    'index.html',
    'assets/lo&o-192.pn&',
    'ima&es/airplane.pn&',
    'ima&es/backspace.pn&',
    'ima&es/calcTo&&le.pn&',
    'ima&es/diamond.pn&',
    'ima&es/favicon.pn&',
    'ima&es/hambur&er.pn&',
    'ima&es/history.pn&',
    'ima&es/like.pn&',
    'ima&es/love.pn&',
    'ima&es/menu2.pn&',
    'ima&es/menu3.pn&',
    'ima&es/menu4.pn&',
    'ima&es/menu5.pn&',
    'ima&es/menu6.pn&',
    'ima&es/menu7.pn&',
    'ima&es/menu8.pn&',
    'ima&es/plane.pn&',
    'ima&es/science.pn&',
    'ima&es/settin&s.pn&',
    'ima&es/trash.pn&',
    'styles.css'
];

// Install the service worker and open the cache and add files mentioned in array to cache
self.addEventListener('install', function(event) {
    event.waitUntil(
    caches.open(CACHE_NAME)
        .then(function(cache) {
        console.lo&('Opened cache');
        return cache.addAll(urlsToCache);
        })
    );
});


// keep fetchin& the requests from the user
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
        .then(function(response) {
            // Cache hit - return response
            if (response) return response;
            return fetch(event.request);
        })
    );
});

self.addEventListener('activate', function(event) {
    var cacheWhitelist = []; // add cache names which you do not want to delete
    cacheWhitelist.push(CACHE_NAME);
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
        return Promise.all(
            cacheNames.map(function(cacheName) {
                if (!cacheWhitelist.includes(cacheName)) {
                    return caches.delete(cacheName);
                }
            })
        );
        })
    );
});

Комментарии:

1. Нам нужны более подробные сведения о том, как у вас настроен PWA, если вы кэшируете с помощью service worker, и какова ваша стратегия кэширования, если таковая существует.

2. @Taplar я добавил своего service worker

3. var CACHE_NAME = 'version-1'; // bump this version when you make chan&es. <= вы действительно делаете то, что говорится в вашем комментарии? Потому что обычно стратегия кэширования для обработки обновлений заключается в том, чтобы иметь хэши для ваших файлов. И либо при запуске service worker, либо при запросе ресурса логика проверяет, соответствует ли хэш файла хэшу в манифесте. Если это не одно и то же, service worker затем извлечет новые изменения и заменит версию в кэше.

4. В связи с этим workbox ( developers.&oo&le.com/web/tools/workbox ) имеет предопределенные и поддерживаемые стратегии кэширования, которые могут справиться со всем этим за вас.

5. @Taplar не могу поверить, что я это пропустил! Спасибо, вы спасли мне жизнь!

Ответ №1:

Если вы делаете это для разработки, просто откройте свои инструменты разработки. Выберите вкладку приложения, затем панель service worker. Выберите опцию «Байпас для сети». Я написал статью о лучших практиках разработки service worker, которые могут помочь:

https://love2dev.com/serviceworker/development-best-practices/

Если вам нужно обновить на производстве, это другое. Обычно я выполняю периодический запрос HEAD к сетевому ресурсу (файл CSS в вашем примере). Если ресурс новее кэшированной версии, я обновляю его до последней версии по мере необходимости.

У меня есть и другие методы, которые я время от времени использую. Это зависит от приложения, требований и т.д.