Pwa-studio: Fallback image / page for offline experience

Created on 12 Nov 2018 · 8Comments · Source: magento/pwa-studio

This issue is for the following packages:

[x] venia-concept
[ ] pwa-buildpack
[ ] peregrine
[ ] pwa-devdocs
[ ] upward-js
[ ] upward-spec

This issue is a:

[ ] Bug
[x] Feature suggestion
[ ] Documentation issue
[ ] Other (Please Specify)

Environment

| Question | Answer |
| --------------------------- | :-----------: |
| Magento version | |
| Operating System + version | |
| node.js version (node -v) | |
| npm version (npm -v) | |

Description

As a shopper of the Venia storefront, I want basic feedback when an image or page can't be displayed when offline

Current experience:

offline_no_cache

Expected result:

When offline and displaying a non cached image or web page, insert a fallback that tells the user the image/page isn't cached.

Possible solutions:

Use Workbox to insert a fallback image. Reference the [Workbox docs](https://developers.google.com/web/tools/workbox/guides/advanced-recipes#

For the fallback page, the NotFound Root Component in pull request #486 will need to be restyled.

Dependencies

This pull request needs to be merged before we can work on this issue: https://github.com/magento-research/pwa-studio/pull/486

This issue also requires assets. Pinging @soumya-ashok.

venia-concept userexperience

Source

pcvonz

Most helpful comment

Background color #f6f6f6 will cover the intended area of the image.
Icon in #707070 will be centered in the area. The icon will scale based on the area available. I will slack you the SVG @JStein92 since Github doesn't support that format here.

Specs for icon sizing based on image context. Not all cases are specifically covered, but should provide a reasonable guide.
venia-placeholder-image

soumya-ashok on 11 Dec 2018

👍2

All 8 comments

@pcvonz There are some irregularities with ServiceWorker caching right now, but now that we've merged your awesome work in #486, I don't know what the repro is for this issue. Is it still valid?

zetlen on 7 Dec 2018

Suggestion for @jimbo at grooming to consider content vs. asset fallback similar to what is being done for Categories on Homepage.

ericerway on 7 Dec 2018

Waiting for fallback image mockup from @soumya-ashok to proceed

JStein92 on 10 Dec 2018

Specs for icon sizing based on image context. Not all cases are specifically covered, but should provide a reasonable guide.
venia-placeholder-image

soumya-ashok on 11 Dec 2018

👍2

@ericerway @zetlen Can we spin off the Offline/Not Found page styling to a separate issue? I feel like although it's in the scope of 'offline functionality' it doesn't belong in the same issue as fallback images Also it would be a good first issue/help wanted.

JStein92 on 14 Dec 2018

👍1

I closed #672 for multiple reasons noted in the comment on the PR. I still think this issue may be valid though I cannot reproduce it. Basically we need a way to render a category page in offline mode with some of the data fetched, but currently the app renders a data fetch error.