mod_conversejs: Allow installation as PWA
authorBetaRays <BetaRays@proton.me>
Sun, 17 Mar 2024 15:05:29 +0100
changeset 5875 1c8197075d04
parent 5874 1ac4a59ac575
child 5876 8aec430ba205
mod_conversejs: Allow installation as PWA
mod_conversejs/README.markdown
mod_conversejs/mod_conversejs.lua
mod_conversejs/templates/template.html
--- a/mod_conversejs/README.markdown	Thu Mar 14 09:48:30 2024 +0000
+++ b/mod_conversejs/README.markdown	Sun Mar 17 15:05:29 2024 +0100
@@ -158,6 +158,34 @@
 
 The example above uses the `[[` and `]]` syntax simply because it will not conflict with any embedded quotes.
 
+Custimizing the generated PWA options
+-------------------------------------
+
+``` {.lua}
+conversejs_name = "Service name" -- Also used as the web page title
+conversejs_short_name = "Shorter name"
+conversejs_description = "Description of the service"
+conversejs_manifest_icons = {
+	{
+	    src = "https://example.com/logo/512.png",
+    	sizes = "512x512",
+	},
+	{
+    	src = "https://example.com/logo/192.png",
+	    sizes = "192x192",
+	},
+	{
+    	src = "https://example.com/logo/192.svg",
+	    sizes = "192x192",
+	},
+	{
+	    src = "https://example.com/logo/512.svg",
+    	sizes = "512x512",
+	},
+}
+conversejs_pwa_color = "#397491"
+```
+
 Compatibility
 =============
 
--- a/mod_conversejs/mod_conversejs.lua	Thu Mar 14 09:48:30 2024 +0000
+++ b/mod_conversejs/mod_conversejs.lua	Sun Mar 17 15:05:29 2024 +0100
@@ -118,6 +118,11 @@
 
 local add_tags = module:get_option_array("conversejs_tags", {});
 
+local service_name = module:get_option_string("name", "Prosody IM and Converse.js");
+local service_short_name = module:get_option_string("short_name", "Converse");
+local service_description = module:get_option_string("description", "Messaging Freedom")
+local pwa_color = module:get_option_string("pwa_color", "#397491")
+
 module:provides("http", {
 	title = "Converse.js";
 	route = {
@@ -126,7 +131,9 @@
 
 			event.response.headers.content_type = "text/html";
 			return render(html_template, {
-					service_name = module:get_option_string("name");
+					service_name = service_name;
+					-- note that using a relative path won’t work as this URL doesn’t end in a /
+					manifest_url = module:http_url().."/manifest.json",
 					header_scripts = { js_url };
 					header_style = { css_url };
 					header_tags = add_tags;
@@ -143,6 +150,42 @@
 			event.response.headers.content_type = "application/javascript";
 			return js_template:format(json_encode(converse_options));
 		end;
+		["GET /manifest.json"] = function (event)
+			-- See manifest.json in the root of Converse.js’s git repository
+			local data = {
+				short_name = service_short_name,
+				name = service_name,
+				description = service_description,
+				categories = {"social"},
+				icons = module:get_option_array("manifest_icons", {
+					{
+						src = cdn_url..version.."/dist/images/logo/conversejs-filled-512.png",
+						sizes = "512x512",
+					},
+					{
+						src = cdn_url..version.."/dist/images/logo/conversejs-filled-192.png",
+						sizes = "192x192",
+					},
+					{
+						src = cdn_url..version.."/dist/images/logo/conversejs-filled-192.svg",
+						sizes = "192x192",
+					},
+					{
+						src = cdn_url..version.."/dist/images/logo/conversejs-filled-512.svg",
+						sizes = "512x512",
+					},
+				}),
+				start_url = module:http_url(),
+				background_color = pwa_color,
+				display = "standalone",
+				scope = module:http_url().."/",
+				theme_color = pwa_color,
+			}
+			return {
+				headers = { content_type = "application/schema+json" },
+				body = json_encode(data),
+			}
+		end;
 		["GET /dist/*"] = serve_dist;
 	}
 });
--- a/mod_conversejs/templates/template.html	Thu Mar 14 09:48:30 2024 +0000
+++ b/mod_conversejs/templates/template.html	Sun Mar 17 15:05:29 2024 +0100
@@ -5,9 +5,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 {header_style#
 <link rel="stylesheet" type="text/css" media="screen" href="{item}"/>}
+<link rel="manifest" href="{manifest_url}">
 {header_scripts#
 <script charset="utf-8" src="{item}"></script>}
-<title>{service_name?Prosody IM and Converse.js}</title>
+<title>{service_name}</title>
 {header_tags#
 {item!}}
 </head>