如何从 Firebase 获取 PWA 数据

Posted 2023-03-14

【中文标题】如何从 Firebase 获取 PWA 数据

【英文标题】：How to fetch data from firebase for PWA

【发布时间】：2018-08-01 13:34:27

【问题描述】：

我想创建一个从 firebase 获取数据的 PWA。加载页面后，从 Firebase 中检索 ADS（以对象的形式）然后显示。我想要的是，一旦页面被加载，如果用户失去连接或离线，缓存会存储在用户连接时加载的所有对象，并使它们可用于离线使用，即没有连接到互联网。

Link to Download JSON FILE of firebase data

这是我在 service worker 中使用的代码

var cacheName = 'test me';
const filesToCache = [
'./',
'home.html',
'details.html',
'/css/main.css',
'/css/home.css',
'/images/nokia.png',
'/js/app.js',
'/js/main.js',
'/js/home.js'
 ];   

self.addEventListener('install', (event) => 
event.waitUntil(
    caches.open('v1')
        .then(res => 
            console.log('wait.........!')
            return res.addAll(filesToCache);
        )
);
console.log('installed');
);

self.addEventListener('activate', (event) => 
console.log('activated');
);

【参考方案1】：

您可以为此使用CacheAPI：

const url = '/myAPI/endpoint'
fetch(url).then((res) => 
  return caches.open('v1').then((cache) => 
    return cache.put(url, res)
  )
)

要检索它：

caches.open('v1').then((cache) => 
  cache.match('/myAPI/endpoint').then((res) => 
    //res is the Response Object
  )
)

您可以在这里找到更多信息：https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker

【讨论】：

如何从 firebase 获取数据，然后将其添加到我的缓存中，我是缓存中的新手并获取。谢谢

我认为 Firebase 获得了关于该主题的相当不错的文档：firebase.google.com/docs/database/rest/retrieve-data 和一些示例：github.com/firebase/quickstart-js 我认为您的要求比如何在缓存中保存数据更广泛。无论如何希望它有所帮助！