Add a manifest.json file as a first step to make diaspora* a PWA

fixes #7997

closes #7998

Changelog.md

@@ -5,6 +5,7 @@
 ## Bug fixes
 
 ## Features
+* Add a manifest.json file as a first step to make diaspora* a Progressive Web App [#7998](https://github.com/diaspora/diaspora/pull/7998)
 
 # 0.7.10.0
 

app/controllers/manifest_controller.rb

 # frozen_string_literal: true
 
 class ManifestController < ApplicationController
-  def show
-    render json: '{
-      "short_name": "diaspora*",
-      "name": "diaspora*",
-      "description": "diaspora* is a free, decentralized and privacy respectful social network",
-      "icons": [
+  def show # rubocop:disable Metrics/MethodLength
+    render json: {
+      short_name:       AppConfig.settings.pod_name,
+      name:             AppConfig.settings.pod_name,
+      description:      "diaspora* is a free, decentralized and privacy respectful social network",
+      icons:            [
         {
-          "src": "/icon.png",
-          "type": "image/png",
-          "sizes": "192x192"
+          src:   helpers.image_path("branding/logos/app-icon.png"),
+          type:  "image/png",
+          sizes: "192x192"
+        },
+        {
+          src:   helpers.image_path("branding/logos/app-icon-512.png"),
+          type:  "image/png",
+          sizes: "512x512"
         }
       ],
-      "start_url": "/",
-      "background_color": "#000000",
-      "display": "standalone",
-      "theme_color": "#000000"
-    }'
+      start_url:        "/",
+      background_color: "#000000",
+      display:          "standalone",
+      theme_color:      "#000000"
+    }
   end
 end

app/views/layouts/_head.haml

@@ -4,6 +4,8 @@
 %meta{charset: "utf-8"}/
 = content_for?(:meta_data) ? yield(:meta_data) : metas_tags
 
+%link{rel: "manifest", href: "/manifest.json"}
+
 / favicon
 / For Apple devices
 %link{rel: "apple-touch-icon", href: image_path("apple-touch-icon.png")}

app/views/layouts/application.mobile.haml

@@ -9,7 +9,7 @@
       = javascript_include_tag "mobile/mobile"
       = load_javascript_locales
 
-    = render "head"
+    = render "layouts/head"
     = include_color_theme "mobile"
 
     %meta{name: "viewport", content: "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no"}/

config/initializers/secure_headers.rb

@@ -16,7 +16,8 @@ SecureHeaders::Configuration.default do |config|
     media_src:       %w[https:],
     script_src:      %w['self' blob: 'unsafe-eval' platform.twitter.com cdn.syndication.twimg.com widgets.flickr.com
                         embedr.flickr.com www.instagram.com 'unsafe-inline'],
-    style_src:       %w['self' 'unsafe-inline' platform.twitter.com *.twimg.com]
+    style_src:       %w['self' 'unsafe-inline' platform.twitter.com *.twimg.com],
+    manifest_src:    %w['self']
   }
 
   if AppConfig.environment.assets.host.present?

graphics/app-icon.svg

+<svg version="1.1" viewBox="0 0 65.131 65.131" xmlns="http://www.w3.org/2000/svg">
+ <path d="m28.214 64.754c-6.9441-0.80647-14.478-4.7044-19.429-10.053-8.1024-8.7516-10.823-21.337-7.0178-32.463 3.8465-11.248 12.917-19.153 24.746-21.569 7.2561-1.4817 14.813-0.27619 21.622 3.4495 7.517 4.1126 12.568 10.251 15.291 18.582 5.5678 17.038-4.1941 35.667-21.417 40.87-4.6929 1.4178-8.7675 1.7673-13.795 1.1834zm0.43913-17.263c2.0058-2.7986 3.7663-5.0883 3.9123-5.0883 0.14591 0 1.9109 2.2959 3.9221 5.102 2.0112 2.8061 3.827 5.0577 4.0349 5.0035 0.90081-0.23467 8.2871-5.9034 8.1633-6.265-0.07527-0.21984-1.7555-2.6427-3.7338-5.3842-1.9783-2.7414-3.552-5.0223-3.497-5.0686 0.05497-0.04629 2.8095-0.97845 6.1211-2.0715 3.3117-1.093 6.0224-2.1432 6.0239-2.3338 0.0073-0.92502-2.9094-9.4312-3.283-9.5746-0.23567-0.09043-2.9906 0.68953-6.1221 1.7332-3.1315 1.0437-5.8046 1.8977-5.9404 1.8977-0.13575 0-0.28828-2.9385-0.33895-6.53l-0.09213-6.53h-10.516l-0.09213 6.53c-0.05067 3.5915-0.20809 6.53-0.34982 6.53s-2.9544-0.90204-6.2504-2.0045l-5.9927-2.0045-1.5444 4.6339c-0.8494 2.5487-1.5444 4.866-1.5444 5.1496 0 0.36743 1.7311 1.087 6.0212 2.503 3.3117 1.093 6.0662 2.0252 6.1211 2.0715 0.05497 0.04629-1.5187 2.3272-3.497 5.0686-1.9783 2.7415-3.6605 5.1643-3.7382 5.3842-0.14163 0.40073 7.4833 6.2827 8.1896 6.3175 0.20673 0.01021 2.017-2.2712 4.0228-5.0698z" fill="#3e4142" stroke-width=".33922"/>
+ <path d="m23.631 51.953c-2.348-1.5418-6.9154-5.1737-7.0535-5.6088-0.06717-0.21164 0.45125-0.99318 3.3654-5.0734 2.269-3.177 3.7767-5.3581 3.7767-5.4637 0-0.03748-1.6061-0.60338-3.5691-1.2576-6.1342-2.0442-8.3916-2.9087-8.5288-3.2663-0.03264-0.08506 0.09511-0.68598 0.28388-1.3354 0.643-2.212 2.7038-8.4123 2.7959-8.4123 0.05052 0 2.6821 0.85982 5.848 1.9107 3.1659 1.0509 5.897 1.9222 6.0692 1.9362 0.3089 0.02514 0.31402 0.01925 0.38295-0.44107 0.09851-0.65784 0.26289-5.0029 0.2633-6.9599 1.87e-4 -0.90267 0.02801-2.5298 0.06184-3.6158l0.0615-1.9746h10.392l0.06492 4.4556c0.06287 4.3148 0.18835 7.8236 0.29865 8.3513 0.0295 0.14113 0.11236 0.2566 0.18412 0.2566 0.07176 0 1.6955-0.50861 3.6084-1.1303 4.5213-1.4693 6.2537-2.0038 7.3969-2.2822 0.87349-0.21269 0.94061-0.21704 1.0505-0.06806 0.45169 0.61222 3.3677 9.2365 3.1792 9.4025-0.33681 0.29628-2.492 1.1048-6.9823 2.6194-5.3005 1.7879-5.1321 1.7279-5.1321 1.8283 0 0.13754 0.95042 1.522 3.5468 5.1666 1.3162 1.8475 2.6802 3.7905 3.0311 4.3176l0.63804 0.95842-0.27216 0.28519c-1.1112 1.1644-7.3886 5.8693-7.8309 5.8693-0.22379 0-1.2647-1.2321-2.9284-3.4663-0.90374-1.2137-2.264-3.0402-3.0228-4.059-0.75878-1.0188-1.529-2.0203-1.7116-2.2256l-0.33201-0.37324-0.32674 0.37324c-0.43918 0.50169-2.226 2.867-3.8064 5.0388-2.1662 2.9767-3.6326 4.8055-3.8532 4.8055-0.05161 0-0.4788-0.25278-0.94931-0.56173z" fill="#fff" stroke-width=".093311"/>
+</svg>