angular - 如何在service worker中刷新图片

Question

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

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

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

我尝试在 Angular Assets 文件夹中使用 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 将向您返回其最新的缓存图像(如果您已将查询 URL 设置为缓存在您的 ngsw-conf.json 中)。

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