在 PWA 的 service worker 中一次兑现所有静态资产

Question

我的问题是关于在 PWA 中的服务工作者中一次性缓存存在于单独目录中的所有静态资产（对我来说是 'static'）。正如我们所知，我们需要提供一条通往要兑现资产的路径。例如，如果我们想缓存图像 'img.png' 那么我们需要做这样的事情；

cache.add(/static/img.png)

其中缓存是 caches.open() 返回的元素。如果我们想添加多个文件，我们可以这样做；

assets = [
'static/img1.png',
'static/img2.png'
] // and so on.

cache.addAll(assets);

我想知道的是，如果有任何方法可以直接传递静态文件夹中存在的所有文件，例如；

cache.add(/static);

但上面的行不起作用，因为我们只能传递有效路径 (URL) 而不是文件夹或文件。

Answer 1

现在我发布这个问题已经1个月了。在做了一些研究（实际上很多）之后，我认为没有任何办法可以这样做。一次在 PWA 中缓存资产是不可能的，我们需要为每个资产单独提供路径（url），并且它不受资产是否位于同一目录（或其他位置）或不是。重要的是给定的路径是否有效。

Answer 2

您可以以编程方式生成静态资产列表，并使用 Django TemplateView 呈现包含静态资产列表的 sw.js 文件。

sw.js 位于您的 Django templates 目录中

const CACHE_NAME = 'YourApp-1.0.0'    
const appShell = [
    {% for asset_url in static_assets %}'{{ asset_url }}',{% endfor %}
].map((partialUrl) => `${location.protocol}//${location.host}${partialUrl}`);

addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    await cache.addAll(appShell);
  })());
});

views.py

class ServiceWorkerView(TemplateView):
    template_name = 'sw.js'
    content_type = 'application/javascript'
    name = 'sw.js'

    def get_context_data(self, **kwargs):
        storage = ManifestStaticFilesStorage()
        static_assets = []
        for folder in ('css', 'icons', 'images', 'js', 'webfonts'):
            static_assets += list(get_files(storage, location=folder))
        return {
            'static_assets': static_assets
        }

urls.py

urlpatterns = [
    # Service Worker
    path('sw.js', views.ServiceWorkerView.as_view(), name=views.ServiceWorkerView.name), ]

在 PWA 的 service worker 中一次兑现所有静态资产

Cashing all the static assets at once in a service worker in PWA

django

caching

service-worker

progressive-web-apps