Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: PWA install prompt #1302

Open
DonKoko opened this issue Sep 4, 2024 · 3 comments · May be fixed by #1321
Open

Feat: PWA install prompt #1302

DonKoko opened this issue Sep 4, 2024 · 3 comments · May be fixed by #1321
Assignees

Comments

@DonKoko
Copy link
Contributor

DonKoko commented Sep 4, 2024

Prompt users to install PWA when visiting shelf on mobile.

@carlosvirreira carlosvirreira self-assigned this Sep 4, 2024
@carlosvirreira
Copy link
Contributor

After doing tons of research here. It seems like almost no app is doing a popup prompt for users.

I like the @rphlmr approach the most. Show after sign up + also via the notice popup we have. Both can be dismissed.

On the marketing website I will make a page for it too.

@carlosvirreira
Copy link
Contributor

Screenshot 2024-09-05 at 14 21 33

Desktop: Let's use the component we have for notices for this purpose. The black box will be a gif showing how to install on mobile. Full tutorial will send to this page: https://www.shelf.nu/blog/new-shelf-pwa-progresive-web-application-live-learn-how-to-use

Mobile: I would add it to the landing page after signup (Asset Index) / message can be dismissed
Screenshot 2024-09-05 at 15 42 06

Dashboard: Using the existing notices component we will also promote the message and URL to marketing site.

On mobile menu (if they click skip):
Screenshot 2024-09-05 at 15 52 31

@DonKoko
Copy link
Contributor Author

DonKoko commented Sep 16, 2024

Desktop: Let's use the component we have for notices for this purpose. The black box will be a gif showing how to install on mobile. Full tutorial will send to this page: https://www.shelf.nu/blog/new-shelf-pwa-progresive-web-application-live-learn-how-to-use

This component we already have so nothing new to develop here. We just need to change the content. Also would be good to change the cookie name so even people who dismissed it already can still see it.

Mobile: I would add it to the landing page after signup (Asset Index) / message can be dismissed

Okey so a few things here. I like the design and general visual approach but I have some feedback.
Doing it after sign-up I dont think is enough. Users could sign up via desktop and open it later via mobile. Also there could be long existing users who also should be informed about it.
Here would be my suggestion:

  1. Show it to any user that opens shelf(logged in) on mobile (not pwa). So if they are opening it from the browser
  2. Give 2 options for cta: "Remind me in 2 weeks" or "No thanks". They both close it, one does it for 2 weeks the other one forever. We can control it via cookie expiration.
  3. I think the text is not great. Installing PWA vs using in browser doesnt change the features you can access. At least not yet as we dont have any PWA specific features. I would write something like: "For the best experience, install shelf on your mobile device. Read more(link to extra explanation)"

Also looking at the example we have from Rapha, this seems to consider just iphones where we cant add an action for it and we want to show a short looping video showing how to do it.
On Android I believe we can actually force a prompt for installing PWA directly from there. @hunar1312 could you please check that and confirm.

@hunar1312 I think you could already start on it. There is some technical stuff to already do:

  1. Detect iphone vs android
  2. Detect if user is already in pwa or not(idk if we can do that or we have to set up our own control)
  3. Prepare the modal that will trigger on mobile.

I will send you some code examples on discord.

@DonKoko DonKoko closed this as completed Sep 16, 2024
@DonKoko DonKoko reopened this Sep 16, 2024
@hunar1312 hunar1312 linked a pull request Sep 19, 2024 that will close this issue
@hunar1312 hunar1312 linked a pull request Sep 19, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: 🏗 In progress
Development

Successfully merging a pull request may close this issue.

3 participants