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将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应用程序。该应用程序需要使用一个相对较小的数据库，该数据库适合浏览器缓存，并且更新频率不要太高。

Answer 2

查看您编写的缓存文件名，很遗憾地通知您，当您加载Service Worker时，它不在作用域的根目录中。您无法使用../来缓存文件–您可以通过以下方式解决此问题：将Service Worker放置在项目的根目录中，更改缓存以反映/filename.ext，这可以解决问题。

未捕获（承诺）的TypeError：请求失败

始终毫无例外地指向缓存中的拼写错误（在Service Worker的缓存功能中）或丢失的文件（在主机上），这可能是由于Service Worker位于子目录而不是其根目录中引起的该项目。

将服务人员整合到Symfony项目中的问题

2 个答案: