3

I have encountered a major problem in a PWA I am currently maintaining:

Problem is, that the PWA is not installable in productive environment. Whereas on my local machine, it works fine (tested with http-server on localhost)

The PWA consists of an angular 8 app. ServiceWorker was set up with @angular/pwa package.

The specialty in the production environment is, that the app is running behind a reverse proxy. So, the app itself is hosted on an internal corporate machine (not accesible from outside the corporate network). A reverse proxy provides access to the app from outside and also adds HTTPS (on the internal machine, there is only http). The app is called from outside with this url: https://example-corp.com/appname Internal the app is accessed by http://<internal-ip>/

Base-href of the angular app is <base href="/appname/">

Accessed over external address, the service worker is running properly, according to chrome dev tools. The manifest.webmanifest file is also loaded. Provided app icons from webmanifest are shown properly in chrome dev tools. dev tools are also stating that the page is secured by https. So, everything should be fine for installation.

But installability is not given. Message in the manifest view. :

No matching service worker detected

I changed the start_url in the manifest to "appname" but no success. The ngsw-worker.json and webmanifest are stored in the root directory of the app.

Is there any way to get more information/debug output about what is wrong or not fullfilled for installability?

manifest.webmanifest:

{
"name": "App-Name",
"short_name": "App",
"theme_color": "#fafafa",
"background_color": "#824CFF",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [ <omitted> ]
}

I assume that the problem lies in the use of the reverse proxy in front of the app or the base-href but I cant't localize it...

Rul3r
  • 526
  • 6
  • 14
  • Does your PWA when running with an HTTPS URL pass as a valid PWA with the Chrome Lighthouse tool? Running that will give you hints on what (if anything) you may need to fix. – Mathias Jan 28 '20 at 13:17
  • Ok, tried Lighthouse. Found some errors regarding the installability. The start_url in the manifest was incorrect. Should be /appname/ instead of "/". Changed the start_url. lighthouse now states that installability should be given. Manifest view of dev tools still gives the message that no matchin service worker was detected – Rul3r Jan 29 '20 at 12:08

1 Answers1

2

Change your scope property to the same value of your start_url. So your manifest will take this form:

{
"name": "App-Name",
"short_name": "App",
"theme_color": "#fafafa",
"background_color": "#824CFF",
"display": "standalone",
"scope": "/appname/",
"start_url": "/appname/",
"icons": [ <omitted> ]
}

Omitting the scope property will also do the job.

See https://developers.google.com/web/fundamentals/web-app-manifest?hl=en.

Josep M Beleta
  • 581
  • 4
  • 19
  • Thats it! Omitting scope did work. Should have tried this before (only tried start_url: /appname/ OR scope: /appname/ but not both at the same time). – Rul3r Jan 30 '20 at 10:08