Turn Telescope into a Progressive Web App (PWA)

[cindyorangis]

What would you like to be added:
We briefly talked about this a long time ago and I think our Gatsby website is ready to be a PWA now

Why would you like this to be added:
Our frontend has been incredibly improved the last few days for mobile. PWA is the next step

[humphd]

https://www.gatsbyjs.org/docs/progressive-web-app/ has some good info. We already have the mainfest plugin, and it should be tweaked to give our app the right look and feel on mobile.

Adding a service worker would be interesting.

[Silvyre]

I'd like to collaborate on this.

[humphd]

https://alligator.io/gatsbyjs/gatsby-pwa/ is also useful.

Another thing I'd love is to be able to install the app on my phone or desktop. Probably that will require some work to get logos in the right sizes/formats, too.

[cindyorangis]

I don't wanna hog this so if anyone else wants to work on this issue, I'm definitely willing on collaborate :)

[Silvyre]

Me!

[cindyorangis]

Haha wanna swap so you lead and I follow? XD idk where to start

[Silvyre]

Sure, I can give it a shot, but I should warn you that I'm relatively new to PWA stuff!

To start, I'd like to get a handle on the all of remaining work (and, if possible, split it into multiple issues/PRs), bearing in mind the the information supplied via the links posted by @humphd, above, as well as the feedback supplied by @humphd in #805.

For example, I am not yet sure if we have any more work to do concerning our manifest.json file, but I know that we still need to implement a service worker (a vital task that cannot really be split into multiple issues).

[Silvyre]

Some more useful Gatsby docs: https://www.gatsbyjs.org/docs/resource-handling-and-service-workers/

[humphd]

If you want to work on this, here's what I'd focus on first: make sure that we cache files in a service worker when we load, so that the offline case works. The Workbox stuff has a lot of builtin strategies for doing this, and I suspect that Gatsby's SW stuff is a thin wrapper around that.

The list of TODOs in general is here:

The notes from web.dev about this: https://web.dev/works-offline/?utm_source=lighthouse&utm_medium=devtools

The Offline stuff in Gatsby is where you can hook into the Workbox caching stuff, and specify what types of files and paths to cach, see https://www.gatsbyjs.org/packages/gatsby-plugin-offline/

[humphd]

Another thing I'd love to see us experiment with is https://swr.now.sh/.

[chrispinkney]

See also #1477, this could be something that we explore for the PWA too. We decided to close this PR (since it relates to Gatsby) since we're porting to NextJS, but this would be perfect as an addition to our PWA.

cc @tonyvugithub.

[chrispinkney]

@tonyvugithub Are you still interested in working on this for 1.9?

[tonyvugithub]

@chrispinkney i am