PWA icon customization

[whitphx]

Description

Customizable PWA icon.

Background: https://discord.com/channels/879548962464493619/1326796863944265810/1326796863944265810

Closes #10329

[gradio-pr-bot]

🪼 branch checks and previews

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

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/01322940db1b16c8e56716dbca563a634eef7018/gradio-5.12.0-py3-none-any.whl

Install Gradio Python Client from this PR

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

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/01322940db1b16c8e56716dbca563a634eef7018/gradio-client-1.10.0.tgz

Use Lite from this PR

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

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

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

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

With the following changelog entry.

PWA icon customization

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.

[freddyaboulton]

In the original comment, the user specifically asks for the pwa icon to reflect the value of favicon_path. It would be cumbersome to expect users to put the same path twice for two separate parameters. I think we should just set the pwa_icon to be the favicon and remove the pwa_icon parameter.

[abidlabs]

Agreed, if we get request for further customization, then I suggest we let developers specify a complete manifest.json file via a parameter. Anything else seems too specific of a parameter.

[whitphx]

Thank you, that's correct.
I updated the code.

[abidlabs]

I tested this here, and I'm no longer seeing the PWA installation. Checking the application debugging console:

[abidlabs]

Side note, we don't have much documentation about pwa. Might be good to add a section here: https://www.gradio.app/guides/sharing-your-app

[whitphx]

I tested this here, and I'm no longer seeing the PWA installation. Checking the application debugging console:

Thanks,
hmm the /pwa_icon/192 endpoint returns 308 redirect. Will see it.

* Request completely sent off
< HTTP/2 308
< date: Wed, 15 Jan 2025 03:40:10 GMT
< server: uvicorn
< location: /
< x-proxied-host: http://10.27.86.25
< x-proxied-path: /pwa_icon/192
< link: <https://huggingface.co/spaces/abidlabs/pwa-test>;rel="canonical"
< x-request-id: VF2w_1
< vary: origin, access-control-request-method, access-control-request-headers
< access-control-allow-credentials: true

[whitphx]

pwa=True is missing in that app ?
https://huggingface.co/spaces/abidlabs/pwa-test/discussions/1

[abidlabs]

But I thought we enable it automatically on Spaces?

[whitphx]

Sorry that's true.

[whitphx]

We need to configure the SSR server to proxy ./pwa_icon path.
At this moment, PWA with a custom icon is working as https://whitphx-gradio-pwa-test.hf.space/ if ssr_mode=False.
Will make the change.

[whitphx]

Please try the latest wheel build.

Maybe ignoring cache is needed since the /pwa_icon endpoint was redirected permanently (308)

[abidlabs]

Amazing @whitphx, works great!

Just a nit: in order to reduce the repo size, can you put the gif and image in this Hugging Face Dataset instead? https://huggingface.co/datasets/huggingface/documentation-images/tree/main/gradio-guides

And load the images from there. That's what we do throughout our guides, e.g.

gradio/guides/10_other-tutorials/styling-the-gradio-dataframe.md

Line 11 in c44da25



[whitphx]

Thanks, done!