如何在服务辅助角色中刷新图片

Question

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

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

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

我尝试在角度资产文件夹中使用 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