javascript - 如何从 Firebase 获取 PWA 数据

Question

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

Link to Download JSON FILE of firebase data

这是我在服务人员中使用的代码

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');
});

Answer 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