Implement fallback when Javascript unavailable (PWA)

ericerway commented 5 years ago

This issue is for the following packages:

[ ] venia-concept [ ] pwa-buildpack [X] peregrine [ ] pwa-module [ ] pwa-devdocs

Description

As a shopper, I want basic feedback on the Venia storefront if my device is not capable of Javascript so that I can resume my shopping experience.

This is a requirement for PWA per Google Lighthouse and applies to all of the Venia storefront.

Acceptance Criteria

Message displays when JavaScript is disabled only, using server side render
Message never displays when JavaScript is enabled
Message includes minimal Venia branding (see mockup) and informs user that site requires JavaScript
Add test for display (using headless browser, probably)

Example message (for review):

Oops! JavaScript is disabled To continue using the Venia store, enable it in your browser.

Assumptions

Dependent on examples of the Venia storefront
Dependent on disabling Javascript (for testing)
Browser messaging for this scenario is not sufficient
Critical path CSS is not necessary or advised for this story--only branding is image

Tasks

[ ] Discovery for Javascript handling when not available
[ ] Implement Javascript not available response for single example; verify in Lighthouse
[ ] Implement across Venia storefront as default; verify in Lighthouse
[ ] Testing and documentation (https://github.com/magento-research/pwa-studio/wiki/Documentation-Guidelines)

soumya-ashok commented 5 years ago

Reference mockup -

soumya-ashok commented 5 years ago

Graphic for the page -

AlexeyKaryka commented 5 years ago

@ericerway @soumya-ashok on the mock which Soumya's sent I see an link to enable js in a browser, but as far as I see it's possible to implement only in Chrome, Firefox and Opera which have access to the settings though the link("about:settings"), so I'd rather put link to the page with topic describing how to enable js in different browsers. Such way is used in many sites. For instance we may use link to https://www.enable-javascript.com/

ericerway commented 5 years ago

Thanks @AlexeyKaryka let's use your suggestion (enable-javascript) for now and revisit after community feedback. I see pros/cons especially if there are offline considerations but want to understand the IE/Edge limitations in a different issue. Thanks again.

AlexeyKaryka commented 5 years ago

@zetlen could you please clarify whether access to assets is available in the current condition of upward implementation. Looks like I can't connect image to the mustache's template for the disabled js scenario after some configuration of venia-upward.yml in similar way like for favicon(which is also doesn't appear at browser tab).

zetlen commented 5 years ago

@AlexeyKaryka The current UPWARD implementation cannot directly handle binary assets, which is logged as #408. I am working on #398 which should solve #408.

However, you shouldn't need to stream an image to serve an image. The favicon route is not strictly necessary--it was for demonstration purposes only, and it could have been served from the static DirectoryResolver. If you save your image in the built assets folder as part of the build process, it should load in the browser served directly from the root. You can add a CopyWebpackPlugin to copy assets from src to dist.

AlexeyKaryka commented 5 years ago

@zetlen thank you for the answer!

zetlen commented 5 years ago

@AlexeyKaryka Thanks for the great work in #534. I'm following up in this issue to note that when I reviewed your pull request, I realized we could configure UPWARD to serve the media folder with a second DirectoryResolver. I take back my advice to use a CopyWebpackPlugin! So I removed it for you before merging your PR.

magento / pwa-studio