Unable to get the "Install" option for the PWA

Question

I am trying to make my website as PWA and got the ServiceWorker integrated into it. The ServiceWorker is registered properly as I am able to see the "offline" capabilities.

The problem though is that I am unable to get the "Install" button for installing the PWA.

I have followed the instructions related to pwa-install package, but still it doesn't work.

I have also opened a Github issue for the same which has more details and screenshots:
https://github.com/pwa-builder/pwa-install/issues/355

Any help here would be appreciated. Thanks in advance.

Answer 1

I suggest you use Lighthouse tool in Chrome developer tools. Simpy navigate to Lighthouse tab then check "Progressive Web App". This will outline details on what you are missing.

You mentioned you already have a Service Worker. Now work on your Manifest file and redirect traffic to https (not http) as minimum requirements for your app to be installable.

In your website: https://www.kcak11.com/, As of this writing - 14 July 2020 9:33 pm (PST), The PWA configuration errors are as follows:

• The Manifest file has an error: display value is not one of: minimal-ui | fullscreen | standalone
• start_url does not respond with a 200 when offline. The start_url did respond, but not via a service worker
• Is not configured for a custom splash screen. Failures: Manifest does not have background_color

Lighthouse already provides some tips (via Learn More link) to fix these issues. Fix these issues and your PWA will be installable.

Below is a sample optimal result of a PWA Lighthouse report (using my PWA website):