时间戳

首页 > 解决方案 > 如何从 Firebase 获取 PWA 数据

javascript - 如何从 Firebase 获取 PWA 数据

问题描述

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

链接到下载 Firebase 数据的 JSON 文件

这是我在服务工作者中使用的代码

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

标签： javascriptfirebasefirebase-realtime-database

解决方案

您可以为此使用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

推荐阅读