Question

想法是允许注册用户上传自己的个人资料图片，并对所有访问者（不仅是注册访客）有效的个人资料图片进行有效的缓存。

我有PWA托管在Google云外部，但通过Firebase管理其用户，并使用Firebase存储存储图片。在自定义子域上也使用firebase-hosting似乎是一个好主意，该子域将用作代理/访问管理器等，以访问firebase-storage（又可以通过Cloudflare进行缓存-可选）。

基本上，我们发现自己拥有（私有托管：在主域上）和（firebase托管：在子域上）。我们该如何管理谁在主应用程序上登录到子域，而又不传递会影响我们要从子域获取的缓存的元数据？

在这个阶段， 我几乎不知道firebase如何管理其会话。
任何想法的建议，将不胜感激！

PWA通过JS事件通知用户登录/注销：

firebase.auth().onAuthStateChanged((user) => {
    if (user) {
        //user is logged in
    } else {
        //user is logged out
    }
}

我在这里检查了很多问题，例如： Cache images received from Firebase Storage in PWA application Set cache to files in Firebase Storage Firebase storage downloadURL file structure How to cache Firebase storage downloaded images

要使用JS在firebase-storage上上传图片（来自私人托管），我们可以使用：

<progress value="0" max="100" id="uploader">0%</progress><br />
<input type="file" id="photo" />
<script>
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('photo');
fileButton.addEventListener('change', function(e) {
    var user = firebase.auth().currentUser;
    var ref = firebase.storage().ref();
    var file = e.target.files[0];
    var name = (user.uid+'/1');
    var metadata = {
        'contentType': file.type,
        'cacheControl': 'private, max-age=15552000'
    };
    var task = ref.child(name).put(file, metadata);
    task.on('state_changed', 
        function progress(snapshot) {
            var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            uploader.value = percentage;
        },
        function error(err) {
            console.log(err);
        },
        function complete() {
            console.log('all done');
        }
    );
    task
    .then(snapshot => snapshot.ref.getDownloadURL())
    .then((url) => {
        console.log(url); //this "url" is to be saved on the profile for the authenticated user and used from within the firebase hosting
    })
    .catch(console.error);
});
</script>

基本上，当图片保存在firebase-storage上时，我们可以为用户个人资料保存“ url”。我们想使用Firebase托管来处理对Firebase存储的保存（因为在保存到Firebase存储之前添加裁剪和其他图像操作将非常有用，因此我认为我们需要能够共享会话数据）。将图像保存在Firebase存储中后，我想通过firebase-hosting实现缓存。

如何在Firebase托管上为PWA缓存Firebase存储图片

0 个答案: