Add the desktop app banner

bower.json

@@ -32,6 +32,7 @@
     "n-ui-foundations": "^2.2.1",
     "o-expander": "^4.2.2",
     "next-session-client": "^2.3.1",
-    "n-counter-ad-blocking": "^3.1.1"
+    "n-counter-ad-blocking": "^3.1.1",
+    "n-desktop-app-banner": "^1.0.1"
   }
 }

browser/js/component-initializer.js

@@ -8,6 +8,7 @@ import footer from '../../components/n-ui/footer';
 import offlineToast from '../../components/n-ui/offline-toast';
 import { lazyLoad as lazyLoadImages } from 'n-image';
 import * as serviceWorker from 'n-service-worker';
+import DesktopAppBanner from 'n-desktop-app-banner';
 import * as syndication from 'n-syndication';
 
 export const presets = {
@@ -110,6 +111,9 @@ export class ComponentInitializer {
 				this.initializedFeatures.lazyLoadImages = true;
 			}
 
+			if (flags.get('subscriberCohort') && !flags.get('disableDesktopAppBanner')) {
+				new DesktopAppBanner();
+			}
 
 			allStylesLoaded
 				.then(() => {

browser/layout/wrapper.html

@@ -126,6 +126,10 @@
 				{{{body}}}
 			</div>
 
+			{{#unless __disableDesktopAppBanner}}
+				{{>n-desktop-app-banner/templates/banner}}
+			{{/unless}}
+
 			{{#if @root.flags.offlineToastMessage}}
 				{{>n-ui/offline-toast/template}}
 			{{/if}}

main.scss

@@ -14,6 +14,7 @@ $n-ui-foundations-applied: true;
 
 @import 'components/n-ui/offline-toast/main';
 @import 'n-syndication/main';
+@import 'n-desktop-app-banner/main';
 
 $o-cookie-message-is-silent: false;
 @import 'o-cookie-message/main';

package.json

@@ -67,6 +67,7 @@
     "uglifyjs": "^2.4.11"
   },
   "dependencies": {
+    "@financial-times/n-desktop-app-banner": "^1.0.1",
     "@financial-times/n-express": "^19.2.3",
     "@financial-times/n-handlebars": "^1.17.9",
     "@financial-times/next-json-ld": "^0.2.1",
@@ -134,7 +135,7 @@
     },
     {
       "path": "./public/n-ui/n-ui-core.css",
-      "threshold": "8 Kb"
+      "threshold": "8.4 Kb"
     }
   ]
 }

server/index.js

@@ -68,6 +68,7 @@ module.exports = options => {
 	// set whether or not to disable the app install banner.
 	app.use(function (req, res, next) {
 		app.locals.__disableAndroidBanner = (!res.locals.flags.subscriberCohort || res.locals.flags.disableAndroidSmartBanner);
+		app.locals.__disableDesktopAppBanner = (!res.locals.flags.subscriberCohort || res.locals.flags.disableDesktopAppBanner);
 		app.locals.__disableIosSmartBanner = (!res.locals.flags.subscriberCohort || res.locals.flags.disableIosSmartBanner);
 
 		next();