Add pwa (#3890)

* Don't use Chrome or indeed Firefox on Android

Would close #1963. But I will not finish this PR because the idea that every single website on the internet should have to do this is absolutely ridiculous.

* add pwa manifest

Add a pwa manifest as defined in https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs
- creates shortcuts without the browser frame
- has a splash screen
- has an independent view stack than the browser one

* update manifest as per pwabuilder.com

* add 32x32 and 48x48 icon config

* enhance manifest spec compliance

* change as per suggestions

* Update app/layout/layout.phtml

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

* fix mobile icon padding

* remove screen auto rotation

* change theme color to white

* Move meta
(Should not be in the referrer condition)

* JSON HTTP cache

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

5 files changed, 34 insertions, 0 deletions

diff --git a/app/layout/layout.phtml b/app/layout/layout.phtml
index 791bfb149..c5c1d22ff 100644
--- a/app/layout/layout.phtml
+++ b/app/layout/layout.phtml
@@ -13,6 +13,7 @@ if (_t('gen.dir') === 'rtl') {
 <?php $this->renderHelper('javascript_vars'); ?>
 		</script>
 		<?= self::headScript() ?>
+		<link rel="manifest" href="<?= Minz_Url::display('/themes/manifest.json') ?>" />
 		<link rel="shortcut icon" id="favicon" type="image/x-icon" sizes="16x16 64x64" href="<?= Minz_Url::display('/favicon.ico') ?>" />
 		<link rel="icon msapplication-TileImage apple-touch-icon" type="image/png" sizes="256x256" href="<?= Minz_Url::display('/themes/icons/favicon-256.png') ?>" />
 		<link rel="apple-touch-icon" href="<?= Minz_Url::display('/themes/icons/apple-touch-icon.png') ?>" />
@@ -20,6 +21,7 @@ if (_t('gen.dir') === 'rtl') {
 		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 		<meta name="apple-mobile-web-app-title" content="<?= FreshRSS_Context::$system_conf->title ?>">
 		<meta name="msapplication-TileColor" content="#FFF" />
+		<meta name="theme-color" content="#FFF" />
 <?php if (!FreshRSS_Context::$system_conf->allow_referrer) { ?>
 		<meta name="referrer" content="never" />
 <?php } ?>
diff --git a/p/themes/.htaccess b/p/themes/.htaccess
index bde718537..706a7b88e 100644
--- a/p/themes/.htaccess
+++ b/p/themes/.htaccess
@@ -8,6 +8,7 @@
 <IfModule mod_expires.c>
 	ExpiresActive	on
 	ExpiresByType	application/font-woff	"access plus 1 month"
+	ExpiresByType	application/json	"access plus 1 month"
 	ExpiresByType	image/gif	"access plus 1 month"
 	ExpiresByType	image/png	"access plus 1 month"
 	ExpiresByType	image/svg+xml	"access plus 1 month"
diff --git a/p/themes/icons/favicon-512-padding.png b/p/themes/icons/favicon-512-padding.png
new file mode 100644
index 000000000..6ea595044
--- /dev/null
+++ b/p/themes/icons/favicon-512-padding.png
diff --git a/p/themes/icons/favicon-96-padding.png b/p/themes/icons/favicon-96-padding.png
new file mode 100644
index 000000000..1312acbda
--- /dev/null
+++ b/p/themes/icons/favicon-96-padding.png
diff --git a/p/themes/manifest.json b/p/themes/manifest.json
new file mode 100644
index 000000000..377383baa
--- /dev/null
+++ b/p/themes/manifest.json
@@ -0,0 +1,31 @@
+{
+  "name": "FreshRSS feed aggregator",
+  "short_name": "FreshRSS",
+  "start_url": "../i/",
+  "scope": "../",
+  "icons": [
+    {
+      "src": "icons/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "150x150",
+      "purpose": "any"
+    },
+    {
+      "src": "icons/favicon-96-padding.png",
+      "type": "image/png",
+      "sizes": "96x96",
+      "purpose": "maskable"
+    },
+    {
+      "src": "icons/favicon-512-padding.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "categories": ["news"],
+  "display": "standalone",
+  "background_color": "#fff",
+  "theme_color": "#ffffff",
+  "description": "FreshRSS is a self-hosted RSS feed aggregator."
+}