+ {onlineIndicator}
{renderRoutingError}
diff --git a/packages/venia-concept/src/components/Main/main.css b/packages/venia-concept/src/components/Main/main.css
index b85bd1465e..3b91ade884 100644
--- a/packages/venia-concept/src/components/Main/main.css
+++ b/packages/venia-concept/src/components/Main/main.css
@@ -5,18 +5,16 @@
z-index: 1;
}
-.page {
- min-height: 100vh;
-}
-
-/* state: masked */
-
.root_masked {
composes: root;
height: 100vh;
overflow: hidden;
}
+.page {
+ min-height: 100vh;
+}
+
.page_masked {
composes: page;
}
diff --git a/packages/venia-concept/src/components/OnlineIndicator/index.js b/packages/venia-concept/src/components/OnlineIndicator/index.js
new file mode 100644
index 0000000000..5a0a7d60d3
--- /dev/null
+++ b/packages/venia-concept/src/components/OnlineIndicator/index.js
@@ -0,0 +1 @@
+export { default } from './onlineIndicator';
diff --git a/packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.css b/packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.css
new file mode 100644
index 0000000000..cbbc0ba36e
--- /dev/null
+++ b/packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.css
@@ -0,0 +1,67 @@
+.root {
+ align-items: center;
+ display: inline-flex;
+ font-size: 0.9em;
+ height: 0px;
+ justify-content: flex-start;
+ margin-bottom: 0.3em;
+ overflow: hidden;
+ padding: 0 2.4rem;
+ position: sticky;
+ top: 0;
+ width: 100%;
+}
+
+.offline {
+ composes: root;
+ background-color: rgb(var(--venia-warning-light));
+ animation-name: slidein;
+ animation-duration: 244ms;
+ animation-fill-mode: forwards;
+}
+
+.online {
+ composes: root;
+ background-color: rgb(var(--venia-teal-light));
+ animation-name: slideinandhide;
+ animation-duration: 3s;
+ animation-fill-mode: forwards;
+}
+
+.offline span {
+ color: rgb(var(--venia-warning-dark));
+}
+
+.online span {
+ color: rgb(var(--venia-teal));
+}
+
+.root p {
+ margin-left: 1em;
+ line-height: 1.3em;
+}
+
+@keyframes slidein {
+ from {
+ height: 0;
+ }
+ to {
+ height: 3rem;
+ }
+}
+
+@keyframes slideinandhide {
+ 0% {
+ height: 3rem;
+ opacity: 0.5;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 80% {
+ height: 3rem;
+ }
+ 100% {
+ height: 0;
+ }
+}
diff --git a/packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.js b/packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.js
new file mode 100644
index 0000000000..e0fe9506b4
--- /dev/null
+++ b/packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import Icon from 'src/components/Icon';
+import PropTypes from 'prop-types';
+
+import classify from 'src/classify';
+import defaultClasses from './onlineIndicator.css';
+
+class OnlineIndicator extends Component {
+ static propTypes = {
+ classes: PropTypes.shape({
+ root: PropTypes.string
+ }),
+ isOnline: PropTypes.bool
+ };
+
+ render() {
+ const { isOnline, classes } = this.props;
+
+ return !isOnline ? (
+
+
+
You are offline. Some features may be unavailable.
+
+ ) : (
+
+ );
+ }
+}
+
+export default classify(defaultClasses)(OnlineIndicator);
diff --git a/packages/venia-concept/src/index.css b/packages/venia-concept/src/index.css
index 7f9d3a19f5..9123492462 100644
--- a/packages/venia-concept/src/index.css
+++ b/packages/venia-concept/src/index.css
@@ -9,10 +9,13 @@ html {
--venia-grey: 246, 246, 246;
--venia-teal: 0, 134, 138;
--venia-teal-alt: 224, 240, 241;
+ --venia-teal-light: 212, 246, 241;
--venia-text: 33, 33, 33;
--venia-text-alt: 117, 117, 117;
--venia-text-hint: 158, 158, 158;
--venia-text-spot: 255, 99, 51;
+ --venia-warning-dark: 249, 93, 94;
+ --venia-warning-light: 254, 229, 232;
}
html {
diff --git a/packages/venia-concept/src/index.js b/packages/venia-concept/src/index.js
index f53d7c1578..dc8cb1e348 100644
--- a/packages/venia-concept/src/index.js
+++ b/packages/venia-concept/src/index.js
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient } from 'apollo-client';
+import { persistCache } from 'apollo-cache-persist';
import { ApolloProvider } from 'react-apollo';
import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
@@ -10,6 +11,7 @@ import { Router, Util } from '@magento/peregrine';
import store from 'src/store';
// import { getUserDetails } from 'src/actions/user';
+import app from 'src/actions/app';
import App from 'src/components/App';
import './index.css';
// store.dispatch(getUserDetails());
@@ -36,9 +38,16 @@ const authLink = setContext((_, { headers }) => {
};
});
+const cache = new InMemoryCache();
+
+persistCache({
+ cache,
+ storage: window.localStorage
+});
+
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
- cache: new InMemoryCache()
+ cache: cache
});
ReactDOM.render(
@@ -64,3 +73,10 @@ if (process.env.SERVICE_WORKER && 'serviceWorker' in navigator) {
});
});
}
+
+window.addEventListener('online', () => {
+ store.dispatch(app.setOnline());
+});
+window.addEventListener('offline', () => {
+ store.dispatch(app.setOffline());
+});
diff --git a/packages/venia-concept/src/reducers/app.js b/packages/venia-concept/src/reducers/app.js
index e657da621d..55da7c89d6 100644
--- a/packages/venia-concept/src/reducers/app.js
+++ b/packages/venia-concept/src/reducers/app.js
@@ -6,6 +6,8 @@ export const name = 'app';
const initialState = {
drawer: null,
+ hasBeenOffline: !navigator.onLine,
+ isOnline: navigator.onLine,
overlay: false,
pending: {}
};
@@ -17,6 +19,19 @@ const reducerMap = {
drawer: payload,
overlay: !!payload
};
+ },
+ [actions.setOnline]: state => {
+ return {
+ ...state,
+ isOnline: true
+ };
+ },
+ [actions.setOffline]: state => {
+ return {
+ ...state,
+ isOnline: false,
+ hasBeenOffline: true
+ };
}
};
diff --git a/packages/venia-concept/src/sw.js b/packages/venia-concept/src/sw.js
new file mode 100644
index 0000000000..8d26e1a92a
--- /dev/null
+++ b/packages/venia-concept/src/sw.js
@@ -0,0 +1,48 @@
+const thirtyDays = 30 * 24 * 60 * 60;
+workbox.skipWaiting();
+workbox.clientsClaim();
+
+workbox.routing.registerRoute('/', workbox.strategies.staleWhileRevalidate());
+
+workbox.routing.registerRoute(
+ new RegExp('\\.html$'),
+ workbox.strategies.networkFirst()
+);
+
+workbox.routing.registerRoute(
+ new RegExp('/.\\.js$'),
+ workbox.strategies.staleWhileRevalidate()
+);
+
+workbox.routing.registerRoute(
+ /\/media\/catalog.*\.(?:png|gif|jpg|jpeg|svg)$/,
+ workbox.strategies.staleWhileRevalidate({
+ cacheName: 'catalog',
+ plugins: [
+ new workbox.expiration.Plugin({
+ maxEntries: 60,
+ maxAgeSeconds: thirtyDays // 30 Days
+ })
+ ]
+ })
+);
+
+workbox.routing.registerRoute(
+ /\.(?:png|gif|jpg|jpeg|svg)$/,
+ workbox.strategies.cacheFirst({
+ cacheName: 'images',
+ plugins: [
+ new workbox.expiration.Plugin({
+ maxEntries: 60,
+ maxAgeSeconds: thirtyDays // 30 Days
+ })
+ ]
+ })
+);
+
+workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
+
+// This "catch" handler is triggered when any of the other routes fail to
+// generate a response.
+
+// TODO: Add fallbacks
diff --git a/packages/venia-concept/static/favicon.ico b/packages/venia-concept/static/favicon.ico
new file mode 100644
index 0000000000..5b4f3f947f
Binary files /dev/null and b/packages/venia-concept/static/favicon.ico differ
diff --git a/packages/venia-concept/static/icons/venia_circle_144.png b/packages/venia-concept/static/icons/venia_circle_144.png
new file mode 100644
index 0000000000..6db6f53ba8
Binary files /dev/null and b/packages/venia-concept/static/icons/venia_circle_144.png differ
diff --git a/packages/venia-concept/static/icons/venia_circle_192.png b/packages/venia-concept/static/icons/venia_circle_192.png
new file mode 100644
index 0000000000..4a0c3c3d20
Binary files /dev/null and b/packages/venia-concept/static/icons/venia_circle_192.png differ
diff --git a/packages/venia-concept/static/icons/venia_circle_512.png b/packages/venia-concept/static/icons/venia_circle_512.png
new file mode 100644
index 0000000000..cf2c8e483c
Binary files /dev/null and b/packages/venia-concept/static/icons/venia_circle_512.png differ
diff --git a/packages/venia-concept/static/icons/venia_square_144.png b/packages/venia-concept/static/icons/venia_square_144.png
new file mode 100644
index 0000000000..db7e1c1ac9
Binary files /dev/null and b/packages/venia-concept/static/icons/venia_square_144.png differ
diff --git a/packages/venia-concept/static/icons/venia_square_192.png b/packages/venia-concept/static/icons/venia_square_192.png
new file mode 100644
index 0000000000..6cfe4069bc
Binary files /dev/null and b/packages/venia-concept/static/icons/venia_square_192.png differ
diff --git a/packages/venia-concept/static/icons/venia_square_512.png b/packages/venia-concept/static/icons/venia_square_512.png
new file mode 100644
index 0000000000..9c0ea7d006
Binary files /dev/null and b/packages/venia-concept/static/icons/venia_square_512.png differ
diff --git a/packages/venia-concept/static/manifest.json b/packages/venia-concept/static/manifest.json
new file mode 100644
index 0000000000..dce2ee7acc
--- /dev/null
+++ b/packages/venia-concept/static/manifest.json
@@ -0,0 +1,23 @@
+{
+ "name": "Venia",
+ "short_name": "Venia",
+ "start_url": "/",
+ "theme_color": "#ff6334",
+ "display": "standalone",
+ "background_color": "#fff",
+ "description": "Shop the look",
+ "icons": [{
+ "src": "/icons/venia_circle_144.png",
+ "sizes": "144x144",
+ "type": "image/png"
+ },{
+ "src": "/icons/venia_circle_192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },{
+ "src": "/icons/venia_circle_512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ]
+}
diff --git a/packages/venia-concept/media/veniaClosed.png b/packages/venia-concept/static/veniaClosed.png
similarity index 100%
rename from packages/venia-concept/media/veniaClosed.png
rename to packages/venia-concept/static/veniaClosed.png
diff --git a/packages/venia-concept/templates/doctype-and-head-start.mst b/packages/venia-concept/templates/doctype-and-head-start.mst
index efa899076b..e94d6d7d47 100644
--- a/packages/venia-concept/templates/doctype-and-head-start.mst
+++ b/packages/venia-concept/templates/doctype-and-head-start.mst
@@ -4,3 +4,5 @@
+
+
diff --git a/packages/venia-concept/venia-upward.yml b/packages/venia-concept/venia-upward.yml
index 535d0c8cd9..cf0b1799f2 100644
--- a/packages/venia-concept/venia-upward.yml
+++ b/packages/venia-concept/venia-upward.yml
@@ -8,8 +8,8 @@ response:
pattern: '^/(graphql|rest|media/)'
use: proxy
- matches: request.url.pathname
- pattern: '^/(favicon.ico|veniaClosed.png)'
- use: media
+ pattern: '^/(icons/.+|favicon.ico$|manifest.json$|veniaClosed.png$)'
+ use: static
- matches: urlKey
pattern: '.'
use: appShell
@@ -111,6 +111,6 @@ bundles:
directory:
inline: './dist'
-media:
+static:
directory:
- inline: './media'
+ inline: './static'
diff --git a/packages/venia-concept/webpack.config.js b/packages/venia-concept/webpack.config.js
index d5f942baa6..cde16bb200 100644
--- a/packages/venia-concept/webpack.config.js
+++ b/packages/venia-concept/webpack.config.js
@@ -17,6 +17,8 @@ const TerserPlugin = require('terser-webpack-plugin');
const configureBabel = require('./babel.config.js');
const themePaths = {
+ images: path.resolve(__dirname, 'images'),
+ templates: path.resolve(__dirname, 'templates'),
src: path.resolve(__dirname, 'src'),
output: path.resolve(__dirname, 'dist')
};
@@ -133,7 +135,13 @@ module.exports = async function(env) {
env: { mode },
enableServiceWorkerDebugging,
serviceWorkerFileName,
- paths: themePaths
+ paths: themePaths,
+ injectManifest: true,
+ injectManifestConfig: {
+ include: [/\.js$/],
+ swSrc: './src/sw.js',
+ swDest: 'sw.js'
+ }
})
],
optimization: {
@@ -153,7 +161,6 @@ module.exports = async function(env) {
};
if (mode === 'development') {
config.devtool = 'eval-source-map';
-
const devServerConfig = {
publicPath: config.output.publicPath,
graphqlPlayground: {