Offline mode and web app manifest #486

pcvonz · 2018-11-09T18:37:35Z

This PR is a:

[x] New feature
[ ] Enhancement/Optimization
[ ] Refactor
[ ] Bugfix
[ ] Test for existing code
[ ] Documentation

Summary

Adds the beginnings of offline mode to Venia

When this pull request is merged, it will...

Cache every visited route as an HTML file via Workbox. This will enable the ability to navigate directly to a page when offline.
Cache all RootComponents and a map of every visited URL and the response from urlResolver. This allows loading RootComponents when offline.
Add a new RootComponent, NotFound, which is loaded when offline and the requested page isn't cached.
Add an offline indicator, displays when offline and when transitioning from offline to online.
Add the option to use InjectManifest in the ServiceWorkerPlugin.
Add a web-app-manifest to the project so Venia can be installed like a native app.
Add apollo-cache-persist which caches graphql queries in localStorage so they can be made offline.
Add copy-webpack-plugin to Venia so assets (mainly for the manifest) can be moved into the dist directory and be served by upward.

Additional information

Relevant issues:

Implement Add to Home and web app manifest (PWA) #372
Implement basic offline experience for Venia (PWA) #374
Upward-js unable to serve images #408 (Had problems serving the images needed for the webapp-manifest).

Future considerations

It'd be nice to add the ability to define the name of the runtime cache.
the NotFound root component is hard-coded into resolveUnknownRoute. Will something that can serve this purpose be added to the Magento back-end?
The online / offline indicator could be made into a generic toast.
Caching the response from urlResolver will be a lot easier once the graphql back-end supports GET requests.

- Add troubleshooting section for `connection not secure`

- Add Apollo simple persistence for persistent cache of graphql queries - Add html files to SW runtime cache - Fix venia favicon (fixes serving images via upward in general) - Add new venia icons

- If offline loads component from localStorage - If offline and component not in cache, load NotFound root component - Add fallback page to venia-upward yml - Switch to inject-manifest in webpack

- Add test for offline functionality of resolveUnkownRoute - Add test for injectManifest of ServiceWorkerPlugin

- SW.js is now served with `Service-Worker-Allowed` header - manifest icons are moved to the dist directory with `copy-webpack-plugin` - manifest.webmanifest -> manifest.json

- `getRouteComponent` now checks if the current route has the `NotFoundComponent` stored in state. If so, reload the route when online Progress towards #374

- Shows online status when switching from offline -> online - Animation for both online and offline

…-web-app-manifest

- ServiceWorkerPlugin takes in `injectManifestConfig` - Update tests - Cache chunks via workbox-webpack

magento-cicd2 · 2018-11-09T18:37:37Z

All committers have signed the CLA.

vercel · 2018-11-09T18:37:38Z

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

coveralls · 2018-11-09T19:37:35Z

Coverage decreased (-0.4%) to 16.98% when pulling e99a80a on bargreenellingson:offline-mode-web-app-manifest into 768b4ca on magento-research:release/2.0.

rowan-m · 2018-11-09T20:03:39Z

/packages/venia-concept/templates/doctype-and-head-start.mst

Add <meta name="theme-color" content="#ff6334">

packages/peregrine/src/Router/__tests__/resolveUnknownRoute.test.js

rowan-m · 2018-11-09T20:16:55Z

Styling question regarding the online / offline indicator. Can this overlay rather than push content down? I'm concerned this could lead to some janky painting as it appears and disappears.

packages/venia-concept/src/sw.js

pcvonz · 2018-11-09T20:36:01Z

Styling question regarding the online / offline indicator. Can this overlay rather than push content down? I'm concerned this could lead to some janky painting as it appears and disappears.

The offline indicator is persistent. I didn't want to obscure any of the content so I let it push the content down. We could perhaps allow the indicator to be dismissed.
Maybe @soumya-ashok could provide some input.

Resolves `/media` proxying to the magento backend instead of to the `/dist` folder to serve static content

jimbo

@pcvonz This is looking good. I have a few changes to request while I test it out locally. We'll try to get this merged pretty soon here, though.

jimbo · 2018-11-27T23:49:26Z

packages/peregrine/src/Router/resolveUnknownRoute.js

+            });
+        } else {
+            return new Promise(function(resolve) {
+                resolve({


You should be able to use Promise.resolve() here. Alternately, you could make remotelyResolveRoute an async function and just return things directly.

jimbo · 2018-11-27T23:57:10Z

packages/peregrine/src/Router/resolveUnknownRoute.js

+    let urlResolve = localStorage.getItem('urlResolve');
+    urlResolve = JSON.parse(urlResolve);
+    urlResolve = urlResolve ? urlResolve : {};
+    urlResolve[opts.route] = res;


Consider declaring more than one variable here instead of reusing the same one, so it's easier to read.

const itemString = localStorage.getItem('urlResolve') const item = JSON.parse(storedRoute) || {} item[opts.route] = res localStorage.setItem('urlResolve', JSON.stringify(item))

jimbo · 2018-11-28T17:02:48Z

packages/venia-concept/src/components/AppShell/appShell.js

+    };
+};
+
+export default connect(


When merge conflicts are resolved and these changes ported to app.js, make sure to migrate the redux connections to App/container.js.

jimbo · 2018-11-28T17:08:35Z

packages/venia-concept/src/components/Main/main.css

@@ -5,18 +5,8 @@
    z-index: 1;
 }

-.page {
-    min-height: 100vh;
-}


Why would we remove this?

Adding it back since we're overlaying the notification.
If you were curious though:

jimbo · 2018-11-28T17:13:53Z

packages/venia-concept/src/components/OnlineIndicator/onlineIndicator.css

+    100% {
+        height: 0;
+    }
+}


As Rowan had mentioned, animating height will cause render jank. I second his recommendationt to make it an overlay.

In addition, height is not a GPU-accelerated property, so we should avoid animating it. Try to restrict your animations to transform and opacity.

jimbo · 2018-11-28T17:16:52Z

packages/venia-concept/src/reducers/app.js

@@ -7,7 +7,8 @@ export const name = 'app';
 const initialState = {
    drawer: null,
    overlay: false,
-    pending: {}
+    pending: {},
+    isOnline: navigator.onLine


I saw earlier that the App component was keeping local state for whether it had ever been online. Why would we not put that here in redux state?

Good point, I'll look into adding it.

zetlen

@pcvonz Thanks for your patience. This is awesome, exciting work that @rowan-m should be happy to see. I just pushed a manual back-merge from release/2.0 with a small change I should explain:

I unified our strategy for serving files that aren't Webpack output assets. This PR, #534, and some earlier work I did all had different approaches to this; I would prefer to use UPWARD to statically serve an additional directory, rather than use a CopyWebpackPlugin, so I moved things around. There is now a static directory for serving all files that are production-ready assets and don't need to go through Webpack. venia-upward.yml defines two DirectoryResolvers for static files, static and dist. Right now, there's a manually maintained regex in venia-upward for targeting the static resolver instead of dist. Any more files we add to static, we need to keep that regex up to date. But at least it's in one place!

This strategy will probably change in the future, since we want to integrate the build more and more, but for now, it's the simplest option. If we let multiple strategies for this sit around in the codebase, it'll grow way too confusing.

Besides that and a few other small changes from @jimbo and myself, this is ready to go, which is awesome.

zetlen · 2018-11-28T19:15:59Z

packages/venia-concept/src/sw.js

+    workbox.strategies.staleWhileRevalidate()
+);
+
+workbox.routing.registerRoute(


This works for static files, but catalog images should probably use staleWhileRevalidate. It would be this route, prepended with /media/catalog.

PWAStudioBot · 2018-11-28T21:34:47Z

	Fails
🚫	The following file(s) were not formatted with prettier. Make sure to execute `npm run prettier` locally prior to committing. `packages/peregrine/src/Router/resolveUnknownRoute.js packages/venia-concept/src/sw.js`
🚫	The following file(s) did not pass ESLint. Execute `npm run lint` locally for more details `packages/venia-concept/src/components/App/app.js`

Generated by 🚫 dangerJS

packages/venia-concept/src/reducers/app.js

packages/venia-concept/src/components/Main/main.css

packages/venia-concept/src/components/App/app.js

jimbo · 2018-11-28T22:09:35Z

@pcvonz Merged! Thanks for taking this feature on! 🎉

rowan-m · 2018-11-29T12:00:42Z

Thank you @pcvonz this is a strong foundation!

pcvonz and others added 16 commits October 19, 2018 10:17

Update readme

f8c8032

- Add troubleshooting section for `connection not secure`

Add web app manifest, offline mode

1475cd1

- Add Apollo simple persistence for persistent cache of graphql queries - Add html files to SW runtime cache - Fix venia favicon (fixes serving images via upward in general) - Add new venia icons

Fix venia config

c6380a9

Offline mode integrated into resolveUnknownRoute

6d89232

- If offline loads component from localStorage - If offline and component not in cache, load NotFound root component - Add fallback page to venia-upward yml - Switch to inject-manifest in webpack

Add inject-mainfest option to PWA-Buildpack

9749992

Add tests

9e8fa41

- Add test for offline functionality of resolveUnkownRoute - Add test for injectManifest of ServiceWorkerPlugin

Add venia icons to manifest, fix injectManifest

0422136

- SW.js is now served with `Service-Worker-Allowed` header - manifest icons are moved to the dist directory with `copy-webpack-plugin` - manifest.webmanifest -> manifest.json

Add copy-webpack-plugin

ab042df

Merge release/2.0

942e2e6

Add offline indicator

2658b5e

Style offline indicator, fix offline to online

cf3d2b0

- `getRouteComponent` now checks if the current route has the `NotFoundComponent` stored in state. If so, reload the route when online Progress towards #374

Add online indicator

b372fab

- Shows online status when switching from offline -> online - Animation for both online and offline

Clean up, comment

0dc1b21

Revert upward change

40c8d6a

Merge remote-tracking branch 'upstream/release/2.0' into offline-mode…

5c89225

…-web-app-manifest

Update ServiceWorkerPlugin to accept config

16effc8

- ServiceWorkerPlugin takes in `injectManifestConfig` - Update tests - Cache chunks via workbox-webpack

pcvonz requested review from zetlen and jimbo November 9, 2018 18:37

rowan-m reviewed Nov 9, 2018

View reviewed changes

packages/peregrine/src/Router/__tests__/resolveUnknownRoute.test.js Show resolved Hide resolved

rowan-m reviewed Nov 9, 2018

View reviewed changes

packages/venia-concept/src/sw.js Outdated Show resolved Hide resolved

pcvonz added 4 commits November 9, 2018 13:08

Rename media directory to images

4d8b778

Resolves `/media` proxying to the magento backend instead of to the `/dist` folder to serve static content

Add theme color to head

8fb2ca8

Remove fallback code. Opening seprate issue.

233aa70

Switch test url from store.com to example.com

d592646

pcvonz mentioned this pull request Nov 12, 2018

Fallback image / page for offline experience #493

Closed

jimbo suggested changes Nov 28, 2018

View reviewed changes

Merge branch 'release/2.0' into offline-mode-web-app-manifest

35be632

zetlen reviewed Nov 28, 2018

View reviewed changes

Address PR feedback

048e98c

jimbo suggested changes Nov 28, 2018

View reviewed changes

packages/venia-concept/src/reducers/app.js Outdated Show resolved Hide resolved

packages/venia-concept/src/components/Main/main.css Show resolved Hide resolved

packages/venia-concept/src/components/App/app.js Show resolved Hide resolved

Fix small issues and lint

e99a80a

jimbo approved these changes Nov 28, 2018

View reviewed changes

jimbo merged commit 2c65cfc into magento:release/2.0 Nov 28, 2018

supernova-at mentioned this pull request Nov 11, 2019

Supplant MagentoRouteHandler #1966

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Offline mode and web app manifest #486

Offline mode and web app manifest #486

pcvonz commented Nov 9, 2018

magento-cicd2 commented Nov 9, 2018 •

edited

Loading

vercel bot commented Nov 9, 2018

coveralls commented Nov 9, 2018 •

edited

Loading

rowan-m commented Nov 9, 2018

rowan-m commented Nov 9, 2018

pcvonz commented Nov 9, 2018

jimbo left a comment

jimbo Nov 27, 2018

jimbo Nov 27, 2018

jimbo Nov 28, 2018

jimbo Nov 28, 2018

pcvonz Nov 28, 2018

jimbo Nov 28, 2018

jimbo Nov 28, 2018

pcvonz Nov 28, 2018

zetlen left a comment

zetlen Nov 28, 2018

PWAStudioBot commented Nov 28, 2018

jimbo commented Nov 28, 2018

rowan-m commented Nov 29, 2018

Offline mode and web app manifest #486

Offline mode and web app manifest #486

Conversation

pcvonz commented Nov 9, 2018

This PR is a:

Summary

Additional information

Future considerations

magento-cicd2 commented Nov 9, 2018 • edited Loading

vercel bot commented Nov 9, 2018

coveralls commented Nov 9, 2018 • edited Loading

rowan-m commented Nov 9, 2018

rowan-m commented Nov 9, 2018

pcvonz commented Nov 9, 2018

jimbo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zetlen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PWAStudioBot commented Nov 28, 2018

jimbo commented Nov 28, 2018

rowan-m commented Nov 29, 2018

magento-cicd2 commented Nov 9, 2018 •

edited

Loading

coveralls commented Nov 9, 2018 •

edited

Loading