Added PWA

[tonyvugithub]

Issue This PR Addresses

Fixed #801

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

This PR turns our Telescope into a Progressive Web App (PWA) to improve user experience on mobile.
Reference: https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

Choose Install app on Chrome

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[humphd]

@tonyvugithub please add more details to this beyond "Ongoing process..."

[humphd]

If this is ready for review, remove Draft and let me know.

[tonyvugithub]

@humphd : I am still adding some screenshots and it should be ready for reviewing

[chrispinkney]

Wow, nice. I just tested the deployment on my phone (using Firefox) and it works really well! There are some issues (like logging in not working, or search being broken or about page 404ing) but the deployment had the same issues so this is not a PWA problem.

Here's some screenshots I took:

[tonyvugithub]

@humphd , @chrispinkney The conflict problem is bigger than I thought. So far none of my attempt has worked. Should we consider upgrade About to a component?

[humphd]

I feel like we're hitting a lot of bugs that relate to About, and not actually doing a ton with it. I'm fine to alter how it works for sure.

[tonyvugithub]

@huynguyez : Actually it is the icon that has the square background https://github.com/Seneca-CDOT/telescope/blob/master/src/web/public/logoImages/manifest-icon-192.png.
If you want a rounded icon then @PedroFonsecaDEV needs to create one for me.

[PedroFonsecaDEV]

@huynguyez

The icon looks fine on my phone. We can investigate how to make it looks prettier on a Mac, but this is going to be in a follow-up.

Congrats @tonyvugithub, let's land this.

[humphd]

Based on conversation on Slack, we agreed that we are going to wait on the response from the next PWA maintainer about how the update path works. If things will be OK, and not require custom UI from us, this is probably good to land.

see note from Dave

[tonyvugithub]

@humphd He should reply me next couple of days as he still actively maintains the repo.

see note from Dave

[tonyvugithub]

@PedroFonsecaDEV @chrispinkney @humphd : The next-pwa creator got back to me and he confirmed that if we changed prod it will update the cache in the PWA.

[humphd]

I think we can try this, and iterate on it later. One thing we could do that I notice is add caching for our posts api, so they get saved at runtime for offline access later.

[tonyvugithub]

@humphd That was sth I have in mind too as I know the image is cached but not the posts. However, it would require more research into the matter. I can always do a follow up in the future.

[chrispinkney]

Woohoo!