将服务工作者集成到Symfony项目中的问题

Question

我正在尝试将Service Worker集成到我的Symfony项目中，以便缓存一些文件并将我的页面制作成PWA并使它脱机工作。

可悲的是，我偶然遇到了一个问题，并且我已经尝试修复了一个星期，但没有成功。

我的问题在我的Service Worker js文件中。我实际上能够调用该服务，但找不到其中的页面，由于找不到js文件中链接的页面，因此产生了错误。

这是我的代码sw.js：

var cacheName = 'hello-pwa';
var filesToCache = [
'../manifest.json',
'../favicon.ico',
'../../../templates/User/User.html.twig'
];

/* 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);
    })
  );
});

manifest.json和favicon缓存很好，但是当我添加'../../../templates/User/User.html.twig'时，出现以下错误（未捕获（承诺）TypeError：请求失败）。

请帮我一个整周都在解决这个问题的人。

这是我的文件夹的图像：https://imgur.com/a/cb8YYOe

Answer 1

在Web服务器上，Symfony使用Twig来编译树枝模板文件，直到纯PHP代码。然后，PHP将php文件转换为供客户端Web浏览器使用的html文件。网络浏览器读取html，css和js文件，而不读取twig或php文件。问题示例中的filesToCache数组应重命名为urlsToCache。urlsToCache不能包含User.html.twig文件，而应包含诸如../user之类的URL。

有两个用于生成html文件的选项。将数据从Symfony控制器传递到树枝页面，并生成要静态缓存的用户html文件。或者让树枝模板为网页的外观生成轮廓。在浏览器中动态更新网页。在线时，使用Ajax调用从服务器检索数据并缓存在localStorage或indexedDB中。脱机时，从缓存中检索数据以更新网页。

并非每个应用程序都可以转换为可以脱机工作的渐进式Web应用程序。该应用程序需要使用一个相对较小的数据库，该数据库适合浏览器缓存，并且更新的频率不要太高。