manifest json for PWA

[whitphx]

Description

Add manifest.json to make the app installable as PWA on Chrome.

Closes: #6734

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/5d233c8a6dd385641555a607befcde5f3f46abcf/gradio-5.9.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@5d233c8a6dd385641555a607befcde5f3f46abcf#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/5d233c8a6dd385641555a607befcde5f3f46abcf/gradio-client-1.8.0.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/5d233c8a6dd385641555a607befcde5f3f46abcf/dist/lite.js""></script>

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@self/app	minor
@self/spa	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

manifest json for PWA

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

Very cool, cc @pngwn for visibility

[abidlabs]

This looks great @whitphx but I'm not seeing the install icon when I test on Chrome on my Macbook. Is there something else I need to do?

Here's my code:

import gradio as gr

gr.Interface(lambda x:x, gr.File(), gr.Textbox()).launch(pwa=True)

Here's what I see:

[whitphx]

@abidlabs The name field in manifest.json is set null if Blocks.title is not set and it causes the problem.
I updated the code to set the default name "Gradio" It looked like a bug that Blocks.title was not set by default and I fixed it.
Please try it again 🙏

[abidlabs]

What do you think about calling this parameter manifest and letting it be either a bool or a str path to a user-specified manifest.json file if the user wants more control over it?

Suggested change

	pwa: bool = False,
	manifest: bool | str = False,

[abidlabs]

Actually thinking about this some more, maybe we can enable this by default in Spaces, in which case, we could do

Suggested change

	pwa: bool = False,
	manifest: bool | None | str = None,

and if a user doesn't override manifest, we automatically set it to True if on Spaces and False otherwise

[whitphx]

Thanks!

Will set the Spaces default 👍

Also, the manifest param has extensibility benefits but I also have some following ideas:

1. In Gradio's case, manifest.json is used only for PWA, so pwa may look clearer, hiding other things that users don't have to care. (This can be true if most Gradio users just want to use the PWA feature but don't want to think about things behind it e.g. manifest.json. wdyt? being simple vs detailed?)
   • If we will need to provide the full manifest.json configuration in the future, we can add the manifest param at that moment and pwa can work as a shorthand for it.
2. When we provide more flexible API to configure the manifest.json, defining the schema with TypedDict or Pydantic like this would be helpful rather than just allowing to pass the JSON string (and this may be too much at this moment):

class ManifestJson(TypedDict):
    name: str
    version: str
    # ... and more fields

def launch(
    # ...
    pwa: bool | ManifestJson = False,
):
    # ...

[whitphx]

My suggestion is just to provide pwa: bool | None for now, and add manifest: ManifestJson | None in the future if we find it's needed. This is an opinion biased for simplicity hiding the details, so Gradio's API design policy and/or users' potential demand may override it, wdyt?

[abidlabs]

Sounds good to me, we can discuss the exact implementation later but fine with keeping the boolean .pwa attribute right now 👍

[abidlabs]

Nice @whitphx! Left a couple of comments, but overall very clean UI for installing an app. Of course, I think its going to be most handy when we have support for installing gradio apps directly from Hugging Face Spaces as well!

[abidlabs]

LGTM nice @whitphx!

[sumitsahoo]

Awesome. Great job team.

[aribornstein]

First of all this is awesome now that we have support for PWA manifests is there a way to enable client side caching and state persistence in our Gradio apps?