Страница обновления кэша PWA

У меня проблема с pwa моего сайта. Мне нужно обновить кеш-память с помощью сервисного работника, и я нахожу много кодов в Интернете, но ни один из них не работает. Я должен что-то пропустить.

Я хочу, чтобы после простой перезагрузки страницы обновление было выполнено, также, когда мы нажимаем на ярлык PWA, чтобы все обновлялось автоматически. Вот мой манифест и мой сервис-воркер с кодом, который я использую.

Как вы думаете ?

заранее спасибо

//Manifest -----

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "white",
  "icons": [{
      "src": "/img/icon-128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "/img/icon-144.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "/img/icon-152.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "/img/icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "/img/icon-256.png",
        "sizes": "256x256",
        "type": "image/png"
      }, {
        "src": "/img/icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }]
}

-

//Service-Worker -----

var cacheName = 'Test';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
   ...
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

self.addEventListener('activate', function(event) {
  var cacheKeeplist = ['cacheName'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheKeeplist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
11 000
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема очень проста: ваш код Service Worker не обновляет кеш.

Если вы посмотрите на обработчик fetch, он либо возвращает ответ из кеша, либо из сети. И если он возвращает ответ из сети, он НЕ кладет новую версию в кеш.

Если вы посмотрите на обработчик install, он кэширует все перечисленные файлы. Эти файлы (по крайней мере, так кажется) названы так, что имена остаются одинаковыми от версии к другой. Значение: ваш style.css — это всегдаstyle.css, и когда SW закэширует его, он будет доволен кешированной версией до конца времен. Он понятия не имеет, что есть новая версия, потому что имя такое же.

Как это исправить?

Вы можете изменить код ПО, чтобы он всегда проверял сеть на наличие новых обновлений файлов (примеры здесь: https://serviceworke.rs/strategy-cache-and-update.html). Вы также можете иметь уникальные имена для файлов, которые меняются при каждом развертывании.

Другим способом может быть использование библиотеки, которая обрабатывает все это за вас. Workbox имеет несколько различных стратегий кэширования на выбор (https://developers.google.com/web/tools/workbox/modules/workbox-strategies).

Обновлено: Как обновить приложение, которое было добавлено на рабочий стол?

Я не совсем понимаю, почему ваше приложение, добавленное на главный экран, не обновляется, когда вы снова открываете его. Возможно, на нем работает какая-то более старая версия, которая все еще имеет более старую версию того или иного. Однако вы можете вручную заставить Service Worker проверять наличие обновлений. Вы можете использовать registration.update(), чтобы запустить проверку новой версии скрипта SW, и, если она будет найдена, принудительно обновить страницу (location.reload()) или показать пользователю уведомление и запросить обновление. Документация здесь: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

Если у вас есть приложение, которое пользователь держит открытым в течение длительного времени (в мобильном телефоне или на вкладке браузера), было бы неплохо автоматически запрашивать обновления ПО, например. раз в день что ли. Вы даже можете проверять наличие обновлений каждый раз, когда вкладка / приложение активируется / фокусируется. Частота, конечно, зависит от вашего приложения, варианта использования и т. д. :)

Привет, большое спасибо за ваш очень четкий ответ. Я смог решить свою проблему, в следующий раз, когда я буду использовать workboxe, я предпочитаю делать это «вручную» для этого проекта;). Небольшой вопрос по установке приложения. Код в браузере обновляется благодаря обновлению, но не коду приложения (домашний экран), даже когда я выхожу из приложения. У вас есть трек для этого?

Valentin 11.07.2019 15:54

@Valentin Валентин, я немного добавил об этом. Надеюсь, это поможет!

pate 11.07.2019 18:58

@pate Можете ли вы сказать, что мне нужно изучить, чтобы реализовать этот показать пользователю уведомление и попросить обновить.?

Arup Rakshit 02.04.2021 08:51

Другие вопросы по теме