如何在service worker中刷新图片

Question

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

据我了解服务工作者，应用程序本身通过项目主文件夹中的文件名识别更新。如果文件名更改，服务人员将获取新版本。

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

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

这段代码对我来说效果很好，但我不确定这是否是使用 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 将 return 为您提供最新的缓存图像（如果您已将查询 URL 设置为缓存在您的 ngsw-conf.json 中）。

如果您不想让自己的后端服务来做这个；您可以使用诸如 Firebase 之类的服务，它有几个用于与 Angular 通信的库。您可以在此处使用代码示例进行检查：https://firebase.google.com/docs/storage/web/upload-files

如何在service worker中刷新图片

How to refresh pictures in the service worker

browser-cache

angular

angular-service-worker