Gatsby: Titles aren't rendered when opening pages in the background using plugin-offline

[antonmedv]

Description

No title if Gatsby app is opened in the background.

Steps to reproduce

1. Install next Gatsby
2. gatsby new title && cd title
3. gatsby develop
4. Open link in the background
5. Check for the title in the tab

Expected result

title is set.

Actual result

no title

Environment

gatsby info --clipboard

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Shell: 4.4.19 - /usr/local/bin/bash
Binaries:
Node: 10.8.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.92
Firefox: 59.0.1
Safari: 11.1.2
npmPackages:
gatsby: next => 2.0.0-rc.15
gatsby-plugin-feed: next => 2.0.0-rc.2
gatsby-plugin-google-analytics: next => 2.0.0-rc.2
gatsby-plugin-google-fonts: 0.0.4 => 0.0.4
gatsby-plugin-manifest: next => 2.0.2-rc.1
gatsby-plugin-offline: next => 2.0.0-rc.6
gatsby-plugin-react-helmet: next => 3.0.0-rc.1
gatsby-plugin-sass: next => 2.0.0-rc.2
gatsby-plugin-sharp: next => 2.0.0-rc.3
gatsby-remark-copy-linked-files: next => 2.0.0-rc.1
gatsby-remark-images: next => 2.0.1-rc.1
gatsby-remark-prismjs: next => 3.0.0-rc.2
gatsby-remark-responsive-iframe: next => 2.0.0-rc.1
gatsby-remark-smartypants: next => 2.0.0-rc.1
gatsby-source-filesystem: next => 2.0.1-rc.2
gatsby-source-github-api: 0.0.3 => 0.0.3
gatsby-transformer-remark: next => 2.1.1-rc.1
gatsby-transformer-sharp: next => 2.1.1-rc.3
npmGlobalPackages:
gatsby-cli: 1.1.58

[kakadiadarpan]

Hi @antonmedv, this happens only in develop mode, not for the production build. Correct?

[antonmedv]

Here is my production: https://medv.io
Same results.

[antonmedv]

Code https://github.com/antonmedv/medv.io

[kakadiadarpan]

@antonmedv I don't see the issue here

[antonmedv]

Open another link in background from my site.

[kakadiadarpan]

Opened multiple links in the background, cannot reproduce. Am I missing something?

[fk]

@antonmedv @kakadiadarpan

Seems there's no <title> set until the browser tab becomes active:

The same happens on e.g. next.gatsbyjs.org/blog:

gatsbyjs.org behaves fine though:

OT: Love your site @antonmedv!

[kakadiadarpan]

@fk I wonder why that is not happening for me 😕

[pieh]

It seems like service worker takes over there and using appshell (empty page) until tab is foces and react update DOM - if you unregister service worker, and then open link in background, Title shows up as expected.

/cc @davidbailey00

[davidbailey00]

There's a chance this is an upstream bug with React Helmet, since I've found that all other content is rendered while in the background. Just investigating this now

[davidbailey00]

I've checked this out and it definitely seems like an upstream bug with React Helmet - it might be hard to work around since we can't use Helmet.renderStatic() in the browser, so we'll probably have to wait until it gets fixed upstream / submit our own PR to Helmet (although unfortunately it seems abandoned). See https://github.com/nfl/react-helmet/issues/401

[deebov]

@fk I wonder why that is not happening for me 😕

go to the site and open an another link in the new tab.
the same issue with me. but i use create-react-app.

[davidbailey00]

Hi @deebov, please see nfl/react-helmet#401 for the upstream issue if you're not using Gatsby :slightly_smiling_face:

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[antonmedv]

@gatsbybot not fixed

[davidbailey00]

As per nfl/react-helmet#314, as a workaround, you can use the prop defer={false} in your <Helmet> component to set/update the title as soon as possible. (Thanks @beaugunderson for pointing me to the right place!)

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[davidbailey00]

Going to keep this open because it's not really well documented at the moment (or maybe we could apply the given workaround automatically)

[hkr86]

This is not fixing the issue for me. If I run gatsby build all the index.html files have an empty title tag (). On client side it gets rendered. Looks like ssr is not working. Any solutions?

[hkr86]

13737 pointed me into the right direction!