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 - #1209 #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/

[annarhughes]

Translations strings for this work:

Here are the translations for the provided English strings:

English (en-GB):

  "pwaBanner": {
      "mobileDescription": "Install the app for access from your homescreen",
      "desktopDescription": "Install the app to access Bloom from your homescreen",
      "iosDescription": "Add Bloom to your homescreen",
      "iosStep1": "1. Tap the share button",
      "iosStep2": "2. Tap “Add To home Screen”"
    }

Spanish (es-ES):

JSON

"pwaBanner": {
      "mobileDescription": "Instala la app para acceder desde tu pantalla de inicio",
      "desktopDescription": "Instala la app para acceder a Bloom desde tu pantalla de inicio",
      "iosDescription": "Añade Bloom a tu pantalla de inicio",
      "iosStep1": "1. Pulsa el botón de compartir",
      "iosStep2": "2. Pulsa “Añadir a pantalla de inicio”"
    }

Portuguese (pt-PT):

JSON

"pwaBanner": {
      "mobileDescription": "Instala o aplicativo para acessar a partir da tela inicial",
      "desktopDescription": "Instala o aplicativo para acessar o Bloom a partir da tela inicial",
      "iosDescription": "Adicione o Bloom à sua tela inicial",
      "iosStep1": "1. Toque no botão de compartilhar",
      "iosStep2": "2. Toque em “Adicionar à Tela Inicial”"
    }

French (fr-FR):

JSON

"pwaBanner": {
      "mobileDescription": "Installez l'application pour y accéder depuis votre écran d'accueil",
      "desktopDescription": "Installez l'application pour accéder à Bloom depuis votre écran d'accueil",
      "iosDescription": "Ajouter Bloom à votre écran d'accueil",
      "iosStep1": "1. Appuyez sur le bouton de partage",
      "iosStep2": "2. Appuyez sur “Ajouter à l’écran d’accueil”"
    }

German (de-DE):

JSON

"pwaBanner": {
      "mobileDescription": "Installiere die App, um von deinem Startbildschirm aus darauf zuzugreifen",
      "desktopDescription": "Installiere die App, um von deinem Startbildschirm aus auf Bloom zuzugreifen",
      "iosDescription": "Füge Bloom zu deinem Startbildschirm hinzu",
      "iosStep1": "1. Tippe auf den Teilen-Button",
      "iosStep2": "2. Tippe auf “Zum Home-Bildschirm hinzufügen”"
    }

Hindi (hi-IN, Latin script):

JSON

"pwaBanner": {
      "mobileDescription": "Apne homescreen se access ke liye app ko install karein",
      "desktopDescription": "Apne homescreen se Bloom tak access pane ke liye app ko install karein",
      "iosDescription": "Bloom ko apne homescreen mein kaise add karein",
      "iosStep1": "1. Share button ko tap karein",
      "iosStep2": "2. “Add To Home Screen” ko tap karein"
    }