I would like to serve two different versions of my statically generated website: mobile version and tablet, desktop version on the same url - basically I want to use Dynamic serving and Vary HTTP Header - Vary: User-Agent as described here: https://developers.google.com/webmasters/mobile-sites/mobile-seo/dynamic-serving
I want to use:
responsive web design / rwd for desktop and tablet versions with desktop optimised image sizes and assets
adaptive web design / awd with responsive web design (rwd is much simpler implementation than desktop one - just may be some different styling for phablets) for mobile version with mobile optimised image sizes and assets
(I should serve two different layouts and at least two different sizes for the images - mobile and desktop/tablet)
I was reading "Customize Hosting Behavior" section in Firebase Hosting documentation - https://firebase.google.com/docs/hosting/url-redirects-rewrites , but it seems there is no way to configure that at the moment.
The only way currently as suggested by Daniel Herr comment - Dynamic serving on Firebase Hosting (Vary HTTP Header)
is to use cloud functions:
So, I can use
https://www.npmjs.com/package/mobile-detect
https://www.npmjs.com/package/device
https://www.npmjs.com/package/wurfl / http://wurfl.sourceforge.net/
to detect the type of device and then dynamically generate/read the mobile or desktop version of the pages.
This way we will serve the content dynamically which disables the benefits and speed of CDN, but we can still cache the pages by setting res.set('Vary', 'User-Agent'); which may be workaround this problem.
I was wondering about more "native"/"out-of-the-box" solution, which is provided by firebase-hosting itself, like in "Rewrites" (https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-rewrites):
"hosting": {
// Add the "rewrites" section within "hosting"
"rewrites": [
{
"source": "**",
"device": "MOBILE",
"destination": "mobile/index.html"
},
{
"source": "**",
"device": "DESKTOP",
"destination": "desktop/index.html"
},
{
"source": "**",
"device": "TV",
"destination": "tv/index.html"
}
]
}
This way, even if I have TV version of the website with tones of images and very wide layout it will not be served on MOBILE devices - adaptive web design.
So, currently there is no way to do that, except using custom cloud functions and actually generating the website dynamically.
Could you please confirm that or provide any information if this will be implemented by the Firebase team at some point?
Thanks!
Related
I develop a mobile app using some REST-API, so have a backend server on nginx.
I noticed, that after uploading a new image on my server, the old image remains for 1 minute (I've checked it with different browsers, devices - it's NOT a browser cache, but a server response). I also tried to fetch images directly (just .jpg) - didn't help.
I tried to add GET-parameter (/image.jpg?a=12341), but it doesn't help as well - the old image remains for a minute.
I found some solutions to disable cache on nginx for images, but I would like to use parameters (like .jpg?a=12342). Is it possible? Or is it better just to disable cache on nginx?
Currently I implemented a site.webmanifest and a service worker on my new version of my blog.
https://nextjs.marcofranssen.nl/
Despite Lighthouse reports I'm 100% matching the PWA requirements, including installability, I do not see the install button in the address bar of my browser.
On my current version of my blog it does show up.
https://marcofranssen.nl
Following picture shows the button when navigating to my current blog.
Now I'm wondering which requirement I'm missing.
I also did a review of this criteria https://web.dev/install-criteria/.
Does anybody have a clue what I'm missing or overreading?
See here for the manifest file https://nextjs.marcofranssen.nl/site.webmanifest
This manifest file is also referenced in the head section.
My old blog is fully static generated html. My new blog is build using Next.js so not entirely a static page, although I don't think that should matter.
Despite Lighthouse reports I'm 100% matching the PWA requirements, including installability, I do not see the install button in the address bar of my browser.
I ran a lighthouse test on https://nextjs.marcofranssen.nl/ and [PWA] section had a few problems
as detailed above, your website manifest misses start_url :
"name": "Marco Franssen - Blog",
"short_name": "MF Blog",
"description": "Blog by Marco Franssen, covering software development!",
"icons": [],
"theme_color": "#000000",
"background_color": "#ffffff",
"display": "standalone",
"start_url": "/"
}
for more details about manifest structure please refer to Web app manifests
after that you need to implement a serviceWorker, and for that you can use next-pwa package or next-offline package and both use google's workbox under the hood.
I prefer next-pwa package, because it works out of the box and there is no need for too much configurations.
I have a link that looks like this:
https://mywebsite.com/#/new-account?jk=-LOLgLiyfxANW-ojMKrf
jk is the variable that I would like to read and use on this page. The variable will change for each user.
The problem is that when this link is clicked, the user is redirected to the main page of the application. The app is a PWA developed using Ionic. I checked my code carefully and there is nothing that would cause such redirect behavior.
So far I tried uploading the app again with deselecting "single page" option during Firebase Init but the problem persists.
thanks
I contacted firebase support and they suggested I solve it by including this in firebase.json within the hosting tag:
"redirects": [{
"source": "/#/new-account?:vars*",
"destination": "https://mywebsite.com/#/new-account?:vars*",
"type": 301
}]
Firebase hosting captures whatever text is after : and transfers it to the destination. Otherwise, it creates a 404 for any link that doesn't exactly match the URL of existing pages.
Maybe there is a more elegant way to do this but it worked well for my situation. More info is available at this link:
https://firebase.google.com/docs/hosting/full-config#redirects
There is a web app which runs in a standalone mode with the following manifest.json
{
"lang": "de",
"name": "Test.App",
"short_name": "Test.App",
"start_url": "/36485/",
"display": "standalone",
"theme_color": "#FF4500",
"background_color": "#FFFFFF",
"icons": [...]
}
There is no browser UI in this mode, so opening documents (like pdfs, docs, etc) must be done in a new Safari Window. Which brings me to the question: how do I force Safari to open a new browser window? The solution we have found now is to give it a different domain name(!!), ie. a subdomain. Every other option - be it window.open or taget=_blank - had no effect whatsoever and all the links would open in the same standalone window thus making it impossible to go back to the actuall app interface. External domain seems to do the trick. Is there any workaround to avoid using a subdomain? Maybe via some definitions in the manifest?
I have made several changes to my firebase site https://scratch-gui.firebaseapp.com/ over the past few days. As I'm developing the site, I plan to deploy and build the site regularly.
If I visit the site in my normal browser, none of my recent changes appear. For example, when I visit the homepage, my navigation still looks like this:
But if I visit in an incognito window or a device that has not been to the site before, it looks like this:
I assumed maybe it was due to caching and might take a few hours, but it has been several days at this point. What is the default setting for firebase deploy caching?
My concern is less for development and more for when I share the site with others. I would like changes to appear after a redeploy without users clearing their cache on every visit. Is there a setting for cache refresh time on firebase? What can I do to make sure my users get the latest version of my site?
UPDATE:
I have updated my firebase.json to the following:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "*.*",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=30"
}
]
}
]
}
}
It now seems that when I refresh normally, it reverts back to the old site. When I run a hard refresh, it shows the most up to date version of the site. I know this sounds really odd, so I made a video.
Youtube video of refresh vs hard refresh behavior
Now I'm really confused what could be causing this.
UPDATE 2:
Here is the service worker list from the chrome debugger.
Without seeing your configuration and the actual URLs in question it's hard to say much, so I'll instead give a description of how Firebase Hosting works in this context.
Firebase Hosting flushes all CDN edges when you deploy an update (firebase deploy). There is no minimum caching interval specified by Firebase Hosting.
But you can of course specify caching for your content in the firebase.json configuration file as shown here: https://firebase.google.com/docs/hosting/url-redirects-rewrites#section-headers