CODEWITHSUNDEEP
angularservice-workerprogressive-web-appsmanifest.json
Rul3r
Rul3r

Reputation: 546

Angular - Installability "No matching service worker detected"

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...

Upvotes: 3

Views: 1444

Answers (1)

Josep M Beleta
Josep M Beleta

Reputation: 581

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.

Upvotes: 2

Related Questions