I have a webpage application developed using Flutter. I am hosting this on Firebase hosting. There are some data which changes over a long period of time say in 2-3 days. So I am fetching this data through Firebase cloud function.
Is there any way the data sent by the cloud function get cached to cdn? The steps that i tried so far, are caching in the browser only.
Here is my flutter code
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
void main() async {
runApp(MaterialApp(
home: const MyApp(),
));
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var executionTime;
var response;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
floatingActionButton: FloatingActionButton(onPressed: () {}),
body: Column(
children: [
Text("testCdn"),
Text("execution Time =>$executionTime"),
Text("execution Time =>$response"),
],
),
);
}
init() async {
var start = DateTime.now();
print("start => $start");
var headers = {'Accept': 'application/json'};
var dio = Dio();
response = await dio.request(
'https://us-central1-xxxxxxx.cloudfunctions.net/fetchData',
options: Options(
method: 'GET',
headers: headers,
),
);
var end = DateTime.now();
print("response => $response");
print("end => ${end.difference(start).inMilliseconds}");
executionTime = end.difference(start).inMilliseconds;
setState(() {});
}
@override
void initState() {
init();
// TODO: implement initState
super.initState();
}
}
Here is firebase.json
{
"hosting": {
"target": "flutter",
"public": "build/web",
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "'public, max-age=300, s-maxage=600'"
}
]
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
},
{
"source": "/fetchData/**",
"destination": "/index.html"
}
]
}
}
and here is my cloud function
var globalTime = new Date();
var globalData = "some global static data"
const functions = require("firebase-functions");
const cors = require("cors");
exports.fetchData = functions.https.onRequest(async (req, res) => {
var corsFn = cors();
var localTime = new Date();
await corsFn(req, res, async function () {
var body = req.body;
res.set("Cache-Control", "public, max-age=300, s-maxage=600");
res.status(201).send({
time: localTime + globalTime,
data: globalData,
});
});
});
with this, I am able to cache the cloud function data but only in the browser. What I want is to cache in Firebase global cdn.
To explain it further:
In my cloud function, I am returning two DateTime String one is set in global Variable and another is set in local variable. Upon initial loading in Chrome, the response time is consistently around 400-600 ms. However, upon subsequent reloads, this time significantly improves to approximately 90-150 ms. Notably, the values of both the local and global timestamps remain consistent across these reloads.
In contrast, when accessing the function in Safari for the first time, the response time mirrors that of Chrome's initial load, hovering between 400-600 ms. Despite changes in the displayed datetime, the global datetime remains constant. Upon reloading, Safari exhibits a similar improvement in response time to Chrome, ranging between 90-110 ms, while both local and global timestamps remain unchanged. –
I tried in brave and other browser as well. The behaviour is same upon first load i.e takes 400-600 ms and local variable get updated with new value.
