Merge pull request RocketChat#8 from tomermoshe/feat/pwa-index-and-icons

Feat/pwa index.html and icons
kamilkisiela · Jun 1, 2017 · d4e244c · d4e244c
2 parents 1695ed1 + 0e2ebd1
commit d4e244c
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 11 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -9,7 +9,8 @@
       "outDir": "dist",
       "assets": [
         "assets",
-        "favicon.ico"
+        "favicon.ico",
+        "manifest.json"
       ],
       "index": "index.html",
       "main": "main.ts",

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "concurrently \"yarn server\" \"ng serve\" ",
     "build": "ng build",
+    "serve:dist": "lite-server --baseDir=dist",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -58,6 +59,7 @@
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "lite-server": "^2.3.0",
     "nodemon": "^1.11.0",
     "protractor": "~5.1.0",
     "ts-node": "^3.0.4",

diff --git a/src/assets/images/android-chrome-192x192.png b/src/assets/images/android-chrome-192x192.png
diff --git a/src/assets/images/android-chrome-384x384.png b/src/assets/images/android-chrome-384x384.png
diff --git a/src/assets/images/apple-touch-icon.png b/src/assets/images/apple-touch-icon.png
diff --git a/src/assets/images/browserconfig.xml b/src/assets/images/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/src/assets/images/mstile-150x150.png b/src/assets/images/mstile-150x150.png
diff --git a/src/assets/images/rocketchat-bubble.png b/src/assets/images/rocketchat-bubble.png
diff --git a/src/assets/images/safari-pinned-tab.svg b/src/assets/images/safari-pinned-tab.svg
diff --git a/src/favicon.ico b/src/favicon.ico
diff --git a/src/index.html b/src/index.html
@@ -6,8 +6,17 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="theme-color" content="#04436a">
+  <meta name="msapplication-TileColor" content="#04436a">
+  <meta name="msapplication-TileImage" content="assets/images/mstile-150x150.png">
+  <meta name="msapplication-config" content="assets/images/browserconfig.xml">
+
   <link rel="manifest" href="./manifest.json">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
+  <link rel="mask-icon" href="assets/images/safari-pinned-tab.svg" color="#5bbad5">
 </head>
 <body>
   <ion-app></ion-app>
@@ -21,7 +30,13 @@
   top: 0;
   left: 0;
   background: linear-gradient(to top, #022235, #04436a);">
-    <img class="splash-img" src="assets/images/rocketchat-bubble.png" style="width: 50%">
+    <img class="splash-img" src="assets/images/android-chrome-384x384.png" style="max-width: 250px; width: 60%">
+    <noscript>
+      <h4 style="font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica;">
+        Sorry, JavaScript needs to be enabled in order to run this application.
+      </h4>
+    </noscript>
   </div>
+
 </body>
 </html>
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,21 +1,22 @@
 {
-  "name": "RocketChat",
-  "short_name": "RocketChat",
-  "start_url": ".",
+  "name": "Rocket.Chat",
+  "short_name": "Rocket.Chat",
+  "start_url": "./",
   "display": "fullscreen",
   "background_color": "#04436a",
+  "theme_color": "#04436a",
   "description": "Amazing chat app",
   "orientation": "portrait-primary",
   "icons": [
     {
-      "src": "assets/images/rocketchat-bubble.png",
-      "sizes": "48x48 72x72 96x96 128x128 256x256",
+      "src": "assets/images/android-chrome-192x192.png",
+      "sizes": "192x192",
       "type": "image/png"
-    }
-  ],
-  "related_applications": [
+    },
     {
-      "platform": "web"
+      "src": "assets/images/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
     }
   ]
 }