Use Richer UI install for PWA on Chrome

[RayBB]

Chrome supports a richer install UI for progressive web apps.

We can include screenshots (both mobile and desktop) and a description.

Img of how it looks

Describe the problem that you'd like solved

Use these new features to improve the experience.

Proposal & Constraints

Your task:

• [ ] Find/write a description
• [ ] Find/take screenshots for mobile
• [ ] Find/take screenshots for desktop
• [ ] Post to Slack asking for feedback on description/screenshots
• [ ] Upload screenshots (probably to internet archive - ask Mek)
• [ ] Create a PR updating the manifest with the new informations
• [ ] Provide screenshots of the new install UI working (if you can't get it working locally ask and we can put it on testing)

Note: this is not compatible with Firefox

If you would like to work on this please just say you'd like to work on it and get started. I'll assign it to you when I get a chance.

Additional context

• How to add Richer Install UI
• https://developer.mozilla.org/en-US/docs/Web/Manifest/screenshots
• You might find inspiration from the Chrome App here

Stakeholders

[Sameer-Pal]

Hi, @RayBB I'd like to work on that

[RayBB]

@Sameer-Pal that would be wonderful!

[RayBB]

@Sameer-Pal please let me know if you're still working on this. Otherwise we can give someone else a chance to work on it.

[Sameer-Pal]

Hi, @RayBB I'am working on it, I'll deliver the PR shortly!

[Sameer-Pal]

Hi, @RayBB It's been written to clone using SSH not using HTTPS but it's not working that way! Bcz, key is not provided Should i run it using HTTPS ?

[scottbarnes]

@Sameer-Pal, it may be the case that you need to add your SSH key to GitHub. If you've not tried the steps in Permission denied while cloning, they may be worth checking out.

[OfcPeriwinkle]

@Sameer-Pal, did you mean to remove your assignment from this issue or are you still working on a PR?

I might be interested in taking this over if you are looking to hand it off.

[RayBB]

@OfcPeriwinkle please go ahead and try. You're assigned now.

[OfcPeriwinkle]

Just wanted to post an update since it's been a little bit. I submitted a volunteer form a few days ago and I'm just waiting on the Slack invite. I have a draft description and some screenshots for review once I'm able to join the channel.

I tested out the manifest locally with the desktop screenshots I have and everything looks like what we'd expect. I'm not too sure how to go about testing the mobile install UI locally so if someone has an idea of how to do that I'm all ears!

[RayBB]

@mekarpeles can you check the volunteer form? @OfcPeriwinkle please share your draft here. For mobile you can try gitpod and access the address you get from your phone.

[RayBB]

@OfcPeriwinkle are you still working on this?

[OfcPeriwinkle]

@RayBB Just started a new job so I've been busy with onboarding. I'll post what I have for review once I get some time this week.

[OfcPeriwinkle]

Apologies for the delay, here are the draft screenshots and description.

Description

• "An open, editable library catalog for every book published. Read, borrow, and discover more than 3M books for free."

Landing Page

• Label
  • "Read free library books online. Millions of books available through Controlled Digital Lending."

Search

• Label
  • "Search for books, authors, and more."

Student Library

• Label
  • "Utilize a school library designed for a K-12 audience."

Trending

• Label
  • "See which titles are currently trending."

Lists

• Label
  • "Explore and create book lists."

[RayBB]

@OfcPeriwinkle I think these look pretty fantastic. I'm going to see if we can get any community feedback. However, I think you can open a PR now as the basics of these are probably going to stay the same.

Thanks!

[RayBB]

@mekarpeles @cdrini do either of you wanna provide feedback this?

[cdrini]

Taking a look at this now; those look great @OfcPeriwinkle ! We have a similar set of screenshots we use for the play store here: https://github.com/internetarchive/openlibrary/blob/59c8fa5ce588020633ee0f16d23aa052d8a43ea9/conf/twa/Play_Store_SS.mockup . It has screenshots for a few of the places you have taken screenshots, but they're a bit outdated. Would you be able to update the .mockup file with screenshots for the current site? And use the same format to create new screenshots for desktop.

For the description, let's copy it from the play store to be consistent: Open Library is an open, editable library catalog, building towards a web page for every book ever published. Read, borrow, and discover more than 3M books for free.