Merge pull request #1501 from aeternity/feature/speedup-add-to-home-s…

…creen

Fix web manifest, enable gzip, and speedup initial load

.dockerignore

@@ -8,4 +8,4 @@
 !.postcssrc.js
 !babel.config.js
 !vue.config.js
-!docker/nginx
+!docker/nginx.conf

Dockerfile

@@ -19,6 +19,5 @@ ARG VUE_APP_BACKEND_URL
 RUN NODE_OPTIONS=--openssl-legacy-provider npm run build
 
 FROM nginx:1.24-alpine
-COPY docker/nginx/nginx.conf /etc/nginx/nginx.conf
-COPY docker/nginx/default.conf /etc/nginx/conf.d/default.conf
+COPY docker/nginx.conf /etc/nginx/nginx.conf
 COPY --from=aepp-aepp-base-build /app/dist /usr/share/nginx/html

config.xml

@@ -16,7 +16,7 @@
     <platform name="android">
         <allow-intent href="market:*" />
         <preference name="SplashMaintainAspectRatio" value="true" />
-        <preference name="HeaderColor" value="#f7296e" />
+        <preference name="HeaderColor" value="#ff0d6a" />
         <preference name="AndroidInsecureFileModeEnabled" value="true" />
         <preference name="StatusBarOverlaysWebView" value="false" />
         <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">

docker/nginx.conf

@@ -0,0 +1,38 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  include       /etc/nginx/mime.types;
+  types {
+    application/json  map;
+  }
+  default_type  application/octet-stream;
+
+  sendfile        on;
+  keepalive_timeout  60;
+  gzip  on;
+  gzip_types  application/javascript text/css image/svg+xml;
+
+  server {
+    root /usr/share/nginx/html;
+
+    location ~ /(css|img|js) {
+      expires max;
+      etag off;
+    }
+
+    location /robots.txt {
+    }
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}

package.json

@@ -11,7 +11,7 @@
     "build:cordova": "VUE_APP_CORDOVA=true npm run build",
     "build:ios": "npm run build:cordova && cordova build ios",
     "build:android": "npm run build:cordova && cordova build android",
-    "gen:cordova-resources": "cordova-res --icon-background-source '#f7296e'",
+    "gen:cordova-resources": "cordova-res --icon-background-source '#ff0d6a'",
     "lint": "NODE_ENV=production vue-cli-service lint . --no-fix",
     "test": "npm run lint && npm run test:unit && npm run test:e2e -- --headless",
     "test:e2e": "vue-cli-service test:e2e",
@@ -65,6 +65,7 @@
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
     "@vue/eslint-config-airbnb": "^7.0.0",
+    "@vue/preload-webpack-plugin": "^2.0.0",
     "@vue/test-utils": "^1.3.5",
     "@vue/vue2-jest": "^27.0.0",
     "babel-jest": "^27.5.1",

public/index.html

@@ -5,14 +5,19 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Base æpp</title>
 
-    <% if (!process.env.VUE_APP_CORDOVA) { %>
-    <link rel="shortcut icon" href="<%= BASE_URL %>favicons/favicon.ico">
-    <% } %>
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" sizes="any">
+    <link rel="icon" href="<%= BASE_URL %>icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="<%= BASE_URL %>apple-touch-icon.png">
+    <link rel="mask-icon" href="<%= BASE_URL %>icon-mask-safari.svg" color="#ff0d6a">
 
+    <meta name="description" content="The æternity blockchain wallet allows users to store, send, and receive æternity coins. The wallet also features an æpps (applications running on the æternity blockchain) browser.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <% googleFontsUrl = 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap' %>
+    <link rel="preload" href="<%= googleFontsUrl %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <noscript><link rel="stylesheet" href="<%= googleFontsUrl %>"></noscript>
     <style>
       body > noscript > p.fullscreen-error-message,
       body > p.fullscreen-error-message {

src/App.vue

@@ -45,9 +45,4 @@ export default {
 html, body {
   height: var(--height);
 }
-
-body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
 </style>

src/store/plugins/ui/languages.js

@@ -40,6 +40,7 @@ export const fetchAndSetLocale = async (languageCode) => {
     i18n.setLocaleMessage(languageCode, messages);
   }
   i18n.locale = languageCode;
+  document.documentElement.setAttribute('lang', languageCode);
 };
 
 export const preferredLocale = (() => {

vue.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const addClassesToSVGElement = require('svgo/plugins/addClassesToSVGElement').fn;
+const PreloadPlugin = require('@vue/preload-webpack-plugin');
 const { version: sdkVersion } = require('./node_modules/@aeternity/aepp-sdk/package.json');
 
 process.env.VUE_APP_VERSION = process.env.npm_package_version;
@@ -82,23 +83,90 @@ module.exports = {
       config.plugins.delete('pwa');
       config.plugins.delete('workbox');
     }
+
+    // TODO: remove after fixing https://github.com/vuejs/vue-cli/issues/7206
+    config.plugin('prefetch').after('html').use(PreloadPlugin, [{
+      rel: 'prefetch',
+      include: 'asyncChunks',
+    }]);
   },
   pwa: {
     workboxPluginMode: 'InjectManifest',
     workboxOptions: {
       swSrc: './src/service-worker.js',
     },
-    name: 'Base æpp',
-    manifestPath: 'site.webmanifest',
+    name: 'Base æpp Wallet',
+    manifestOptions: {
+      short_name: 'Base æpp',
+      description: 'The æternity blockchain wallet allows users to store, send, and receive æternity coins. The wallet also features an æpps (applications running on the æternity blockchain) browser.',
+      categories: ['finance'],
+      aeternity_network_ids: ['ae_mainnet', 'ae_uat'],
+      author: 'æternity',
+      author_url: 'https://github.com/aetrnity',
+      prefer_related_applications: true,
+      related_applications: [{
+        platform: 'play',
+        url: 'https://play.google.com/store/apps/details?id=com.aeternity.base',
+        id: 'com.aeternity.base',
+      }, {
+        platform: 'itunes',
+        url: 'https://apps.apple.com/app/base-æpp-wallet/id1458655724',
+      }],
+      icons: [{
+        src: '/icon-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      }, {
+        src: '/icon-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      }, {
+        src: '/icon-maskable-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+        purpose: 'maskable',
+      }, {
+        src: '/icon.svg',
+        sizes: 'any',
+        type: 'image/svg+xml',
+      }],
+      background_color: '#ff0d6a',
+      id: '/',
+      start_url: '/',
+      protocol_handlers: [
+        { protocol: 'web+aeternity', url: '/%s' },
+        { protocol: 'web+aeppbase', url: '/%s' },
+      ],
+      shortcuts: [{
+        name: 'Show QR code',
+        url: '/transfer/receive',
+        description: 'Show QR code to get AE',
+        icons: [{
+          src: '/icon-receive.png',
+          sizes: '96x96',
+          type: 'image/png',
+        }],
+      }, {
+        name: 'æpp browser',
+        url: '/browser',
+        icons: [{
+          src: '/icon-grid.png',
+          sizes: '96x96',
+          type: 'image/png',
+        }],
+      }],
+    },
     iconPaths: {
-      favicon32: 'favicons/favicon-32x32.png',
-      favicon16: 'favicons/favicon-16x16.png',
-      appleTouchIcon: 'favicons/apple-touch-icon.png',
-      maskIcon: 'favicons/safari-pinned-tab.svg',
-      msTileImage: 'favicons/mstile-150x150.png',
+      favicon32: null,
+      favicon16: null,
+      appleTouchIcon: null,
+      maskIcon: null,
+      msTileImage: null,
+      faviconSVG: null,
     },
-    themeColor: '#f7296e',
-    msTileColor: '#f7296e',
+    themeColor: '#ff0d6a',
+    msTileColor: '#ff0d6a',
+    appleMobileWebAppCapable: 'yes',
   },
   transpileDependencies: ['@aeternity/hd-wallet', '@download/blockies'],
   pluginOptions: {