PWA Anomaly: "Timed out waiting for start_url to respond"? [SOLVED]

vikr00001 · July 6, 2020, 12:19am

I’m getting an anomaly with my PWA, where on localhost there’s no Lighthouse error for start_url, but on the Galaxy production server, Lighthouse says:

start_url does not respond with a 200 when offline - Timed out waiting for start_url to respond.

Chrome has the “install” icon showing to install the PWA as a desktop app, so that seems to indicate that a lot of the PWA features are available.

Chrome dev tools>Applications shows:

The service worker is activated and running
The manifest is visible and is being read

I’ve cleared the previous service worker, also cleared Cache Storage, prior to running this service worker.

Does anybody have any thoughts on how to debug this?

rjdavid · July 6, 2020, 12:37am

Your service worker started late. Lighthouse has a timeout when waiting for start url to respond.

vikr00001 · July 6, 2020, 2:01am

Thanks very much for this info. What’s the fix for this? I just tried this in imports/startup/client/index.js:

async function main () {
    Meteor.startup(() => {
        import('./serviceWorkerInit').then(() => {
            render(<App />, document.getElementById('app'));
        })
    })
}

main();

…but I’m still getting the anomaly.

mullojo · July 6, 2020, 2:27am

Check out this tutorial This worked flawlessly for me…

// serviceWorker.js
import { Meteor } from 'meteor/meteor'

Meteor.startup(() => {
  navigator.serviceWorker
    .register('/sw.js')
    .then(() => console.info('service worker registered'))
    .catch(error => { 
      console.log('ServiceWorker registration failed: ', error)
    })
})

vikr00001 · July 6, 2020, 5:23am

I think I matched everything to Transform any Meteor App into a PWA and I’m still getting that anomaly.

I don’t know what I’m missing yet.

If there are any differences here vs. how you (i.e. anyone reading this) are doing it, please let me know and I will try that.

Here’s how I have it set up.

Folder structure:

public/manifest.json:

{
  "name": "myWebApp",
  "short_name": "myWebApp",
  "theme_color": "#ffffff",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "description": "My description.",
  "icons": [
    {
      "src": "/images/app-images/heart-512-green_192px.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/app-images/heart-512-green_512px.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "splash_pages": null
}

imports/startup/client/index.js:

import React from 'react'

import { Meteor } from 'meteor/meteor'
import {render} from 'react-dom'

import App from '../../client/ui/router'

render(<App />, document.getElementById('app'));

imports/startup/client/serviceWorkerInit.js:

import React from 'react'
import {render} from 'react-dom'
import App from '../../client/ui/router'

const iOS = () => {
    const iDevices = [
        'iPad Simulator',
        'iPhone Simulator',
        'iPod Simulator',
        'iPad',
        'iPhone',
        'iPod'
    ]

    return !!navigator.platform && iDevices.indexOf(navigator.platform) !== -1;
}

Meteor.startup(() => {
        if (!('serviceWorker' in navigator)) {
            console.log('serviceWorker not in navigator');
            return;
        }
        if (iOS()) {
            console.log('iOS device -- cannot register service worker');
            return;
        }
        navigator.serviceWorker
            .register('/sw.js')
            .then(() => console.info('service worker registered.'))
            .catch(error => {
                console.log('Error registering serviceWorker: ', error)
            })
    }
);

client/main.html:

<head>
    <meta charset="utf-8">

    <title>myWebApp</title>

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

    <meta name="theme-color" content= "#ffffff">

    <meta name="application-name" content="EmpowerPeople.care">
    <meta name="theme-color" content="#ffffff"> 
    <link rel="shortcut icon" type="image/png" href="/images/app-images/favicon.ico?v1" sizes="192x192">
    <link rel="apple-touch-icon" sizes="192x192" href="/images/app-images/apple-touch-icon-180x180.png?v1">
    <link rel="fluid-icon" href="/images/icons-192.png?v1" title="app icon">
    <title>pwa-boilerplate</title>
    <noscript>
        <style>
            body:before { content: "Sorry, your browser does not support JavaScript!"; }
        </style>
    </noscript>
    
    [.....]
    
</head>

<body>
<div id="app">

</div>
</body>

client/main.js:

import '../imports/startup/client'
import '../imports/startup/client/serviceWorkerInit'

rjdavid · July 6, 2020, 4:34pm

Is there a chance that you have a huge meteor js bundle i.e. it takes time for meteor to startup?

Nevertheless, you can instantiate your service worker outside meteor.

vikr00001 · July 6, 2020, 4:52pm

I think I’m okay on that score. Bundle-Visualizer show a bundle size of 1.34 mb, and Lighthouse shows a 99 performance rating.

Could it have anything to do with an interaction between the service worker and React mounting its first components?

Interesting! Is there a link on how to do that?

rjdavid · July 6, 2020, 5:01pm

It doesn’t have to wait for Meteor.startup()

rjdavid · July 6, 2020, 5:06pm

Bundle size of 1.34mb and performance score of 99 does not match unless you are doing some deferred loading in your bundle. You get 99 because of the start_url failure

vikr00001 · July 6, 2020, 5:27pm

Could you provide more info on this please? I’ve been getting a 96-99 Lighthouse performance score prior to any efforts to integrate PWA.

Also, yes, I am doing a lot of deferred loading. Almost all my modules are lazy-loaded.

vikr00001 · July 6, 2020, 5:30pm

How would you do that? Would you put, e.g.:

import '../imports/startup/client/serviceWorkerInit'

…in client/main.js ? I have tried that but it doesn’t appear to have worked in this case.

paulishca · July 6, 2020, 6:29pm

Ok, two things here:

In the Lighthouse Chrome screen at the top just make sure you don’t have ‘Clear storage’ checked. If you still get that status, check the next point.
Make sure you actually handle offline with a 200. Let’s say you stop your Meteor server and then try to open or browse your app. What do you get in your Network tab in chrome? Ideally you should get OK (200) and should manage the offline experience with a base HTML file or something else.

vikr00001 · July 6, 2020, 8:22pm

Thank you, Paul! With ‘Clear storage’ unchecked, the anomaly is gone.

For anyone looking for the ‘Clear storage’ setting, it is here: