Serve static assets with an efficient cache policy. I get this if I audit my app. I added this code to nuxt.config but this would help.
render: {
static: {
maxAge: 2592000
}
},
its by default caching static assets 1h in browser. Where can I change it. or How?
You should configure your headers for your static files with Firebase:
https://firebase.google.com/docs/hosting/full-config#headers
// in firebase.json
"hosting": {
// ...
// Add the "headers" attribute within "hosting", override cache control
"headers": [ {
"source": "**/*.#(jpg|jpeg|gif|png)",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=2592000"
} ]
}
]
}
This should give you the desired cache control values, depending on what you want to set there.
Related
I want to initiate FilePond with pre-populated images like this:
FilePond.create(inputElement, {
"storeAsFile": true,
"files": [
{
"source": "http://localhost/products/storage/main/dark.jpg",
"options": {"type":"local"}
}
]
});
But I got this error: Error during load. 400 (can't load URL)
I want to use FilePond in replace input file mode.
I can fix error by setting server load URL and it will load images properly but then when I want to upload new files it try to send files to server URL and don't consider "storeAsFile": true option.
Problem solved. I should use something like this:
FilePond.create(inputElement, {
"storeAsFile": true,
"server": {
"load": "http://localhost/products/storage/",
},
"files": [
{
"source": "main/dark.jpg",
"options": {"type":"local"}
}
]
});
and I shouldn't set any thing like server: {'url': 'anything', 'load': 'other url'} option.
I have a question about rewrite configurations on Vercel, very similar to this vercel discussion. My problem is essentially the same but reverse:
I have a site on vercel (main.vercel.app), and I would like to rewrite different pages to other vercel sites. So what I want is:
main.vercel.app/page-a --> page-a.vercel.app
main.vercel.app/page-b --> page-b.vercel.app
When I tried this configuration, it would correctly load the page, but all the assets (page-a.vercel.app/styles.css etc.) would not be loaded:
{
"rewrites": [
{
"source": "/page-a",
"destination": "https://page-a.vercel.app/"
}
]
}
When I tried this configuration, it would redirect all the assets, but not the initial page:
{
"rewrites": [
{
"source": "/page-a(.*)",
"destination": "https://page-a.vercel.app$1"
}
]
}
So what's the correct configuration supposed to be?
What if you try merging the two rewrites?
According to you, one rewrite pattern is correct for the main page, and the other is for all other assets other than the main page. Since rewrites is a list and can hold multiple patterns, try merging the two objects and making it something like this:
{
"rewrites": [
{
"source": "/page-a",
"destination": "https://page-a.vercel.app/"
},
{
"source": "/page-a(.*)",
"destination": "https://page-a.vercel.app$1"
}
]
}
My API it's running under another domain.. and I'm trying to configure proxy with Vercel ..
The app it's making requests to /api/test.json so I tried to... on vercel configuration
"redirects": [
{
"source": "/api/test.json",
"destination": "https://myapi.com/test.json",
}
],
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
And I received 404 from /api/test.json
Use the wildcard path matching :path* syntax:
// in vercel.json:
// for example proxying /api/ → https://backend-endpoint/
{
"rewrites": [
{
"source": "/api/:path*",
"destination": "https://backend-endpoint/:path*"
},
{
"source": "/api/:path*/",
"destination": "https://backend-endpoint/:path*/"
}
]
}
NOTE: You need both very identical objects under rewrites array as above in order to make things work properly. The example in the documentation is only the one without the trailing slash and it won't convert (for example) /api/auth/login/ to https://backend-endpoint/auth/login/, that example can only convert /api/auth/login to https://backend-endpoint/auth/login (without trailing slash /)
(it took me a day to realize that trailing slash / is actually very important).
Simply use rewrites
"rewrites": [
{
"source": "/api/test.json",
"destination": "https://myapi.com/test.json",
}
]
Then in your application
httpAgent
.get('/api/test.json)
.then(res => { console.log(res) })
I have a site built with create-react-app and hosted on Firebase Hosting. What can I do to specify the browser cache needs to be updated after new deploys, and ideally only for pages, assets, and stylesheets that have been changed since the last deploy?
Is there a way to access the deploy id and include that (or any other unique identifier) in the headers so the browser can compare to what it has in local storage or cache and determine whether a hard refresh is necessary? I looked over the Firebase Deploying as well as Full config docs but there's no mention on how to access hosting metadata like the last deploy time.
Setting a Cache-Control value to max-age=[any number] doesn't seem ideal because it disregards when the next deployment will occur (which might be unknown to begin with unless there are regular schedules).
I figured it out. Had to update the firebase.json file according to this Github comment:
{
"hosting": {
"headers": [
{ "source":"/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}] }
]
}
}
Please set "max-age=0" in your firebase.json.
"headers": [
{
"source": "/service-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache, no-store, must-revalidate"
}
]
},
{
"source": "**/*.#(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=0"
}
]
}
]
How do I check whether user's profile picture is default or uploaded in Google?
Note: When you get user details from APIs.
All of default profile pictures have the following URL:
https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg
You can just compare string equality of profile picture with the given one.
people.get includes a isDefault value in the image object. E.g. if you try it for +Google you will get;
"image": {
"url": "https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAACyas/yR1_yhwBcBA/photo.jpg?sz=50",
"isDefault": false
}
people.get no longer has isDefault as a property.
https://developers.google.com/+/web/api/rest/latest/people#resource
Updating this answer for 2020: it's now possible to get the user's profile picture by sending a request to the people.get API with photos as the personFields to request.
You'll get back an array of images, and whenever default: true is present, it means it's a default (not user-set) image:
Example (if you're using this with OAuth):
GET https://people.googleapis.com/v1/people/me
Sample response (with profile picture)
{
"resourceName": "people/117055959617985617271",
"etag": "%EgQBAzcuGgQBAgUHIgxHamp6MG9wZ3hOcz0=",
"photos": [
{
"metadata": {
"primary": true,
"source": {
"type": "PROFILE",
"id": "117055959617985617271"
}
},
"url": "https://lh3.googleusercontent.com/a-/AOh14Gg_-udXd3O6K1URTBTEK2rLa2DOh6G2dgmOHcOBOtE=s100"
},
{
"metadata": {
"source": {
"type": "CONTACT",
"id": "2"
}
},
"url": "https://lh3.googleusercontent.com/a/default-user=s100",
"default": true
}
]
}
Sample response (default only)
{
"resourceName": "people/113009277022343767972",
"etag": "%EgQBAzcuGgQBAgUHIgxxdHVTY3IxZVJIUT0=",
"photos": [
{
"metadata": {
"primary": true,
"source": {
"type": "PROFILE",
"id": "113009277022343767972"
}
},
"url": "https://lh6.googleusercontent.com/-6NS3awoYRXw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucnTo-mElIpcAEazDV9DAs1VyYDEIw/s100/photo.jpg",
"default": true
}
]
}
in ruby with devise and omniauth-google-oauth2
in your devise.rb
config.omniauth :google_oauth2 (Other options....), skip_image_info: false
then in your user.rb / other place:
def self.parse_auth_image(auth)
if auth.provider == "google_oauth2"
return nil if auth.dig("extra", "raw_info", "image", "isDefault")
end
auth.info.image
end
The best way to do this in FULL DETAIL:
require 'open-uri'
Default image:
default = "https://lh3.googleusercontent.com/-
XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg"
Image to check:
image_to_check = "https://lh3.googleusercontent.com/-
uh4wK1JDtCI/AAAAAAAAAAI/AAAAAAAAAAA/huieBSbV4zg/s64-
c/100695019739939096169.jpg"
Comparison check
blob_for_default_image = open(default).read
blob_for_image_to_check = open(image_to_check).read
Then you compare the 2 image blobs:
blob_for_default_image == blob_for_image_to_check
If you are using PHP, It's fairly simple, just use this code
$profile_img_end = explode("/", $userData['picture']); // Exploding the URL and Dividing it into several terms
if (end($profile_img_end) === "photo.jpg") { // Now Simply Check if last part of array is equal to "photo.jpg" which is common in all default images
$profile_img = null; // If it's default then set it equal to null
} else {
$profile_img = $userData['picture']; // Else get the Link of the Image
}
Alternative in JavaScript
var url = ""; // Image URL
var img_split = url.split("/"); // Split it Again from / (forward slash)
if (img_split[img_split.length - 1] === 'photo.jpg') { // Check if last array is equal to photo.jpg (By Default Image)
var image = null;
} else {
var image = url;
}
HOPE IT HELPS!