Add PWA download banner to mobile navigation

[annarhughes]

Overview

Bloom is a PWA app which means it can be installed/downloaded as a browser app. We currently don't promote this feature, so most users would be unaware that the app can be installed using the browser button.

This task involves adding a banner to the mobile navigation drawer to promote the PWA, with an "Install" button to trigger the download for chromium-based browsers, and further UI for iOS browsers. Note that iOS doesn't support have a function to trigger installing the app, so we instead show an extra description instructing iOS users how to install the app.

There are subsequent PWA tasks linked to the PWA epic issue.
Be aware that there is a similar task to add a banner to desktop - the banner container and text string are different, but much of the logic will remain the same, so consider making the code reusable for this second use case.

Design

This is the banner shown for all browsers

This is the banner shown for iOS only, after the user clicks "Install" in the previous banner

Note that the icons used are ios-share and add-box in material icons which is already integrated. They are 20x20px

Action Items

• Create the UI components e.g. NavigationPWABanner in components/banner
• Add functionality for installing the app for chromium-based browsers using beforeinstallprompt - see this and this resource
• Add functionality/UI explaining how to install the app on iOS browsers
• Add functionality for the "Not now" dismiss button, to hide the banner if the user clicks this button. Use a mix of cookies e.g. if (userCookiesAccepted) Cookies.set('pwaBannerDismissed', 'true') and new redux state user.pwaDismissed. See setReferralPartner for an example.
• [Bonus] Complete the next issue(s) for this epic - Add PWA download banner for desktop course page #1209 Add PWA analytics events #1208

Resources/Instructions

See the resources below for more on PWAs.

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/How_to/Trigger_install_prompt
https://learn.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/
https://www.freecodecamp.org/news/what-are-progressive-web-apps/