1551247 - Adding material.angular.io PWA to home screen does nothing on Fennec

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect, P2)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: manifest.json

After I tap "add to home screen", nothing actually happens. I see the manifest being loaded in the network panel, as well as a 404 trying to fetch its 144x144 icon, but nothing else is logged (including in the browser console or web console). I've attached the manifest here, in case it helps ease diagnosis.

Also not that on the original bug report, @cromefire notes that the icon is loaded from a different base URL in Chrome:

Firefox loads this: https://material.angular.io/android-chrome-144x144.png
The icons are at: https://material.angular.io/assets/img/favicons/android-chrome-144x144.png

Comment 1

[Tim Langhorst]

Firefox loads this: https://material.angular.io/android-chrome-144x144.png
The icons are at: https://material.angular.io/assets/img/favicons/android-chrome-144x144.png

Chrome does seem to resolve that link (in)correctly.

Comment 2

[Tim Langhorst]

Just as an info about the resolution, the manifest resides here: https://material.angular.io/assets/img/favicons/manifest.json

Comment 3

[Hsin-Yi Tsai (she/her)[:hsinyi]]

Marcos find be able to shed some light here!

Comment 4

[Marcos Caceres [:marcosc]]

Just noting that I’ll take a look next week after I’m back from PTO.

Comment 5

[Marcos Caceres [:marcosc]]

Just noting that the src urls should be escaped like that - just use normal paths. Also, please remove the density properties.

My suspicion is those escaped paths are breaking things, but can’t be sure... but worth a try.

Comment 6

[Marcos Caceres [:marcosc]]

• Shouldn’t be

Comment 7

[Thomas Wisniewski [:twisniewski]]

Indeed, if I remove the escape from the start of the image lines, it works (it also finds a logo if I change the URLs to be relative). So while there is an interop issue here (Chrome isn't thwarted by the extra escapes), the site should update their manifest to use relative URLs, and might as well fix the escapes while they're at it.

Comment 8

[Tim Langhorst]

Opened a bug for the page: https://github.com/angular/material.angular.io/issues/599

Comment 9

[Marcos Caceres [:marcosc]]

Thanks Thomas. I'll try to to figure out if the escaped string handling is a Gecko issue or a Chrome issue... I'm a bit unsure, as we literally just do what the spec says: JSON.parse(manifest), use the string value together with new URL().

In any case, I'll file a spec bug to make sure it's clear.

Comment 10

[Marcos Caceres [:marcosc]]

Submitted a fix upstream: https://github.com/angular/material.angular.io/pull/601

Comment 11

[Mike Taylor [:miketaylr]]

Marcos, should we close this or leave it open? The site has merged the PR, but wondering if this will be an issue in Fenix (or other GeckoView) browsers...

Comment 12

[Marcos Caceres [:marcosc]]

Just pinged :toakes to try it out and let us know!

Comment 13

[Tiger Oakes]

Confirmed that it works in Fenix!