Question

我正在使用Angular 7设置PWA。这是我的问题：如果用户登录到应用程序中，则可以上传个人资料图片。图片将上传到/ assets文件夹中，该文件夹由服务工作者缓存。

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

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

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

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

$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前端的任何位置-应当将其存储在后端数据库的某个位置，然后当用户转到包含页面时，您请求加载该图片。

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

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

如何在服务工作者中刷新图片

1 个答案: