-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Prototype: using force-cache inspired by only-if-cached (#28)
* upload the sample 2 (using force-cache inspired by only-if-cached * implemented jeffposnick's approach * implemented fully responsive media regardless of content-type based on Jeff's suggestion * updated project name from -force-cache- to -only-if-cached- * fixed a minor resource case mistake
- Loading branch information
1 parent
7b774dc
commit 4722b63
Showing
29 changed files
with
23,205 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
|
||
# Demo: Network-aware force-cache based resource loading in React | ||
|
||
A demo showing how to use network-aware resource loading in React using force-cache mode in fetch request. | ||
|
||
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). | ||
|
||
## Installation | ||
``` | ||
git clone https://github.com/GoogleChromeLabs/environment-aware-components | ||
cd cra-network-aware-force-cache-loading | ||
npm install | ||
npm start | ||
npm run build | ||
``` |
12,576 changes: 12,576 additions & 0 deletions
12,576
cra-network-aware-only-if-cached-loading/package-lock.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
{ | ||
"name": "cra-network-aware-force-cache-loading", | ||
"version": "0.1.0", | ||
"homepage": ".", | ||
"private": true, | ||
"dependencies": { | ||
"fetch-intercept": "^2.3.1", | ||
"react": "^16.8.6", | ||
"react-dom": "^16.8.6", | ||
"react-scripts": "3.0.1" | ||
}, | ||
"scripts": { | ||
"start": "react-scripts start", | ||
"build": "react-scripts build", | ||
"test": "react-scripts test", | ||
"eject": "react-scripts eject" | ||
}, | ||
"eslintConfig": { | ||
"extends": "react-app" | ||
}, | ||
"browserslist": { | ||
"production": [ | ||
">0.2%", | ||
"not dead", | ||
"not op_mini all" | ||
], | ||
"development": [ | ||
"last 1 chrome version", | ||
"last 1 firefox version", | ||
"last 1 safari version" | ||
] | ||
}, | ||
"license": "Apache-2.0" | ||
} |
Binary file added
BIN
+151 KB
...k-aware-only-if-cached-loading/public/assets/responsive-media/image-max-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+40.6 KB
...ware-only-if-cached-loading/public/assets/responsive-media/image-medium-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.3 KB
...k-aware-only-if-cached-loading/public/assets/responsive-media/image-min-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+12.5 MB
cra-network-aware-only-if-cached-loading/public/assets/responsive-media/video-hd-res.mp4
Binary file not shown.
Binary file not shown.
38 changes: 38 additions & 0 deletions
38
cra-network-aware-only-if-cached-loading/public/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="theme-color" content="#000000" /> | ||
<!-- | ||
manifest.json provides metadata used when your web app is installed on a | ||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
--> | ||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
<!-- | ||
Notice the use of %PUBLIC_URL% in the tags above. | ||
It will be replaced with the URL of the `public` folder during the build. | ||
Only files inside the `public` folder can be referenced from the HTML. | ||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
work correctly both with client-side routing and a non-root public URL. | ||
Learn how to configure a non-root public URL by running `npm run build`. | ||
--> | ||
<title>Network Aware Component</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
15 changes: 15 additions & 0 deletions
15
cra-network-aware-only-if-cached-loading/public/manifest.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"short_name": "React App", | ||
"name": "Create React App Sample", | ||
"icons": [ | ||
{ | ||
"src": "favicon.ico", | ||
"sizes": "64x64 32x32 24x24 16x16", | ||
"type": "image/x-icon" | ||
} | ||
], | ||
"start_url": ".", | ||
"display": "standalone", | ||
"theme_color": "#000000", | ||
"background_color": "#ffffff" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
/* | ||
* Copyright 2019 Google LLC | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* https://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
.App { | ||
text-align: center; | ||
} | ||
|
||
.App-logo { | ||
animation: App-logo-spin infinite 20s linear; | ||
height: 40vmin; | ||
pointer-events: none; | ||
} | ||
|
||
.App-header { | ||
background-color: #282c34; | ||
min-height: 100vh; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
font-size: calc(10px + 2vmin); | ||
color: white; | ||
} | ||
|
||
.App-link { | ||
color: #61dafb; | ||
} | ||
|
||
@keyframes App-logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
/* | ||
* Copyright 2019 Google LLC | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* https://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
import React from 'react'; | ||
|
||
import ConnectionAwareMedia from './components/ConnectionAwareMedia'; | ||
import './App.css'; | ||
|
||
const App = () => { | ||
return ( | ||
<div className="App"> | ||
<header className="App-header"> | ||
<ConnectionAwareMedia /> | ||
</header> | ||
</div> | ||
); | ||
}; | ||
|
||
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
/* | ||
* Copyright 2019 Google LLC | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* https://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
import App from './App'; | ||
|
||
it('renders without crashing', () => { | ||
const div = document.createElement('div'); | ||
ReactDOM.render(<App />, div); | ||
ReactDOM.unmountComponentAtNode(div); | ||
}); |
Binary file added
BIN
+151 KB
cra-network-aware-only-if-cached-loading/src/assets/images/max-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+40.6 KB
cra-network-aware-only-if-cached-loading/src/assets/images/medium-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.3 KB
cra-network-aware-only-if-cached-loading/src/assets/images/min-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+151 KB
...work-aware-only-if-cached-loading/src/assets/responsive-media/image-max-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+40.6 KB
...k-aware-only-if-cached-loading/src/assets/responsive-media/image-medium-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.3 KB
...work-aware-only-if-cached-loading/src/assets/responsive-media/image-min-res.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+12.5 MB
cra-network-aware-only-if-cached-loading/src/assets/responsive-media/video-hd-res.mp4
Binary file not shown.
Binary file added
BIN
+12.5 MB
cra-network-aware-only-if-cached-loading/src/assets/videos/4g-video.mp4
Binary file not shown.
24 changes: 24 additions & 0 deletions
24
...are-only-if-cached-loading/src/components/ConnectionAwareMedia/connection-aware-media.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/* | ||
* Copyright 2019 Google LLC | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the "License"); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* https://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
.root-frame { | ||
width: 90%; | ||
} | ||
|
||
.responsive { | ||
width: 100%; | ||
height: auto; | ||
} |
127 changes: 127 additions & 0 deletions
127
cra-network-aware-only-if-cached-loading/src/components/ConnectionAwareMedia/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
/* | ||
* Copyright 2019 Google LLC | ||
* | ||
* Licensed under the Apache License, Version 2.0 (the 'License'); | ||
* you may not use this file except in compliance with the License. | ||
* You may obtain a copy of the License at | ||
* | ||
* https://www.apache.org/licenses/LICENSE-2.0 | ||
* | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an 'AS IS' BASIS, | ||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* See the License for the specific language governing permissions and | ||
* limitations under the License. | ||
*/ | ||
|
||
import React, { useEffect, useState } from 'react'; | ||
|
||
import { useEffectiveConnectionType } from '../../utils/hooks'; | ||
import './connection-aware-media.css'; | ||
|
||
const MEDIA_TYPE = { | ||
VIDEO: 'video', | ||
IMAGE: 'image' | ||
}; | ||
|
||
const ResponsiveMedia = ({mediaType, objectURL}) => { | ||
let responsiveMedia = null; | ||
|
||
if (mediaType === MEDIA_TYPE.VIDEO) { | ||
responsiveMedia = <video className='responsive' src={objectURL} controls />; | ||
} else if (mediaType === MEDIA_TYPE.IMAGE) { | ||
responsiveMedia = <img className='responsive' src={objectURL} alt='resolution based on effective connection type' />; | ||
} | ||
|
||
return responsiveMedia; | ||
}; | ||
|
||
const requestMedia = async ect => { | ||
let baseURL; | ||
switch (ect) { | ||
case 'slow-2g': | ||
baseURL = '/assets/responsive-media/image-min-res.jpg'; | ||
break; | ||
case '2g': | ||
baseURL = '/assets/responsive-media/image-medium-res.jpg'; | ||
break; | ||
case '3g': | ||
baseURL = '/assets/responsive-media/image-max-res.jpg'; | ||
break; | ||
case '4g': | ||
baseURL = '/assets/responsive-media/video-hd-res.mp4'; | ||
break; | ||
default: | ||
baseURL = '/assets/responsive-media/video-hd-res.mp4'; | ||
break; | ||
} | ||
|
||
const imageQualities = ['max-res', 'medium-res', 'min-res']; | ||
const videoQualities = ['hd-res']; | ||
|
||
let qualities; | ||
let mediaType; | ||
if (baseURL.includes(MEDIA_TYPE.VIDEO)) { | ||
mediaType = MEDIA_TYPE.VIDEO; | ||
qualities = videoQualities; | ||
} else if (baseURL.includes(MEDIA_TYPE.IMAGE)) { | ||
mediaType = MEDIA_TYPE.IMAGE; | ||
qualities = imageQualities; | ||
} | ||
|
||
if (!mediaType) return null; | ||
|
||
for (const quality of qualities) { | ||
const regexFromQualities = new RegExp(qualities.join("|")); | ||
const url = baseURL.replace(regexFromQualities, quality); | ||
try { | ||
const response = await fetch(url, { | ||
cache: 'only-if-cached', | ||
// only-if-cached will only work for same-origin requests. | ||
mode: 'same-origin' | ||
}); | ||
if (response.ok) { | ||
const blob = await response.blob(); | ||
const objectURL = URL.createObjectURL(blob); | ||
console.log('only-if-cached feeding url => ', url); | ||
return <ResponsiveMedia mediaType={mediaType} objectURL={objectURL} />; | ||
} | ||
} catch(error) { | ||
console.log('[ConnectionAwareMedia requestImage only-if-cached] error => ', error); | ||
} | ||
} | ||
|
||
// If we get this far, there's no match in the HTTP cache. | ||
// Make a network request: | ||
try { | ||
const blob = await fetch(baseURL).then(response => response.blob()); | ||
const objectURL = URL.createObjectURL(blob); | ||
console.log('network request feeding url => ', baseURL); | ||
return <ResponsiveMedia mediaType={mediaType} objectURL={objectURL} />; | ||
} catch(error) { | ||
console.log('[ConnectionAwareMedia requestImage default] error => ', error); | ||
} | ||
|
||
return null; | ||
}; | ||
|
||
const ConnectionAwareMedia = () => { | ||
const { effectiveConnectionType } = useEffectiveConnectionType(); | ||
const [responsiveMedia, setResponsiveMedia] = useState(null); | ||
|
||
console.log('[ConnectionAwareMedia] effectiveConnectionType => ', effectiveConnectionType); | ||
|
||
useEffect(() => { | ||
requestMedia(effectiveConnectionType).then(media => { | ||
setResponsiveMedia(media); | ||
}); | ||
}, [effectiveConnectionType]); | ||
|
||
return ( | ||
<div className='root-frame'> | ||
{responsiveMedia} | ||
</div> | ||
); | ||
}; | ||
|
||
export default ConnectionAwareMedia; |
Oops, something went wrong.