Service worker does not successfully serve the manifest's start_url

[frvge]

Provide the steps to reproduce

1. Run LH on https://www.trivago.nl

What is the current behavior?

Failed PWA audit of:

User will not be prompted to Install the Web App
Failures: Service worker does not successfully serve the manifest's start_url, Timed out waiting for fetched start_url.

What is the expected behavior?

Passed audit.

Our QA department is able to add it to the home screen of Android.

Environment Information

• Affected Channels: Chrome Extension / CLI
• Lighthouse version: 3.0.3
• Node.js version: N/A for extension / v8.11.3 based on https://github.com/ebidel/lighthouse-ci/blob/master/builder/Dockerfile
• Operating System: MacOS / Debian host OS for Docker

Related issues
#4541
#4261

[patrickhulce]

Thanks for reporting @frvge I can reproduce this! I'm seeing a sizeable delay to serve the primary document of your page, it's possible that the service worker isn't able to cache the resources in time before we move on. Are you also getting ~1s+ download times for your primary document even on fast connections?

[patrickhulce]

cc @wardpeet in case you've got ideas from your recent debugging of start URL :)

[frvge]

For cross-continent connections, it can take a bit more than 1 sec. If you want you can test with https://www.trivago.com . During my last run of that, I saw that it hit our start_url and still failed the audit.

[wardpeet]

I'm from belgium so .nl should be fast enough. Even when moving the threshold to 30s it still returns Timed out waiting for fetched start_url

When running lighthouse on trivago it starts to reload the page every x time, not sure why this only happens on lighthouse run. @frvge is this something you can help us with? is there any behaviour in trivago that might cause this or should we look into lighthouse?
I ran node lighthouse-cli/index.js https://www.trivago.nl/

[frvge]

I haven't seen that behavior yet. I will try to reproduce it and get back to you with the results.

[frvge]

We've reproduced it and will fix the weird blinking behaviour. Let's wait and see if it solves the lighthouse problem too.

[wardpeet]

@frvge could you explain what's happening here? 😀 Maybe we can add something to lighthouse to make it more robust

[tomdwyer]

Hey @wardpeet. We suspect the issue may be down to a redirect in our start_url that lighthouse may have some troubles with. The two components that are flashing are both client-side rendered and are naturally flashing because the page seems to be constantly reloading. We're now trying to confirm if it's reloading because of the redirect.

[wardpeet]

ok i'm going to close this as it seems like trivago is the only one having this issue if it's an issue on our side or something we can fix please create a new issue.

[rbjarnason]

@wardpeet We are also having this issue, getting this same error but the app installs and works correctly on iPhone and Android.

We are using:
"start_url": "/?utm_source=web_app_manifest"

have also tried (which also works for install Android):
"start_url": "./?utm_source=web_app_manifest"

If we change it the URL below the error in Lighthouse disappears but the app does not work after install as this path is not available, the only valid paths in our app are "/" and then dynamically generated paths:
"start_url": "./index.html?utm_source=web_app_manifest"

We do "internal app" redirect quickly in the app when it loads from "/" to for example "/domain/1" or other paths based on the hostname, could also go to "/community/123".

I've googled for hours before writing a comment to this ticket but have not found any solutions. The only thing I can think of is to support "/html.index" in the PWA routing and have that path redirect to "/" but that would just be a hack to get Lighthouse working and might not even work if there is a bug in Lighthouse that fails to deal with PWA routing.

Here is our sw config: https://github.com/CitizensFoundation/your-priorities-app/blob/master/client_app/sw-precache-config.js

Here is the manifest starturl generated: https://github.com/CitizensFoundation/your-priorities-app/blob/master/server_api/utils/manifest_generator.js#L51

Here is the live app: https://yrpri.org/

Any hints?

ps: We have been using the Audit feature for a few years now and I'm pretty sure that early last year we did not have this Lighthouse problem, we were at a 100% PWA score, while nothing fundamentally has changed in this regards in our app.

[rbjarnason]

@wardpeet Never mind, I found something that had changed since I had a 100% PWA score.

We were adding video support to our platform and I changed the regex not to cache any media and when I changed to back to caching everything then I'm back to 100% PWA score :) I just hope there will be no issues regarding caching videos in the ServiceWorker.

So I changed the sw config regex runtimeCaching from:
urlPattern: /(.html|.js|.json|/api/)/,

back to:
urlPattern: //(.*)/

[bobmcgurk]

Need to add code to your /index.html file:

<link rel="manifest" href="manifest.json">

Also helpful to include:

`

`