feat: add PWA support share functionality (#1060)

* feat: Add manifest file

* fix: Embed webmanifest file

* fix: use standalone mode, not fullscreen

* feat: Open add dialog by default if share query params are present

* fix: Use relative url in manifest to allow subfolder

* fix: Remove missing icon

* fix: Repĺace current history entry if sharing

* chore: Make query params consistent

* feat: Add more pwa icons

* fix: js prettier

---------

Co-authored-by: Felipe Martin <812088+fmartingr@users.noreply.github.com>
Co-authored-by: Felipe M. <me@fmartingr.com>

internal/view/assets/js/page/home.js

@@ -373,7 +373,11 @@ export default {
 			this.page = 1;
 			this.loadData();
 		},
-		showDialogAdd() {
+		showDialogAdd(values) {
+			if (values === undefined) {
+				values = {};
+			}
+
 			this.showDialog({
 				title: "New Bookmark",
 				content: "Create a new bookmark",
@@ -381,15 +385,18 @@ export default {
 					{
 						name: "url",
 						label: "Url, start with http://...",
+						value: values.url || "",
 					},
 					{
 						name: "title",
 						label: "Custom title (optional)",
+						value: values.title || "",
 					},
 					{
 						name: "excerpt",
 						label: "Custom excerpt (optional)",
 						type: "area",
+						value: values.excerpt || "",
 					},
 					{
 						name: "tags",
@@ -1034,6 +1041,36 @@ export default {
 		this.search = url.query.search || "";
 		this.page = url.query.page || 1;
 
+		var isSharing =
+			url.query.url !== undefined || url.query.excerpt !== undefined;
+		if (isSharing) {
+			// this is what the spec says
+			var shareData = {
+				url: url.query.url,
+				excerpt: url.query.excerpt,
+				title: url.query.title,
+			};
+
+			// In my testing sharing from chrome and ff focus, this is how data arrives
+			if (shareData.url === undefined) {
+				shareData.url = url.query.excerpt;
+				shareData.title = url.query.title;
+				shareData.excerpt = "";
+			}
+
+			this.showDialogAdd(shareData);
+			var history = {
+				activePage: "page-home",
+				search: this.search,
+				page: this.page,
+			};
+
+			var url = new Url(document.baseURI);
+			url.hash = "home";
+			url.clearQuery();
+			window.history.replaceState(history, "page-home", url);
+		}
+
 		this.loadData(false, true);
 	},
 };

internal/view/assets/manifest.webmanifest

@@ -0,0 +1,48 @@
+{
+	"name": "Shiori",
+	"short_name": "Shiori",
+	"display": "standalone",
+	"description": "Shiori is a simple bookmarks manager written in the Go language. Intended as a simple clone of Pocket. You can use it as a command line application or as a web application. This application is distributed as a single binary, which means it can be installed and used easily.",
+	"icons": [
+		{
+			"src": "res/apple-touch-icon-144x144.png",
+			"type": "image/png",
+			"sizes": "144x144"
+		},
+		{
+			"src": "res/apple-touch-icon-152x152.png",
+			"type": "image/png",
+			"sizes": "152x152",
+			"purpose": "maskable"
+		},
+		{
+			"src": "res/pwa-192x192.png",
+			"type": "image/png",
+			"sizes": "192x192",
+			"purpose": "maskable"
+		},
+		{
+			"src": "res/pwa-512x512.png",
+			"type": "image/png",
+			"sizes": "512x512",
+			"purpose": "maskable"
+		},
+		{
+			"src": "res/pwa-1024x1024.png",
+			"type": "image/png",
+			"sizes": "1024x1024",
+			"purpose": "maskable"
+		}
+	],
+	"start_url": "../",
+	"share_target": {
+		"action": "../",
+		"enctype": "application/x-www-form-urlencoded",
+		"method": "GET",
+		"params": {
+			"title": "title",
+			"text": "excerpt",
+			"url": "url"
+		}
+	}
+}

internal/view/content.html

@@ -13,6 +13,7 @@
 	<link rel="icon" type="image/png" href="assets/res/favicon-32x32.png" sizes="32x32">
 	<link rel="icon" type="image/png" href="assets/res/favicon-16x16.png" sizes="16x16">
 	<link rel="icon" type="image/x-icon" href="assets/res/favicon.ico">
+	<link rel="manifest" href="assets/manifest.webmanifest" />
 
 	<link href="assets/css/style.css" rel="stylesheet">
 

internal/view/embed.go

@@ -2,7 +2,7 @@ package views
 
 import "embed"
 
-//go:embed assets/js/* assets/css/* assets/res/*
+//go:embed assets/js/* assets/css/* assets/res/* assets/manifest.webmanifest
 var Assets embed.FS
 
 //go:embed *.html

internal/view/index.html

@@ -13,6 +13,7 @@
 	<link rel="icon" type="image/png" href="assets/res/favicon-32x32.png" sizes="32x32">
 	<link rel="icon" type="image/png" href="assets/res/favicon-16x16.png" sizes="16x16">
 	<link rel="icon" type="image/x-icon" href="assets/res/favicon.ico">
+	<link rel="manifest" href="assets/manifest.webmanifest" />
 
 	<link href="assets/css/style.css" rel="stylesheet">