manifest json for PWA (#10187)

* Serve manifest.json for PWA

* Set the PWA title

* add changeset

* Add the pwa option to Blocks.launch()

* Set icon files with 192 and 512 pixels which are necessary for PWA on Chrome

* add changeset

* Format

* Configure the /manifest.json path for SPA and SSR

* Set the default value for the name field in the manifest.json

* Fix gr.Interface() not to override the default title value

* Add a test case for ChatInterface.title

* Set the default values to Interface.title and ChatInterface.title

* Revert "Set the default values to Interface.title and ChatInterface.title"

This reverts commit 3574d6b.

* Revert "Add a test case for ChatInterface.title"

This reverts commit 276d6f2.

* Revert "Fix gr.Interface() not to override the default title value"

This reverts commit 90f0efa.

* Enable the PWA feature on Spaces by default

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: whitphx

.changeset/loose-kids-accept.md

@@ -0,0 +1,7 @@
+---
+"@self/app": minor
+"@self/spa": minor
+"gradio": minor
+---
+
+feat:`manifest json` for PWA

gradio/blocks.py

@@ -2313,6 +2313,7 @@ def launch(
         node_server_name: str | None = None,
         node_port: int | None = None,
         ssr_mode: bool | None = None,
+        pwa: bool | None = None,
         _frontend: bool = True,
     ) -> tuple[App, str, str]:
         """
@@ -2351,6 +2352,7 @@ def launch(
             enable_monitoring: Enables traffic monitoring of the app through the /monitoring endpoint. By default is None, which enables this endpoint. If explicitly True, will also print the monitoring URL to the console. If False, will disable monitoring altogether.
             strict_cors: If True, prevents external domains from making requests to a Gradio server running on localhost. If False, allows requests to localhost that originate from localhost but also, crucially, from "null". This parameter should normally be True to prevent CSRF attacks but may need to be False when embedding a *locally-running Gradio app* using web components.
             ssr_mode: If True, the Gradio app will be rendered using server-side rendering mode, which is typically more performant and provides better SEO, but this requires Node 20+ to be installed on the system. If False, the app will be rendered using client-side rendering mode. If None, will use GRADIO_SSR_MODE environment variable or default to False.
+            pwa: If True, the Gradio app will be set up as an installable PWA (Progressive Web App). If set to None (default behavior), then the PWA feature will be enabled if this Gradio app is launched on Spaces, but not otherwise.
         Returns:
             app: FastAPI app object that is running the demo
             local_url: Locally accessible link to the demo
@@ -2533,6 +2535,7 @@ def reverse(text):
                 "http" if share_server_address is not None else "https"
             )
             self.has_launched = True
+            self.pwa = utils.get_space() is not None if pwa is None else pwa
 
             self.protocol = (
                 "https"

gradio/routes.py

@@ -371,6 +371,7 @@ async def conditional_routing_middleware(
                     and not path.startswith("/static")
                     and not path.startswith("/login")
                     and not path.startswith("/logout")
+                    and not path.startswith("/manifest.json")
                 ):
                     if App.app_port is None:
                         App.app_port = request.url.port or int(
@@ -1436,6 +1437,35 @@ def robots_txt():
             else:
                 return "User-agent: *\nDisallow: "
 
+        @app.get("/manifest.json")
+        def manifest_json():
+            if not blocks.pwa:
+                raise HTTPException(status_code=404)
+
+            return ORJSONResponse(
+                content={
+                    # NOTE: Required members: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#required_manifest_members
+                    "name": app.get_blocks().title or "Gradio",
+                    "icons": [
+                        {
+                            "src": "static/img/logo192.svg",
+                            "sizes": "192x192",
+                            "type": "image/svg+xml",
+                            "purpose": "any",
+                        },
+                        {
+                            "src": "static/img/logo512.svg",
+                            "sizes": "512x512",
+                            "type": "image/svg+xml",
+                            "purpose": "any",
+                        },
+                    ],
+                    "start_url": "./",
+                    "display": "standalone",
+                },
+                media_type="application/manifest+json",
+            )
+
         @router.get("/monitoring", dependencies=[Depends(login_check)])
         async def analytics_login(request: fastapi.Request):
             if not blocks.enable_monitoring:

js/app/src/routes/[...catchall]/+page.svelte

@@ -336,6 +336,7 @@
 
 <svelte:head>
 	<link rel="stylesheet" href={"./theme.css?v=" + config?.theme_hash} />
+	<link rel="manifest" href="/manifest.json" />
 
 	{#if config.head}
 		{@html config.head}

js/app/vite.config.ts

@@ -37,7 +37,11 @@ export default defineConfig(({ mode }) => {
 		// plugins: [],
 		server: {
 			port: 9876,
-			open: "/"
+			open: "/",
+			proxy: {
+				"/manifest.json": "http://localhost:7860",
+				"^/static/.*": "http://localhost:7860"
+			}
 		},
 		resolve: {
 			conditions: ["gradio"]

js/spa/index.html

@@ -80,6 +80,8 @@
 			src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"
 			async
 		></script>
+
+		<link rel="manifest" href="/manifest.json" />
 	</head>
 
 	<body