Description
Overview
Bloom is a PWA app which means it can be installed/downloaded as a browser app. We previously didn't promote this feature, so most users would be unaware that the app can be installed using the browser button. We added a mobile PWA banner in #1207.
This is an adjacent task to #1207 and involves adding a similar banner to the /courses page. This banner will only be shown for authenticated users who signed up 2+ weeks ago. Note that there will be duplication with code from #1207 and this should be reused and refactored as required.
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.
Design
This is the banner shown for all browsers
This is the banner shown for iOS users after clicking the "Install" button
Action Items
- Create the UI components e.g.
PWABannerincomponents/banner - Reuse functionality for installing the app for chromium-based browsers and iOS, as is done in
NavigationPWABannerin Add PWA download banner to mobile navigation #1207 - Add functionality/UI explaining how to install the app on iOS browsers, similar to Add PWA download banner to mobile navigation #1207
- Add functionality for the "Not now" dismiss button, as in Add PWA download banner to mobile navigation #1207
- Add functionality that only shows this banner for users who have an account and signed up 2+ weeks ago
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/