Question

我目前正在开发带有索引文件的简单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时，当我查看缓存时，它确实向我显示了所有文件。但是当我脱机然后点击那个提交按钮进入结果页面时，它不会加载缓存。

为什么我的服务人员仅缓存访问的页面？

0 个答案: