Add PWA install button for Android users to increase adoption #2504
Conversation
jstarner
force-pushed
the
pwa-install-button
branch
from
5bcbcdb to
ae82931
Compare
| <%= filter_place_menu_item notifications_settings_path, "Notification Settings", "settings" %> | ||
|
|
||
| <%= tag.li class: "popup__item", hidden: true, data: { controller: "pwa-install", filter_target: "item", navigable_list_target: "item" } do %> | ||
| <%= icon_tag "install-edge", class: "popup__icon" %> |
There was a problem hiding this comment.
Placeholder icon for now, will likely want to use something else. Possibly something like https://www.shadcn.io/icon/mdi-cellphone-arrow-down-variant
| "purpose": "maskable" | ||
| } | ||
| ], | ||
| "screenshots": [ |
There was a problem hiding this comment.
These are needed to add support for rich PWA install flow: https://developer.chrome.com/blog/richer-pwa-installation
These are placeholders for now, will need proper examples if ya'll want to support this rich UI
| @@ -0,0 +1,9 @@ | |||
| window.addEventListener("beforeinstallprompt", (e) => { | |||
| const ua = navigator.userAgent | |||
| if (!(/Android/i.test(ua) && /Chrome/i.test(ua))) return; | |||
There was a problem hiding this comment.
iOS does not support calling the install prompt, and from what I can tell it only works in Chrome on Android. Don't think it's necessary for Desktop users as mobile seems like the main target audience.
| <%= tag.li class: "popup__item hidden", data: { controller: "pwa-install", filter_target: "item", navigable_list_target: "item" } do %> | ||
| <%= icon_tag "install-edge", class: "popup__icon" %> | ||
| <button class="popup__btn btn" data-action="pwa-install#install" data-pwa-install-target="button"> | ||
| <span>Install Fizzy App</span> |
There was a problem hiding this comment.
Might want some different copy for this, just what I came up with 💁♂️
1 participant
Summary
This PR adds a PWA install button to the user settings menu, specifically targeting Android Chrome users. It leverages the
beforeinstallpromptevent to detect installation eligibility and implements the richer PWA installation UIKey Changes
app/views/my/menus/_settings.html.erb).pwa_install_controller.jsto manage the installation flow, listen for availability events, and toggle visibility of the install button.app/javascript/initializers/pwa_install.jsto capture thebeforeinstallpromptevent and store the deferred prompt for later use.manifest.json.erbwith high-quality screenshots of the Activity Feed, Project Board, and Card Details to enhance the "Rich Install" experience on supported platforms.Test Plan