mirror of
https://github.com/kremalicious/portfolio.git
synced 2024-12-22 09:13:19 +01:00
Merge branch 'feature/gatsby' into 'master'
Migrate to Gatsby.js See merge request m/portfolio!1
This commit is contained in:
commit
22344903eb
12
.eslintrc
12
.eslintrc
@ -1,7 +1,5 @@
|
||||
{
|
||||
"plugins": [
|
||||
"react"
|
||||
],
|
||||
"plugins": ["react", "graphql"],
|
||||
"parserOptions": {
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
@ -13,10 +11,10 @@
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:react/recommended"
|
||||
],
|
||||
"globals": {
|
||||
"graphql": true
|
||||
},
|
||||
"extends": ["eslint:recommended", "plugin:react/recommended"],
|
||||
"rules": {
|
||||
"quotes": ["error", "single"],
|
||||
"semi": ["error", "never"]
|
||||
|
||||
24
.gitignore
vendored
24
.gitignore
vendored
@ -1,24 +1,12 @@
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
# Project dependencies
|
||||
.cache
|
||||
node_modules
|
||||
yarn-error.log
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
# Build directory
|
||||
/public
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
src/**/*.css
|
||||
|
||||
@ -7,7 +7,7 @@ cache:
|
||||
testing:
|
||||
stage: test
|
||||
script:
|
||||
- npm install
|
||||
- npm i gatsby-cli -g
|
||||
- npm i
|
||||
- npm test
|
||||
- npm run build-css
|
||||
- npm run build-js
|
||||
- npm run build
|
||||
|
||||
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
"title": "Matthias Kretschmann",
|
||||
"tagline": "Designer & Developer",
|
||||
"description": "",
|
||||
"url": "https://matthiaskretschmann.com",
|
||||
"social": {
|
||||
"Twitter": "https://twitter.com/kremalicious",
|
||||
"GitHub": "https://github.com/kremalicious",
|
||||
7
gatsby-browser.js
Normal file
7
gatsby-browser.js
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Implement Gatsby's Browser APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/browser-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
29
gatsby-config.js
Normal file
29
gatsby-config.js
Normal file
@ -0,0 +1,29 @@
|
||||
const meta = require('./data/meta.json')
|
||||
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
siteUrl: `${meta.url}`,
|
||||
},
|
||||
plugins: [
|
||||
'gatsby-plugin-react-next',
|
||||
'gatsby-plugin-react-helmet',
|
||||
'gatsby-transformer-json',
|
||||
'gatsby-plugin-sitemap',
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'data',
|
||||
path: `${__dirname}/data/`,
|
||||
},
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-sass',
|
||||
options: {
|
||||
includePaths: [
|
||||
`${__dirname}/node_modules`,
|
||||
`${__dirname}/src/styles`
|
||||
],
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
52
gatsby-node.js
Normal file
52
gatsby-node.js
Normal file
@ -0,0 +1,52 @@
|
||||
const path = require('path')
|
||||
|
||||
// Implement the Gatsby API “createPages”. This is called once the
|
||||
// data layer is bootstrapped to let plugins create pages from data.
|
||||
exports.createPages = ({ boundActionCreators, graphql }) => {
|
||||
const { createPage } = boundActionCreators
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const template = path.resolve('src/layouts/Project.js')
|
||||
|
||||
resolve(
|
||||
graphql(`
|
||||
{
|
||||
allProjectsJson {
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
slug
|
||||
img
|
||||
img_more
|
||||
links {
|
||||
Link
|
||||
GitHub
|
||||
Info
|
||||
}
|
||||
description
|
||||
techstack
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`).then(result => {
|
||||
if (result.errors) {
|
||||
reject(result.errors)
|
||||
}
|
||||
|
||||
console.log(result)
|
||||
|
||||
result.data.allProjectsJson.edges.forEach(({ node }) => {
|
||||
const slug = node.slug
|
||||
|
||||
createPage({
|
||||
path: slug,
|
||||
component: template,
|
||||
context: { slug: slug },
|
||||
})
|
||||
})
|
||||
|
||||
resolve()
|
||||
}))
|
||||
})
|
||||
}
|
||||
7
gatsby-ssr.js
Normal file
7
gatsby-ssr.js
Normal file
@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.org/docs/ssr-apis/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
34
package.json
34
package.json
@ -3,38 +3,34 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"node-sass-chokidar": "^1.2.2",
|
||||
"npm-run-all": "^4.1.2",
|
||||
"react": "^16.3.0",
|
||||
"react-dom": "^16.3.0",
|
||||
"gatsby": "^1.9.241",
|
||||
"gatsby-link": "^1.6.39",
|
||||
"gatsby-plugin-react-helmet": "^2.0.8",
|
||||
"gatsby-plugin-react-next": "^1.0.11",
|
||||
"gatsby-plugin-sass": "latest",
|
||||
"gatsby-plugin-sitemap": "^1.2.20",
|
||||
"gatsby-source-filesystem": "^1.5.28",
|
||||
"gatsby-transformer-json": "^1.0.16",
|
||||
"react-helmet": "^5.2.0",
|
||||
"react-lazyload": "^2.3.0",
|
||||
"react-markdown": "^3.3.0",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-scripts": "1.1.1",
|
||||
"react-transition-group": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^8.2.2",
|
||||
"eslint": "^4.19.1",
|
||||
"eslint-plugin-graphql": "^1.5.0",
|
||||
"eslint-plugin-react": "^7.7.0",
|
||||
"jest-cli": "^22.4.3",
|
||||
"react-snap": "^1.12.0",
|
||||
"prettier": "^1.11.1",
|
||||
"stylelint": "^9.2.0",
|
||||
"stylelint-config-standard": "^18.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
"lint:js": "eslint ./{src,public}/**/*.js",
|
||||
"lint:js": "eslint ./src/**/*.js",
|
||||
"lint:css": "stylelint ./src/**/*.scss",
|
||||
"lint": "npm run lint:js && npm run lint:css",
|
||||
"build-css": "node-sass-chokidar --include-path src/stylesheets/ src/ -o src/",
|
||||
"watch-css": "npm run build-css && node-sass-chokidar --include-path src/stylesheets/ src/ -o src/ --watch --recursive",
|
||||
"start-js": "react-scripts start",
|
||||
"start": "npm-run-all -p watch-css start-js",
|
||||
"build-js": "react-scripts build",
|
||||
"build": "npm-run-all build-css build-js",
|
||||
"test": "npm run lint && react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"postbuild": "react-snap"
|
||||
"build": "gatsby build",
|
||||
"start": "gatsby develop",
|
||||
"format": "prettier --write 'src/**/*.js'",
|
||||
"test": "npm run lint"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css">
|
||||
|
||||
<title>matthias kretschmann { designer & developer }</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,15 +0,0 @@
|
||||
{
|
||||
"short_name": "Matthias Kretschmann",
|
||||
"name": "Portfolio of Designer & Developer Matthias Kretschmann",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
}
|
||||
],
|
||||
"start_url": "./index.html",
|
||||
"display": "standalone",
|
||||
"theme_color": "#015565",
|
||||
"background_color": "#e7eef4"
|
||||
}
|
||||
27
src/App.js
27
src/App.js
@ -1,27 +0,0 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import Helmet from 'react-helmet/es/Helmet'
|
||||
import Routes from './Routes'
|
||||
import FadeIn from './components/atoms/FadeIn'
|
||||
import Footer from './components/molecules/Footer'
|
||||
import meta from './data/meta.json'
|
||||
|
||||
const Head = () => (
|
||||
<Helmet
|
||||
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
/>
|
||||
)
|
||||
|
||||
const App = () => (
|
||||
<Fragment>
|
||||
<Head />
|
||||
<FadeIn>
|
||||
<div className="app">
|
||||
<Routes />
|
||||
<Footer />
|
||||
</div>
|
||||
</FadeIn>
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
export default App
|
||||
@ -1,11 +0,0 @@
|
||||
/* global it */
|
||||
|
||||
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)
|
||||
})
|
||||
@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
import Switch from 'react-router-dom/Switch'
|
||||
import Route from 'react-router-dom/Route'
|
||||
import Home from './components/pages/Home'
|
||||
import Project from './components/templates/Project'
|
||||
import NotFound from './components/pages/NotFound'
|
||||
import projects from './data/projects.json'
|
||||
|
||||
const Routes = () => (
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
{projects.map(project => (
|
||||
<Route
|
||||
key={project.slug}
|
||||
path={`/${project.slug}`}
|
||||
render={(props) =>
|
||||
<Project
|
||||
{...props}
|
||||
project={project} />
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
)
|
||||
|
||||
export default Routes
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import './Content.css'
|
||||
import './Content.scss'
|
||||
|
||||
const Content = ({children}) => (
|
||||
<div className="content">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import CSSTransition from 'react-transition-group/CSSTransition'
|
||||
import './FadeIn.css'
|
||||
import './FadeIn.scss'
|
||||
|
||||
const FadeIn = (props) => (
|
||||
<CSSTransition
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import './FullWidth.css'
|
||||
import './FullWidth.scss'
|
||||
|
||||
const FullWidth = ({ children }) => (
|
||||
<div className="full-width">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import './Icons.css'
|
||||
import './Icons.scss'
|
||||
|
||||
export const Facebook = props => (
|
||||
<svg className="icon" viewBox="0 0 20 20" width="20" height="20" {...props}>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import meta from '../../data/meta.json'
|
||||
import './Footer.css'
|
||||
import meta from '../../../data/meta.json'
|
||||
import './Footer.scss'
|
||||
|
||||
const Footer = () => {
|
||||
const year = new Date().getFullYear()
|
||||
|
||||
@ -2,8 +2,8 @@ import React, { Component } from 'react'
|
||||
import Link from 'react-router-dom/Link'
|
||||
import PropTypes from 'prop-types'
|
||||
import Social from './Social'
|
||||
import './Header.css'
|
||||
import meta from '../../data/meta.json'
|
||||
import './Header.scss'
|
||||
import meta from '../../../data/meta.json'
|
||||
|
||||
class Header extends Component {
|
||||
render() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { Twitter, GitHub, Facebook } from '../atoms/Icons'
|
||||
import meta from '../../data/meta.json'
|
||||
import './Social.css'
|
||||
import meta from '../../../data/meta.json'
|
||||
import './Social.scss'
|
||||
|
||||
const social = meta.social
|
||||
|
||||
|
||||
@ -1,29 +1,26 @@
|
||||
import React from 'react'
|
||||
import Link from 'react-router-dom/Link'
|
||||
import LazyLoad from 'react-lazyload'
|
||||
import PropTypes from 'prop-types'
|
||||
import Link from 'gatsby-link'
|
||||
import FadeIn from '../atoms/FadeIn'
|
||||
import projects from '../../data/projects.json'
|
||||
import images from '../../images'
|
||||
import './Projects.css'
|
||||
import './Projects.scss'
|
||||
|
||||
const Projects = () => (
|
||||
<div className="projects full-width">
|
||||
{projects.map(project => (
|
||||
<LazyLoad key={project.slug} height={700} offset={200} once>
|
||||
<FadeIn>
|
||||
<Link
|
||||
key={project.slug}
|
||||
to={{ pathname: `/${project.slug}` }}
|
||||
className="projects__project"
|
||||
>
|
||||
<h1 className="projects__project__title">{project.title}</h1>
|
||||
const Projects = ({ data }) => {
|
||||
const projects = data.allProjectsJson
|
||||
|
||||
<img className="projects__project__image" src={images[project.img]} alt={project.title} />
|
||||
return <div className="projects full-width">
|
||||
{projects.edges.map(({ node }) => <FadeIn key={node.slug}>
|
||||
<Link key={node.slug} to={`/${node.slug}`} className="projects__project">
|
||||
<h1 className="projects__project__title">{node.title}</h1>
|
||||
|
||||
<img className="projects__project__image" src={images[node.img]} alt={node.title} />
|
||||
</Link>
|
||||
</FadeIn>
|
||||
</LazyLoad>
|
||||
))}
|
||||
</FadeIn>)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Projects.propTypes = {
|
||||
data: PropTypes.object,
|
||||
}
|
||||
|
||||
export default Projects
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
import React, { Component, Fragment } from 'react'
|
||||
import Header from '../molecules/Header'
|
||||
import Projects from '../organisms/Projects'
|
||||
|
||||
class Home extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<Header />
|
||||
<main className="screen screen--home">
|
||||
<Projects />
|
||||
</main>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Home
|
||||
16
src/index.js
16
src/index.js
@ -1,16 +0,0 @@
|
||||
import React from 'react'
|
||||
import { hydrate, render } from 'react-dom'
|
||||
import Router from 'react-router-dom/BrowserRouter'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
import registerServiceWorker from './registerServiceWorker'
|
||||
|
||||
const rootElement = document.getElementById('root')
|
||||
|
||||
if (rootElement.hasChildNodes()) {
|
||||
hydrate(<Router><App /></Router>, rootElement)
|
||||
} else {
|
||||
render(<Router><App /></Router>, rootElement)
|
||||
}
|
||||
|
||||
registerServiceWorker()
|
||||
@ -1,14 +1,15 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet/es/Helmet'
|
||||
import Helmet from 'react-helmet'
|
||||
import ReactMarkdown from 'react-markdown'
|
||||
import Header from '../molecules/Header'
|
||||
import Content from '../atoms/Content'
|
||||
import FullWidth from '../atoms/FullWidth'
|
||||
import images from '../../images'
|
||||
import './Project.css'
|
||||
import Header from '../components/molecules/Header'
|
||||
import Content from '../components/atoms/Content'
|
||||
import FullWidth from '../components/atoms/FullWidth'
|
||||
import images from '../images'
|
||||
import './Project.scss'
|
||||
|
||||
const Project = ({ project }) => {
|
||||
const Project = ({ data }) => {
|
||||
const project = data.allProjectsJson.edges[0].node
|
||||
const title = project.title
|
||||
const img = project.img
|
||||
const img_more = project.img_more
|
||||
@ -17,7 +18,7 @@ const Project = ({ project }) => {
|
||||
const techstack = project.techstack
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
@ -67,12 +68,34 @@ const Project = ({ project }) => {
|
||||
</Content>
|
||||
</article>
|
||||
</main>
|
||||
</Fragment>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Project.propTypes = {
|
||||
project: PropTypes.object
|
||||
data: PropTypes.object
|
||||
}
|
||||
|
||||
export default Project
|
||||
|
||||
export const query = graphql`
|
||||
query ProjectQuery($slug: String) {
|
||||
allProjectsJson(filter: { slug: { eq: $slug } }) {
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
slug
|
||||
img
|
||||
img_more
|
||||
links {
|
||||
Link
|
||||
GitHub
|
||||
Info
|
||||
}
|
||||
description
|
||||
techstack
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
30
src/layouts/index.js
Normal file
30
src/layouts/index.js
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
import FadeIn from '../components/atoms/FadeIn'
|
||||
import Footer from '../components/molecules/Footer'
|
||||
import meta from '../../data/meta.json'
|
||||
import './index.scss'
|
||||
|
||||
const Head = () => (
|
||||
<Helmet
|
||||
defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
titleTemplate={`%s // ${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
|
||||
>
|
||||
<link rel="stylesheet" href="https://use.typekit.net/dtg3zui.css" />
|
||||
</Helmet>
|
||||
)
|
||||
|
||||
const TemplateWrapper = ({ children }) => (
|
||||
<div className="app">
|
||||
<Head />
|
||||
<FadeIn>{children()}</FadeIn>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
|
||||
TemplateWrapper.propTypes = {
|
||||
children: PropTypes.func,
|
||||
}
|
||||
|
||||
export default TemplateWrapper
|
||||
34
src/pages/index.js
Normal file
34
src/pages/index.js
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Header from '../components/molecules/Header'
|
||||
import Projects from '../components/organisms/Projects'
|
||||
|
||||
const Home = ({ data }) => (
|
||||
<div>
|
||||
<Header />
|
||||
<main className="screen screen--home">
|
||||
<Projects data={data} />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
|
||||
Home.propTypes = {
|
||||
data: PropTypes.object,
|
||||
}
|
||||
|
||||
export default Home
|
||||
|
||||
export const query = graphql`
|
||||
query IndexQuery {
|
||||
allProjectsJson {
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
slug
|
||||
img
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -1,112 +0,0 @@
|
||||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
)
|
||||
|
||||
export default function register() {
|
||||
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)
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl)
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log('This web app is being served cache-first by a service worker. To learn more, visit https://goo.gl/SC7cgQ') // eslint-disable-line no-console
|
||||
})
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.') // eslint-disable-line no-console
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.') // eslint-disable-line no-console
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error) // eslint-disable-line no-console
|
||||
})
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('No internet connection found. App is running in offline mode.') // eslint-disable-line no-console
|
||||
})
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister()
|
||||
})
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user