diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..aa2fd3d --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Launch Program", + "skipFiles": [ + "/**" + ], + "program": "${file}" + } + ] +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index bf72586..856a630 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2390,6 +2390,37 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.9.1.tgz", "integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==" }, + "axios": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz", + "integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==", + "requires": { + "follow-redirects": "1.5.10" + }, + "dependencies": { + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "axobject-query": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.1.2.tgz", diff --git a/package.json b/package.json index 19e0dae..e0a61e0 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "axios": "^0.19.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", diff --git a/public/index.html b/public/index.html index aa069f2..ee20078 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + - React App + Evad'Art diff --git a/src/App.js b/src/App.js index 61b0c2d..04b4143 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,52 @@ import React from 'react'; import './Styles/App.css'; -import Home from './Pages/Home'; - -function App() { - return ( -
- -
- ); +import Header from './Components/Header'; +import axios from 'axios'; +import PeriodsList from './Components/PeriodsList'; + +class App extends React.Component { + constructor (props) { + super(props); + this.state = { + backgroundImageUrl: '', + isLoaded:false + }; + } + + getBackGroundImage = async () => { + const backgroundIndex = Math.round(Math.random() * 714); + const ids = await axios.get('https://collectionapi.metmuseum.org/public/collection/v1/search?q=a&departmentIds=9') + .then(res => res.data) + .then(data => data.objectIDs); + + const url = await axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${ids[backgroundIndex]}`) + .then(result => result.data) + .then(data => data.primaryImageSmall); + this.setState({ backgroundImageUrl: url, isLoaded: true }); + } + + componentDidMount () { + this.timerID = setInterval(() => { + this.getBackGroundImage(); + }, 4000); + this.getBackGroundImage(); + } + + componentWillUnmount () { + clearInterval(this.timerID); + } + + render () { + return ( +
+
+

Au fil des époques, l'art s'est exprimé de différentes manières. S'il est difficile l'appréhender, rien n'est laissé au hasard. Pour voyager au sein du MetMuseum et découvrir l'art à différentes époques depuis votre canapé, suivez le guide !

+ +

"L'histoire des artistes ne peut être racontée qu'une fois que sont devenues claires, après un certain laps de temps, l'influence que leur oeuvre a exercé sur d'autres et les contributions qu'ils ont faites à l'histoire de l'art en tant que telle"

+

Ernst Gombrich

+
+ ); + } } export default App; diff --git a/src/Components/Banner.js b/src/Components/Banner.js deleted file mode 100644 index dc2f825..0000000 --- a/src/Components/Banner.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react' - -const Banner = () => { - return ( -
-

Title

-

under-tittle

-
- ) -} - -export default Banner diff --git a/src/Components/Button.js b/src/Components/Button.js deleted file mode 100644 index fc88c5a..0000000 --- a/src/Components/Button.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import '../Styles/Button.css'; - -const Button = () => { - return( - - ) -} - -export default Button; \ No newline at end of file diff --git a/src/Components/Header.js b/src/Components/Header.js new file mode 100644 index 0000000..d48b179 --- /dev/null +++ b/src/Components/Header.js @@ -0,0 +1,13 @@ +import React from 'react'; +import '../Styles/Header.css'; + +const Header = (props) => { + return ( +
+

EVAD'ART

+

- Comprendre l'art au fil des époques -

+
+ ); +}; + +export default Header; diff --git a/src/Components/Period.js b/src/Components/Period.js new file mode 100644 index 0000000..6ed2af0 --- /dev/null +++ b/src/Components/Period.js @@ -0,0 +1,56 @@ +import React from 'react'; +import '../Styles/Period.css'; +import GetPeriodObjects from '../Requests/GetPeriodObjects'; + +// Ici class Period qui donne le squelette d'une periode affichée, avec les props title, date (remplacer le contneu du h3) plus le contenu + +class Period extends React.Component { + constructor (props) { + super(props); + this.state = { + open: false, + isLoaded: false, + periodObjects: [] + }; + } + + handleOpen = async () => { + const open = !this.state.open; + this.setState({ open }); + const periodObjects = await GetPeriodObjects(this.props.request, this.props.id); + console.log(periodObjects); + this.setState({ periodObjects, isLoaded: true }); + } + + render () { + return ( +
+
+

{this.props.title}

+

{this.props.date}

+ +
+
+

{this.props.content.text}

+ {this.props.description} +

{this.props.content.description}

+
+

Explorer des oeuvres de cette période

+ {this.state.isLoaded === false ?
+ : this.state.periodObjects.slice(0, 3).map(object => ( +
+
+
{object.title}
+
{object.artistDisplayName !== '' ? object.artistDisplayName : 'artiste inconnu'}
+
+ ))} +
+
+
+ ); + } +} + +export default Period; diff --git a/src/Components/PeriodsList.js b/src/Components/PeriodsList.js new file mode 100644 index 0000000..3cd5a7c --- /dev/null +++ b/src/Components/PeriodsList.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Period from './Period'; +import periods from '../Requests/periods'; + +class PeriodsList extends React.Component { + render () { + return ( +
+
+ {periods.map(period => ( + + ))} +
+ ); + } +} + +export default PeriodsList; diff --git a/src/Components/Timeline.js b/src/Components/Timeline.js deleted file mode 100644 index 1fcb85c..0000000 --- a/src/Components/Timeline.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import '../Styles/Timeline.css'; - -const Timeline = () => { - return( -
- Timeline -
- ) -} - -export default Timeline; \ No newline at end of file diff --git a/src/Images/art-antique.jpg b/src/Images/art-antique.jpg new file mode 100644 index 0000000..b1ad61d Binary files /dev/null and b/src/Images/art-antique.jpg differ diff --git a/src/Images/art-egyptien.jpg b/src/Images/art-egyptien.jpg new file mode 100644 index 0000000..0ecd2c8 Binary files /dev/null and b/src/Images/art-egyptien.jpg differ diff --git a/src/Images/art-medieval-illustration-1.jpg b/src/Images/art-medieval-illustration-1.jpg new file mode 100644 index 0000000..df1783b Binary files /dev/null and b/src/Images/art-medieval-illustration-1.jpg differ diff --git a/src/Images/art-medieval.jpg b/src/Images/art-medieval.jpg new file mode 100644 index 0000000..4f70595 Binary files /dev/null and b/src/Images/art-medieval.jpg differ diff --git a/src/Images/art-moderne-illustration-1.jpg b/src/Images/art-moderne-illustration-1.jpg new file mode 100644 index 0000000..24a82b7 Binary files /dev/null and b/src/Images/art-moderne-illustration-1.jpg differ diff --git a/src/Images/art-moderne.jpg b/src/Images/art-moderne.jpg new file mode 100644 index 0000000..4ef5f0d Binary files /dev/null and b/src/Images/art-moderne.jpg differ diff --git a/src/Images/loading-2.gif b/src/Images/loading-2.gif new file mode 100644 index 0000000..8468d8a Binary files /dev/null and b/src/Images/loading-2.gif differ diff --git a/src/Images/open-period.png b/src/Images/open-period.png new file mode 100644 index 0000000..d7465b9 Binary files /dev/null and b/src/Images/open-period.png differ diff --git a/src/Images/violons_et_raisins.jpg b/src/Images/violons_et_raisins.jpg new file mode 100644 index 0000000..174e0a8 Binary files /dev/null and b/src/Images/violons_et_raisins.jpg differ diff --git a/src/Pages/Home.js b/src/Pages/Home.js deleted file mode 100644 index 584ac97..0000000 --- a/src/Pages/Home.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import '../Styles/Home.css'; - -const Home = () => { - return( -
-

Home

-
- ) -} - -export default Home; \ No newline at end of file diff --git a/src/Requests/GetPeriodObjects.js b/src/Requests/GetPeriodObjects.js new file mode 100644 index 0000000..d8d7e95 --- /dev/null +++ b/src/Requests/GetPeriodObjects.js @@ -0,0 +1,24 @@ +import axios from 'axios'; + +const modernArtObjects = [488098, 488142, 485536, 490210]; + +const GetPeriodObjects = async (q, deptId) => { + if (deptId === 9) { + const objectList = await Promise.all(modernArtObjects.map(objectId => { + return axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectId}`) + .then(result => result.data); + })); + return objectList; + } else { + const objectIds = await axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/search?q=${q}&departmentId=${deptId}`) + .then(res => res.data) + .then(data => data.objectIDs); + const objectList = await Promise.all(objectIds.map(objectId => { + return axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectId}`) + .then(result => result.data); + })); + return objectList; + } +}; + +export default GetPeriodObjects; diff --git a/src/Requests/periods.js b/src/Requests/periods.js new file mode 100644 index 0000000..05be026 --- /dev/null +++ b/src/Requests/periods.js @@ -0,0 +1,67 @@ +import artEgyptien from '../Images/art-egyptien.jpg'; +import artGrecRomain from '../Images/art-antique.jpg'; +import artMedieval from '../Images/art-medieval.jpg'; +import artModerne from '../Images/art-moderne.jpg'; +import artMedievalIllustrationUne from '../Images/art-medieval-illustration-1.jpg'; +import artModerneIllustrationUne from '../Images/art-moderne-illustration-1.jpg'; + +// Ici mettre un tableau en dur des periodes (periods) qu'on veut afficher, avec des objets {key=id:, title:, date:, content: } +// Puis le composant PeriodList sous forme de fonction qui map periods, et qui pour chaque period , passe le composant +// Period , en lui passant une key unique (l'id de la période,), le title la date, et le contenu. + +const periods = [ + { + id: 10, + request: 'egypt', + title: 'Art Egyptien', + date: '3150 av. .J-C. - 150 av. .J-C.', + content: + { + text: "L'art Egyptien n'est pas \"primitif\" au sens des peintures rupestres. Si les bas-reliefs sont une représentation tronquée de la nature, c'est une volonté des Egyptiens. En effet, leur but n'est pas de faire une représentation exacte de la réalité, il est bien plus important d'en faire une représentation complète: la tête se voit mieux de profil, le torse de face, les bras et les jambes de profil, etc. Pour la première fois, on peut parler de \"style\".", + illustration: 'https://ekladata.com/3B7IUx3anXzGBOPMKFSpyuvXltE.jpg', + description: 'Le style Egyptien' + }, + url: artEgyptien + }, + { + id: 13, + request: 'sculpture', + title: 'Art Grec et Romain', + date: 'VIIème siècle av. .J-C. - Ier siècle ap. .J-C.', + content: + { + text: "L'art Grec apporte une grande nouveauté : le but n'est plus d'imiter avec la plus grande fidélité possible le style des anciens mais, pour chaque sculpteur, de décider par lui même comment il va représenter le corps, chacun reprenant les grands succès des autres : comment réussir un torse, réaliser que la statue est plus vivante si le pied est légèrement soulevé, remarquer qu'un léger sourire rend sympa. L'idée générale est : \"n'imitez pas, innovez\". On invente le raccourci.", + illustration: 'https://idata.over-blog.com/4/08/12/30/raccourci/Euthymides---detail2.JPG', + description: "L'invention du raccourci : un pied de profil et l'autre de face" + }, + url: artGrecRomain + }, + { + id: 17, + request: 'medieval', + title: 'Art Médiéval', + date: 'Vème siècle ap. .J-C. - XIIIème siècle ap. .J-C.', + content: + { + text: "Avec le christianisme, la question de la place des images dans la religion se pose de manière renouvelée. Si pour tous les premiers chrétiens, il ne doit pas y avoir de représentation dans les églises, le Pape Grégoire le Grand, au IVème siècle, inverse la tendance. D'après lui, les images peuvent avoir un rôle d'enseignement pour les fidèles ne sachant pas lire. Le but n'est donc plus de représenter la réalité mais d'aller à l'essentiel pour plus de clarté et, ainsi, mieux éduquer.", + illustration: artMedievalIllustrationUne, + description: 'Peu importe les proportions, le message doit être le plus clair possible' + }, + url: artMedieval + }, + { + id: 9, + request: 'abstract', + title: 'Art Moderne', + date: 'XXème siècle ap. .J-C.', + content: + { + text: "Faut il impérativement représenter une toile reconnaissable pour pouvoir exprimer ses sentiments.Le cap est franchit par le peintre russe Wassily Kandisky , pionnier de l'art abstrait connu également sous le nom d'art décoratif. Picasso lui emboîtera le pas en s'inspirant du fauvisme issu de l'impressionnisme de Monnet , comme peut l'illustrer son oeuvre intitulée violon et raisin.", + illustration: artModerneIllustrationUne, + description: 'Violon et raisins, Pablo Picasso, 1912' + }, + url: artModerne + } +]; + +export default periods; diff --git a/src/Styles/App.css b/src/Styles/App.css index 74b5e05..2d05f87 100644 --- a/src/Styles/App.css +++ b/src/Styles/App.css @@ -1,5 +1,8 @@ .App { text-align: center; + font-family:Montserrat; + margin:0 ; + padding: 0; } .App-logo { @@ -35,4 +38,4 @@ to { transform: rotate(360deg); } -} +} \ No newline at end of file diff --git a/src/Styles/Banner.css b/src/Styles/Banner.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/Styles/Button.css b/src/Styles/Button.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/Styles/Header.css b/src/Styles/Header.css new file mode 100644 index 0000000..ec28e39 --- /dev/null +++ b/src/Styles/Header.css @@ -0,0 +1,44 @@ +.banner-background { + height: 400px; + background-size: cover; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-position: center; + background-size: cover; + position:relative; +} +.banner-background::before { + position:absolute; + content:''; + bottom:0; + width:100%; + height:5px; + background-color:black; + animation-name:timerAnimation; + animation-duration:4s; + left:0; + animation-iteration-count:infinite; +} +.banner-background.wait::before { + animation-play-state:paused; +} +@keyframes timerAnimation { + from { + width:100%; + } + to { + width:0px; + } +} +.banner-background h1, h2 { + color: white; + margin-block-end:0px; + margin-block-start:0px; + text-shadow:0 0 4px black; +} +.banner-background h2 { + font-weight: 400; + font-size: 1rem; +} diff --git a/src/Styles/Home.css b/src/Styles/Home.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/Styles/Period.css b/src/Styles/Period.css new file mode 100644 index 0000000..3cb66b3 --- /dev/null +++ b/src/Styles/Period.css @@ -0,0 +1,211 @@ +.period-bloc-container { + width:90vw; + max-width: 500px; + margin:auto; + margin-top:20px; +} +.intro { + color:black; + text-shadow:none; + width:90vw; + max-width:700px; + margin:0 auto; + font-weight:lighter; + margin-bottom:100px; + margin-top:100px; + letter-spacing: 0.09rem; + font-style:italic; + padding: 0 20px 0 20px; +} +.author-quote { + margin-top:-50px; + margin-bottom:100px; +} +.period-bloc-container .period-bloc-banner { + height:150px; + width:100%; + background-color: grey; + display:flex; + justify-content:center; + align-items:center; + flex-direction:column; + border-radius:15px; + background-position:center; + background-size:cover; + background-repeat:no-repeat; + position:relative; + transition:all 0.2s ease-in-out; +} +.period-bloc-container .period-bloc-banner:hover { + box-shadow:0 0 5px rgba(0, 0, 0, 0.5); + transform: scale(1.01); +} +.period-bloc-container .period-bloc-banner.opened { + border-radius:15px 15px 0 0; +} +.period-bloc-container .period-bloc-banner h2, .period-bloc-container .period-bloc-banner h3 { + margin-block-end:0px; + margin-block-start:0px; + color:white; +} +.period-bloc-container .period-bloc-banner h2 { + margin-bottom:10px; +} +.period-bloc-container .period-bloc-banner h3 { + font-weight:300; + font-size:16px; +} +.period-bloc-container .period-bloc-banner .open-content-container { + width:100%; + height:30px; + background: none; + border: none; + position:absolute; + bottom:0; +} +.period-bloc-container .period-bloc-banner .open-content-container span { + transition:all 0.5s ease-in-out; +} +.period-bloc-container .period-bloc-banner .open-content-container span:hover { + cursor: pointer; +} +.period-bloc-container .period-bloc-banner .open-content-container .open-content { + display:block; + background-image:url('../Images/open-period.png'); + background-position:center; + background-repeat:no-repeat; + background-size:cover; + transform:rotate(450deg); + width: 20px; + height:20px; + margin:0 auto; +} +.period-bloc-container .period-bloc-banner .open-content-container .close-content { + display:block; + background-image:url('../Images/open-period.png'); + background-position:center; + background-repeat:no-repeat; + background-size:cover; + transform:rotate(-450deg); + width: 20px; + height:20px; + margin:0 auto; +} +.period-bloc-container .period-bloc-content { + transition:all 0.2s ease-in-out; + background-color:#efefef; + overflow:hidden; + border-radius:0 0 15px 15px; + width:100%; +} +.period-bloc-container .period-bloc-content.closed { + height:0px; +} +.period-bloc-container .period-bloc-content.opened { + height:auto; + top:100%; +} + +.period-content { + padding: 20px; + text-align: justify; + line-height: 24px; +} +.period-description { + font-style: italic; + padding: 0 20px 0 20px; +} +.object-container { + width:300px; + margin:0 auto; +} +.object-image-container { + width:300px; + height:400px; + background-position:center; + background-size:cover; + transform:scale(1); + position:relative; + transition:all 0.2s ease-in-out; + box-shadow:0 0 5px rgba(0, 0, 0, 0.5); +} +.object-image-container::before, .period-bloc-banner::before { + position:absolute; + content:''; + top:0; + left:0; + width:100%; + height:100%; + background-image:linear-gradient(45deg, rgba(0, 0, 0, 0) 60%, rgba(239, 239, 239, 0.3) 80%); + transition:all 0.2s ease-in-out; + background-size:150%; +} +.period-bloc-container .period-bloc-banner:hover::before { + background-size:100%; +} +.object-image-container:hover::before { + background-size:100%; +} +.object-image-container:hover { + transform:scale(1.01); + box-shadow:0 0 7px rgba(0, 0, 0, 0.6) +} +.object-container h5 { + margin-block-end:0px; + font-weight:400; +} +.object-container h6 { + font-weight:400; + margin-block-start:5px; + font-style:italic; +} +.loading { + width:100px; + height:100px; + background-image:url(../Images/loading-2.gif); + background-size: 150%; + background-position: center; + margin:0 auto; +} +@media only screen and (min-width:1024px) { + .intro { + margin-bottom:200px; + margin-top:200px; + } + .author-quote { + margin-top:-150px; + } + .all-period-bloc-container { + width:600px; + position:relative; + height:auto; + margin:0 auto; + } + .time-arrow { + height:100%; + width:15px; + border-radius:15px; + border:4px solid #efefef; + left:50%; + transform:translateX(-50%); + background-color:rgba(0, 0, 0, 0.2);; + z-index:999999; + position:absolute; + } + .time-arrow::before { + position:sticky; + width:15px; + height:15px; + border-radius:100%; + background-color:#424242; + top:50%; + content:''; + display:block; + } + .all-period-bloc-container .period-bloc-container:nth-child(2), .all-period-bloc-container .period-bloc-container:nth-child(4) { + margin-left:-250px; + } + .all-period-bloc-container .period-bloc-container:nth-child(3), .all-period-bloc-container .period-bloc-container:nth-child(5) { + margin-right:-250px; + } +} \ No newline at end of file diff --git a/src/Styles/Timeline.css b/src/Styles/Timeline.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..e683249 --- /dev/null +++ b/src/index.css @@ -0,0 +1,29 @@ +html, body { + margin: 0; + padding: 0; + height: 100%; +} + +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap'); + +:root { + font-size: 16px; + font-family: 'Montserrat', sans-serif; +} + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 10px; +} + +::-webkit-scrollbar-thumb:hover { + background: #424242; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 4146d1d..f5185c1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/serviceWorker.js b/src/serviceWorker.js index b04b771..38d2693 100644 --- a/src/serviceWorker.js +++ b/src/serviceWorker.js @@ -20,7 +20,7 @@ const isLocalhost = Boolean( ) ); -export function register(config) { +export function register (config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); @@ -54,7 +54,7 @@ export function register(config) { } } -function registerValidSW(swUrl, config) { +function registerValidSW (swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { @@ -98,10 +98,10 @@ function registerValidSW(swUrl, config) { }); } -function checkValidServiceWorker(swUrl, config) { +function checkValidServiceWorker (swUrl, config) { // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl, { - headers: { 'Service-Worker': 'script' }, + window.fetch(swUrl, { + headers: { 'Service-Worker': 'script' } }) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. @@ -128,7 +128,7 @@ function checkValidServiceWorker(swUrl, config) { }); } -export function unregister() { +export function unregister () { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready .then(registration => {