feat(bowser): add browser detection

README.md

@@ -54,7 +54,8 @@ npm run build            | Build the app for production
 npm run build:library    | Build the library
 npm run lint             | Run the linter (tslint)
 npm run ci               | Execute linter and tests
-npm run translate        | Generate all json files with the translations in assets folder and translate all keys remaining
+npm run extract          | Generate all json files with the translations in assets folder
+npm run translate        | Translate all keys remaining using Google Translate and using English language as the origin
 npm run deploy           | Build the app and deploy dist folder to Github pages (angular-cli-ghpages) (fork to do this and remove CNAME file)
 npm run bundle-report    | Build and run webpack-bundle-analyzer over stats json, really cool :)
 npm run release          | Create a new release using standard-version
@@ -84,6 +85,7 @@ npm run update           | Update the project dependencies with ng update
 * Scroll to first invalid input in forms (directive)
 * Autocomplete enabled in forms
 * Modernizr (browser features detection)
+* Browser filter (Bowser) for IE ^^
 * Google Tag Manager
 * Github pages deploy ready
 * Unit tests with Jasmine and Karma including code coverage

package.json

@@ -12,7 +12,8 @@
     "e2e": "ng e2e",
     "lint": "ng lint",
     "ci": "npm run lint && npm run test && npm run e2e",
-    "translate": "ngx-translate-extract --input ./src/app --output ./src/assets/i18n/*.json --sort --format namespaced-json --format-indentation '  ' --marker _ && node ./scripts/translate.js",
+    "extract": "ngx-translate-extract --input ./src/app --output ./src/assets/i18n/*.json --sort --format namespaced-json --format-indentation '  ' --marker _",
+    "translate": "node ./scripts/translate.js",
     "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json",
     "release:minor": "standard-version --release-as minor && git push --follow-tags origin master",
     "release:major": "standard-version --release-as major && git push --follow-tags origin master",
@@ -62,6 +63,7 @@
     "@types/node": "10.11.4",
     "angular-cli-ghpages": "0.5.3",
     "axios": "0.18.0",
+    "bowser": "2.0.0-beta.3",
     "codelyzer": "4.5.0",
     "coveralls": "3.0.2",
     "deepmerge": "2.2.1",

src/app/app.component.ts

@@ -6,6 +6,7 @@ import {MatSnackBar} from '@angular/material';
 import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
 import {AppConfig} from './configs/app.config';
 import {LocalStorage} from 'ngx-store';
+import {isBrowserValid} from './shared/helpers/utils.helper';
 
 declare const require;
 declare const Modernizr;
@@ -38,7 +39,7 @@ export class AppComponent implements OnInit {
     this.title.setTitle('Angular Example App');
 
     this.onEvents();
-    this.checkBrowserFeatures();
+    this.checkBrowser();
   }
 
   onEvents() {
@@ -63,6 +64,16 @@ export class AppComponent implements OnInit {
     });
   }
 
+  checkBrowser() {
+    if (isBrowserValid()) {
+      this.checkBrowserFeatures();
+    } else {
+      this.translateService.get([String(_('changeBrowser'))]).subscribe((texts) => {
+        this.snackBar.open(texts['changeBrowser'], 'OK');
+      });
+    }
+  }
+
   checkBrowserFeatures() {
     let supported = true;
     for (const feature in Modernizr) {

src/app/shared/helpers/utils.helper.ts

@@ -1,4 +1,6 @@
 import {animate, AnimationTriggerMetadata, style, transition, trigger} from '@angular/animations';
+declare const require;
+const bowser = require('bowser');
 
 export const scrollToElement = (element) => {
   if (element) {
@@ -28,6 +30,21 @@ export const isPalindrome = (str) => {
   return true;
 };
 
+export const isBrowserValid = () => {
+  const browser = bowser.getParser(window.navigator.userAgent);
+  return browser.satisfies({
+    windows: {
+      'internet explorer': '>10',
+    },
+    macos: {
+      safari: '>10.1'
+    },
+    chrome: '>20.1.1432',
+    firefox: '>31',
+    opera: '>22'
+  });
+};
+
 export const fadeInOut: AnimationTriggerMetadata = trigger('fadeInOut', [
   transition(':enter', [
     style({opacity: 0}),

src/assets/i18n/en.json

@@ -7,6 +7,7 @@
   "canVote": "Can vote :)",
   "cancel": "Cancel",
   "cannotVote": "Cannot vote anymore :(",
+  "changeBrowser": "Your browser is not supported. Please use, Chrome, Firefox, Safari, Opera or IE>11",
   "create": "Create",
   "createHero": "Create a hero",
   "createNewHero": "Create new hero",
@@ -50,8 +51,9 @@
   "snapshot": "Snapshot",
   "sureRemoveHero": "Do you want to remove the hero?",
   "topHeroes": "Heroes most liked",
+  "undefined": "",
   "updateBrowser": "You are using an old browser, please update it and reload the page.",
   "yeahPalindrome": "That is a palindrome!",
   "yellow": "Yellow",
   "yes": "Yes"
-}
+}

src/assets/i18n/es.json

@@ -7,6 +7,7 @@
   "canVote": "Puedes votar :)",
   "cancel": "Cancelar",
   "cannotVote": "No puedes votar más :(",
+  "changeBrowser": "Tu navegador no es compatible. Por favor usa Chrome, Firefox, Safari, Opera or IE>11",
   "create": "Crear",
   "createHero": "Añadir un heroe",
   "createNewHero": "Crear nuevo heroe",
@@ -50,6 +51,7 @@
   "snapshot": "Captura",
   "sureRemoveHero": "¿Estas seguro de que quieres eliminar el heroe?",
   "topHeroes": "Heroes más votados",
+  "undefined": "",
   "updateBrowser": "Estas usando un navegador antiguo, por favor actualiza la versión y recarga la página.",
   "yeahPalindrome": "Eso es un palindrome!",
   "yellow": "Amarillo",

src/assets/i18n/eu.json

@@ -7,6 +7,7 @@
   "canVote": "Bozkatu dezakezu :)",
   "cancel": "Ezeztatu",
   "cannotVote": "Ezin duzu gehiago bozkatu :(",
+  "changeBrowser": "Zure arakatzailea ez da onartzen. Mesedez erabili Chrome, Firefox, Safari, Opera edo IE>11",
   "create": "Sortu",
   "createHero": "Heroi bat gehitu",
   "createNewHero": "Sortu heroi berri bat",
@@ -50,6 +51,7 @@
   "snapshot": "Kaptura",
   "sureRemoveHero": "Ziur zaude aukeratutako heroia ezabatu nahi duzula?",
   "topHeroes": "Boto gehien daukaten heroiak",
+  "undefined": "",
   "updateBrowser": "Nabigatzaile zaharkitu batekin ari zara lanean, mesedez eguneratu bertsioa eta ondoren birkargatu orrialdea.",
   "yeahPalindrome": "Palindromo bat da!",
   "yellow": "Horia",

src/assets/i18n/pt-br.json

@@ -7,6 +7,7 @@
   "canVote": "Vote :)",
   "cancel": "Cancelar",
   "cannotVote": "Não é mais possível voltar:(",
+  "changeBrowser": "Seu navegador não é suportado. Por favor use Chrome, Firefox, Safari, Opera o IE>11",
   "create": "Criar",
   "createHero": "Crie um herói",
   "createNewHero": "Criar novo herói",
@@ -50,6 +51,7 @@
   "snapshot": "Instantâneo",
   "sureRemoveHero": "Você tem certeza que quer remover o herói?",
   "topHeroes": "Heróis mais curtidos",
+  "undefined": "",
   "updateBrowser": "Você está usando um navegador antigo, atualize a versão e recarregue a página.",
   "yeahPalindrome": "Isso é um palíndromo!",
   "yellow": "Amarelo",

src/assets/i18n/zh-cn.json

@@ -7,6 +7,7 @@
   "canVote": "可以投票 :)",
   "cancel": "取消",
   "cannotVote": "不能再投票了 :(",
+  "changeBrowser": "您的浏览器不受支持。请使用Chrome，Firefox，Safari，Opera或IE> 11",
   "create": "创建",
   "createHero": "创建一个英雄",
   "createNewHero": "创建一个新英雄",
@@ -50,6 +51,7 @@
   "snapshot": "快照",
   "sureRemoveHero": "你想要移除一个英雄吗?",
   "topHeroes": "最喜欢的英雄",
+  "undefined": "",
   "updateBrowser": "您正在使用一个旧版本浏览器，请更新它并重新加载页面。",
   "yeahPalindrome": "那是一个回文！",
   "yellow": "黄色",

src/assets/i18n/zh-hk.json

@@ -7,6 +7,7 @@
   "canVote": "可以投票 :)",
   "cancel": "取消",
   "cannotVote": "不能再投票了 :(",
+  "changeBrowser": "您的瀏覽器不受支持。請使用Chrome，Firefox，Safari，Opera或IE> 11",
   "create": "建立",
   "createHero": "建立新英雄",
   "createNewHero": "建立一個新英雄",
@@ -50,6 +51,7 @@
   "snapshot": "快照",
   "sureRemoveHero": "你確定要刪除英雄嗎?",
   "topHeroes": "最多人喜歡的英雄",
+  "undefined": "",
   "updateBrowser": "你在使用舊的瀏覽器,請更新再重新載入頁面",
   "yeahPalindrome": "那是一個回文！",
   "yellow": "黃色",