Implement Add to Home and web app manifest (PWA)

[ericerway]

This issue is for the following packages:

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

Description

As a shopper, I want the ability to quickly add Venia to my desktop (prompted) and see a custompreview search results to help me browse products on the Venia storefront using basic keywords (e.g. hoodie) so that I can make an informed purchase.

This will quickly improve Lighthouse scores when we merge existing work here.

Additional documentation here: https://developers.google.com/web/fundamentals/web-app-manifest/

• User should be prompted to install the web app
• Configuration for custom splash screen for Venia
• Brand and background colors for Venia in Address bar

Assumptions

• None; this should be global as needed (existing pages/screens in Venia)
• 192x192 and 512x512 (PNG) iconography for Venia along with BG/theme color
• Utilize OOTB Workbox functionality where possible; thread arguments (as needed)
• Events to show ATH only for Homepage, Category and PD

Tasks

• Discovery for Web App Manifest (JSON) specifications from Google
• Configuring service worker; validate 200 response (offline) -- related to Implement basic offline experience for Venia (PWA) #374
• Implement manifest on one page (e.g. homepage); verify in Lighthouse
• Implement globally across all necessary pages in Venia; verify in Lighhouse
• Testing and documentation (https://github.com/magento-research/pwa-studio/wiki/Documentation-Guidelines)

[soumya-ashok]

Circular and square Venia icons in the specified dimensions:

[pcvonz]

I'm trying to add the icon images in the same manner that the favicon is being served in the upward yaml.

# Upward yaml
...
    - matches: request.url.pathname
      pattern: '^/homescreen144.png'
      use: homescreen
...
homescreen:
  inline:
    status: 200
    headers:
      inline:
        content-type:
          inline: image/png
    body:
      file:
        inline: ./media/icons/homescreen144.png
      encoding: binary

The response headers:

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: image/png; charset=utf-8
Content-Length: 16561
ETag: W/"40b1-cBSYqciI/b0yfdYRj1qYfNGogTU"
Date: Mon, 22 Oct 2018 23:59:42 GMT
Connection: keep-alive

Request headers:

GET /homescreen144.png HTTP/1.1
Host: magento-venia-concept-eejeb.local.pwadev:9563
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/69.0.3497.81 Chrome/69.0.3497.81 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: PHPSESSID=5k8b5vq2vo11ta7mavci6setq2

Navigating directly to the URL results in this page:

My guess is that it has something to do with this line:

Content-Type: image/png; charset=utf-8

But I'm not sure.

@zetlen have any ideas?

Edit: Created a separate issue #408

[ericerway]

Update: currently seeing a few checks in Lighthouse today for upward.bargreen.io that are worth double checking -- should be a few quick fixes to icon/image and ID of the theme color (above) which can be #ffffff for now. Thanks!

Installable
1 User will not be prompted to Install the Web App
Failures: Manifest does not have a PNG icon of at least 192px.
Engaging
1 Is not configured for a custom splash screen
Failures: Manifest does not have a PNG icon of at least 512px, Manifest does not have theme_color.
2 Address bar does not match brand colors
Failures: Manifest does not have theme_color, No <meta name="theme-color"> tag found.