Using 'Service-Worker-Allowed' in Asp.net Web.Config (Unwanted Url at top of PWA)

Question

I have the following website hosting two PWAs.

www.xy.com/z

I have PWA A hosted on

www.xy.com/z/a

and PWA B hosted on

www.xy.com/z/b

I register a service worker for PWA A from the origin www.xy.com/z/a like this.

           if ('serviceWorker' in navigator) {
                navigator.serviceWorker.register('/z/a/sw.js', {scope: '/'}).then(function (registration) {
                     console.log('Service worker registration succeeded:', registration);
                }).catch(function (error) {
                    console.log('Service worker registration failed:', error);
                });
            } else {
                console.log('Service workers are not supported.');
            }

I register a service worker for PWA B from the origin www.xy.com/z/b the same way

             if ('serviceWorker' in navigator) {
                    navigator.serviceWorker.register('/z/b/sw.js', {scope: '/'}).then(function (registration) {
                         console.log('Service worker registration succeeded:', registration);
                    }).catch(function (error) {
                        console.log('Service worker registration failed:', error);
                    });
                } else {
                    console.log('Service workers are not supported.');
                }

As far as registering the service workers and redirecting to the propert start_urls, everything seems to be fine. Both PWAs are prompted for A2HS automatically and installed to the app section of the device. The problem is both PWA A and B access shared content on www.xy.com/z/. When their service workers serve out of scope content from www.xy.com/z/ I get an unwanted browser URL displaying at the top of the PWA.

I expected to be able to fix this by adding Service-Worker-Allowed to my web.config to indicate that these service workers could serve content outside of their scope.

 <location path="z/a/sw.js">
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Service-Worker-Allowed" value="/" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</location>

<location path="z/b/sw.js">
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Service-Worker-Allowed" value="/" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</location>

Should I be able to eliminate the browser url showing when redirecting to out of scope content (of the same domain) using Service-Worker-Allowed or have I misunderstood this?

Edit:

I have verified Service-Worker-Allowed is added to the header with chrome tools even though we knew it was because the out-of-scope service worker suddenly registered.

Android

Samsung Internet (9.2.10.15) works as expected. Does not show url.
Chrome (74.0.3729.157) browser url shows in PWA

IOS

Safari (IOS 12.3.1) The url shows in PWA with a 'done' button.
Oddly in Safari if I comment out the service worker and add to home screen I get no url.

Using 'Service-Worker-Allowed' in Asp.net Web.Config (Unwanted Url at top of PWA)

0 Answers0