feat: Install PWA button

[xgraceyan]

Summary

• Adds an "Install App" button to the Header for easy PWA installation.
  

• Button changes to just icon in mobile view, to ensure everything in the header fits

• Button disappears if PWA is unsupported (Safari, IE?) or if the user has the app already installed.

• Added PWA store to preserve PWA install prompt (the install prompt was lost upon desktop to mobile window resize when only storing it to component state)

Test Plan

• Ensure button prompts + installs PWA properly on both desktop and mobile
• Ensure buttons in the header all fit on mobile view (width <400px)
• Ensure button disappears if PWA is already installed, on both the web and PWA versions.
• Ensure button reappears upon PWA uninstallation
• Ensure button is hidden when user is on unsupported browser (Safari & Firefox for desktop, IE -- if anyone uses that anymore)

Issues

Closes #936

[MinhxNguyen7]

Seems to work from a quick check on my phone. FYI, the check allows the button to hide after the PWA has been installed or if you're in incognito.

That being said. I think a banner, or just somewhere other than the top bar, might be better.

[KevinWu098]

Seems to work from a quick check on my phone. FYI, the check allows the button to hide after the PWA has been installed or if you're in incognito.

That being said. I think a banner, or just somewhere other than the top bar, might be better.

I agree here -- we have pretty limited space in the header on smaller screen sizes. A dismissible banner (not unlike RecruitmentBanner) might be better for grabbing user attention w/o compromising on permanent screen real estate

[MinhxNguyen7]

But then, we agreed that people aren't likely to install it before actually using it, so they'd just dismiss it.

How about a banner that comes back if it has been long enough? Something like a one-month delay could make sense.

[KevinWu098]

Makes sense @MinhxNguyen7!

[xgraceyan]

I've begun to implement a dismissible banner for the PWA. However, if we've agreed to hide it only until after a month from when the user first uses AntAlmanac, it doesn't quite make sense for a banner like this because it's already relatively small.
I think a dialog/modal similar to Patch Notes would make more sense if we wanted to reduce initial clutter; otherwise, we could just have the banner act similarly to Recruitment Banner and show up immediately for new users, and a month later on dismiss. Please let me know what you guys think!

I'm also not sure about the positioning -- the search screen is starting to get busy, but there's really nowhere else to put the banner imo.

[KevinWu098]

To clarify, what Minh and I mean is that the banner reappears one month after dismissal, not that it only first appears after a month has gone by

[KevinWu098]

UI-wise, I agree that it should be more prominent without being more obtrusive...

Perhaps a larger initial banner across the calendar? Maybe even another floating action button?

thoughts @MinhxNguyen7?

[MinhxNguyen7]

I think that banner at the top middle, automatically disappearing after 5 seconds (let's say) would be good. It would be pretty annoying if it was another content-covering thing that you need to dismiss.

As for the re-appearance delay, @KevinWu098, that is how I understood you. Also, an option might be for it to pop up (the first time) a minute or so after you open the page. That way, it is more impactful, and people might be more inclined to download after they try it.

Also, I don't think the question part of the banner is necessary, and "INSTALL ANTALMANAC" with the icon suffices. We're not saying anything that people don't already know; they know what installing an app entails.