[Demo] Save Data about adaptive-loading HOT 9 CLOSED

Excellent. That is the behaviour I would expect. This feature should only ever work (be true) if Lite Mode is enabled.

from adaptive-loading.

@addyosmani
Working on this project, I found something interesting in using Save-Data client hint.

<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width, ECT, Device-Memory, Save-Data">
<meta http-equiv="Accept-CH-Lifetime" content="86400">

With above code snippet in the website, Save-Data is not attached to request headers.

I was testing on Google Chrome browser and even though I attached Save-Data client hint to request as header, I couldn't capture Save-Data request header.

const myHeaders = new Headers({
  'Save-Data': 'on',
  'Data-Saver': 'on'
});

fetch('/network-memory-considerate-model', {
  headers: myHeaders
})
.then(response => response.json())
.then(result => {
  setExperienceType(result.experienceType);
});

I found this note in the doc.


So I think it's disabled on Google Chrome browser for computers. Please check the video capture in the slack channel.
video capture on Google Chrome
As you can see in above code snippet and screenshot, I set 2 custom request headers Save-Data and Data-Saver, Save-Data is not available while Data-Saver (any name other than Save-Data) is always available.

I also tested this scenario on Firefox and Microsoft Edge and on both browsers Save-Data is always available, let alone Data-Saver.
Microsoft Edge:

Firefox:

I'm not sure how Twitter was able to use Save-Data request header even on Google Chrome browser.
Twitter:

I thought that the fetch API might have the problem so tried axios and request but not able to use Save-Data request header on Google Chrome browser.

So I'm going to use Data-Saver request header for now to implement this project.

from adaptive-loading.

So I'm going to use Data-Saver request header for now to implement this project.

I'll take blame for not catching that it was going to be difficult to debug Save Data on desktop now that the Chrome extension for Data Saver has been deprecated (leaving Data Saver/Lite Mode for Android as the main way to use the feature and test it).

Do you have access to a BrowserStack account? It's possible to test and debug Data Saver from a real Android device. You need to go to Settings > Lite Mode and enable it. Here's a test using https://client-hints-demo.appspot.com/http-equiv.html (Accept-CH and Accept-CH-Lifetime meta http-equiv response headers) where you can see Save Data coming through as expected:

from adaptive-loading.

@addyosmani
I tested using BrowserStack Samsung Galaxy 10.
With the Lite Mode setting enabled, we can capture save-data request header on server side.
But with the Lite Mode setting disabled, we can't capture save-data request header on server side, even though we manually attached Save-Data header to the request.

from adaptive-loading.

@addyosmani

Glitch Source

• Link to Glitch App
• Link to Project on Glitch

Please check the above Glitch application.
Actually both of Save-Data Client Hint based demo on server side as well as React hook based demo on client side are developed but on Glitch it's a bit difficult to run Node.js serving create-react-app project. So please try client side demo first.
I'll get it up and running on our Adaptive Loading firebase instance when landing on the PR.
A bit of refinement is left yet.

from adaptive-loading.

@addyosmani
Glitch app is updated for load image feature which can be found in the center of image on lite mode.

from adaptive-loading.

from adaptive-loading.

@addyosmani
For now, on Glitch, it's a bit difficult to get it working with Lite Mode turned on in Chrome for Android because Node.js is not running.
But the implementation is done and working in local development environment. We can deploy it to Adaptive Loading firebase instance with functions.
Then we can test it online.

from adaptive-loading.

@addyosmani
I think Twitter applies adaptive loading to videos as well as images like autoplay.
We could also apply autoplay feature as we have the interface here.

from adaptive-loading.