如何在 service worker 中刷新图片

Question

我正在使用 Angular 7 设置 PWA。这是我的问题： 如果用户登录应用程序，他可以上传个人资料图片。图片会上传到 /assets 文件夹，由 service worker 缓存。

据我了解服务工作者，应用程序本身通过项目主文件夹中的文件名识别更新。如果文件名发生变化，Service Worker 将获得新版本。

也许您现在看到了问题：如果用户上传图片，则不会更改文件名，因为它不是来自 Angular 项目的更新。因此，用户会长时间看到他的“旧”个人资料图片，或者如果他刷新浏览器缓存。

我尝试使用 php 在 angular assets 文件夹中上传个人资料图片。这是正确的方法吗？

这段代码对我来说效果很好，但我不确定这是否是使用 PWA 保存图片的正确方法。我希望 Service Worker 缓存我的图片，但如果用户上传图片，我希望立即刷新。

$path = '../assets/img/profile_pictures/';

if (isset($_FILES['file'])) {
    $originalName = $_FILES['file']['name'];
    $ext = '.' . pathinfo($originalName, PATHINFO_EXTENSION);
    $generatedName = $_POST['id'];
    $filePath = $path . $generatedName . '.png';

    if (!is_writable($path)) {
        echo json_encode(array(
            'status' => false,
            'msg' => 'Destination directory not writable.'
        ));
        exit;
    }

    if (move_uploaded_file($_FILES['file']['tmp_name'], $filePath)) {
        echo json_encode(array(
            'status' => true,
            'originalName' => $originalName,
            'generatedName' => $generatedName
        ));
    }
} else {
    echo json_encode(
        array('status' => false, 'msg' => 'No file uploaded.')
    );
    exit;
}

Answer 1

听起来您想要实现的是允许用户更新他们的个人资料图片。这不应该存储在 Angular 前端的任何地方——它应该存储在后端数据库的某个地方，然后当用户转到包含页面时，你会发出加载该图片的请求。

这样，他们每次访问该页面时，都会对数据提出新的请求。除非他们没有互联网连接；在这种情况下，Service Worker 将返回其最新的缓存图像（如果您已将查询 URL 设置为缓存在 ngsw-conf.json 中）。

如果您不想让自己的后端服务来执行此操作；您可以使用诸如 Firebase 之类的服务，该服务具有多个用于与 Angular 通信的库。你可以在这里查看代码示例：https://firebase.google.com/docs/storage/web/upload-files