Question

当用户在其设备上“安装” PWA时，有一种下载资产文件夹的方法吗？我需要为用户预缓存大约300MB的图像（地图图块），我的用户将位于没有连接的区域。而且我想知道此“安装”是否创建了一些本地文件夹，可以将图像下载到该本地文件夹，或者不幸的是，我需要使用本机...

我已经尝试了一些可用于我的地图解决方案（leaflet）的库，但是这些库仅以blob格式缓存IndexedDB中的PNG，我认为这不是一个很好的解决方案这些海量数据。

Answer 1

您可以使用pre-fecth策略，以确保在安装Service Worker时下载所有静态资产并在缓存中可用：

const mapTilesToCache = [
  '/mapFolder/',
];

const staticCacheName = 'tiles-cache';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(staticCacheName)
    .then(cache => {
      return cache.addAll(mapTilesToCache);
    })
  );
});

但是请记住，这种策略通常用于应用程序外壳文件（小于300MB）。如果服务工作者无法下载您在“安装”阶段定义的资源，它将中止其安装。

一旦文件位于缓存中，就可以将其提供给用户：

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
    .then(response => {
      if (response) {
        // return the file from the cache
        return response;
      }

    }).catch(error => {
      // Respond with custom offline page
    })
  );
});

有什么办法可以在PWA中缓存多个文件？

1 个答案: