如何从 Firebase 获取 PWA 数据

Question

我想创建一个从 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');
});

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