В настоящее время я разрабатываю простой PWA с индексным файлом, который содержит поле ввода, в котором вы можете ввести свой штрих-код и нажать «Отправить».Затем будет отображен PHP-файл, показывающий некоторую информацию о наркотиках, полученных из базы данных MySQL.
Сейчас я пытаюсь кэшировать оболочку приложения для загрузки необходимых ресурсов (html, css, сценарии и т. Д.)когда приложение работает в автономном режиме.Я вроде как преуспел в этом, но, похоже, он работает, только когда страница, которую вы пытаетесь кэшировать, уже посещена один раз, когда приложение было в сети.И это только в том случае, когда я регистрирую того же работника службы на странице результатов, а не только на странице индекса.
По-видимому, этот вид кэширования, в котором кэшируются только посещенные страницы, называется «частичным».кэширование моим профессором.Мне не нужно это частичное кеширование, я хочу полное кеширование, при котором работник службы один раз регистрируется в файле индекса, а затем кэширует все необходимые файлы для кэширования, чтобы я мог использовать его в автономном режиме.
Вот так выглядит мой сервисный работник:
var cacheName = 'pillexplainerPWA';
var filesToCache = [
'http://localhost:80/MedicationProject/',
'http://localhost:80/MedicationProject/index.html',
'http://localhost:80/MedicationProject/result.php',
'http://localhost:80/MedicationProject/result2.html',
'http://localhost:80/MedicationProject/scripts/app.js',
'http://localhost:80/MedicationProject/styles/main.css',
'http://localhost:80/MedicationProject/styles/result.css',
'http://localhost:80/MedicationProject/images/back-button.jpg',
'http://localhost:80/MedicationProject/images/barcode.jpg'
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(e) {
console.log('[ServiceWorker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
Может кто-нибудь объяснить мне, что я делаю неправильно, и что нужно настроить для этого кода, чтобы он не кэшировал только то, чтопосещается, но все в тот момент, когда загружается index.html?Странно то, что когда я заглядываю в кеш при запуске index.html ... он показывает мне все мои файлы, которые там находятся.Но когда я перехожу в автономный режим, а затем нажимаю кнопку отправки, чтобы перейти на страницу результатов, кэш не загружается.