Question

我想创建一个PWA，从Firebase中获取数据。页面加载后，将从firebase中检索ADS（以object的形式），然后显示。我想要的是，如果用户丢失了连接或处于脱机状态，则一旦页面被加载，缓存就会存储所有在用户具有连接时加载的对象，并使它们可用于脱机使用，即无需连接互联网。

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

如何从Firebase中获取PWA的数据

1 个答案: