Dynamic serving on Firebase Hosting (Vary HTTP Header)

问题

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!

来源：https://stackoverflow.com/questions/44345217/dynamic-serving-on-firebase-hosting-vary-http-header

标签

firebase

firebase-hosting