BrowserService: Detect Firefox on iOS (fxios)

src/services/browser.ts

@@ -91,6 +91,7 @@ export class BrowserService {
             this.browser = {
                 chrome: false,
                 firefox: false,
+                fxios: false,
                 ie: false,
                 edge: false,
                 opera: false,
@@ -99,12 +100,14 @@ export class BrowserService {
 
             const uagent = this.$window.navigator.userAgent.toLowerCase();
 
-            this.browser.chrome  = /webkit/.test(uagent) && /chrome/.test(uagent) && !/edge/.test(uagent);
+            this.browser.chrome = /webkit/.test(uagent) && /chrome/.test(uagent) && !/edge/.test(uagent);
             this.browser.firefox = /mozilla/.test(uagent) && /firefox/.test(uagent);
-            this.browser.ie      = (/msie/.test(uagent) || /trident/.test(uagent)) && !/edge/.test(uagent);
-            this.browser.edge    = /edge/.test(uagent);
-            this.browser.safari  = /safari/.test(uagent) && /applewebkit/.test(uagent) && !/chrome/.test(uagent);
-            this.browser.opera   = /mozilla/.test(uagent) && /applewebkit/.test(uagent)
+            this.browser.fxios = /mozilla/.test(uagent) && /fxios/.test(uagent);
+            this.browser.ie = (/msie/.test(uagent) || /trident/.test(uagent)) && !/edge/.test(uagent);
+            this.browser.edge = /edge/.test(uagent);
+            this.browser.safari = /safari/.test(uagent) && /applewebkit/.test(uagent)
+                               && !/chrome/.test(uagent) && !/fxios/.test(uagent);
+            this.browser.opera = /mozilla/.test(uagent) && /applewebkit/.test(uagent)
                 && /chrome/.test(uagent) && /safari/.test(uagent) && /opr/.test(uagent);
 
             if (this.browser.opera && this.browser.chrome) {
@@ -112,7 +115,12 @@ export class BrowserService {
             }
 
             // Mobile detection
-            this.browser.mobile = this.browser.safari && /mobile/.test(uagent);
+            this.browser.mobile = false;
+            if (this.browser.safari && /mobile/.test(uagent)) {
+                this.browser.mobile = true;
+            } else if (this.browser.fxios) {
+                this.browser.mobile = true;
+            }
 
             for (const x in this.browser) {
                 if (this.browser[x]) {
@@ -152,6 +160,10 @@ export class BrowserService {
                 this.browser.name = BrowserName.Firefox;
                 this.browser.textInfo = 'Firefox ' + this.browser.version;
             }
+            if (this.browser.fxios) {
+                this.browser.name = BrowserName.FirefoxIos;
+                this.browser.textInfo = 'Firefox (iOS) ' + this.browser.version;
+            }
             if (this.browser.ie) {
                 this.browser.name = BrowserName.InternetExplorer;
                 this.browser.textInfo = 'Internet Explorer ' + this.browser.version;
@@ -169,7 +181,7 @@ export class BrowserService {
                 this.browser.textInfo = 'Opera ' + this.browser.version;
             }
             if (this.browser.textInfo && this.browser.mobile) {
-                this.browser.textInfo += ' Mobile';
+                this.browser.textInfo += ' [Mobile]';
             }
         }
 
@@ -187,7 +199,7 @@ export class BrowserService {
         if (this.browser === undefined) {
             this.getBrowser();
         }
-        if (this.browser.safari) {
+        if (this.browser.safari || this.browser.fxios) {
             return false;
         }
         return true;

src/threema.d.ts

@@ -505,6 +505,7 @@ declare namespace threema {
     const enum BrowserName {
         Chrome = 'chrome',
         Firefox = 'firefox',
+        FirefoxIos = 'fxios',
         InternetExplorer = 'ie',
         Edge = 'edge',
         Opera = 'opera',
@@ -514,6 +515,7 @@ declare namespace threema {
     interface BrowserInfo {
         chrome: boolean;
         firefox: boolean;
+        fxios: boolean;
         ie: boolean;
         edge: boolean;
         opera: boolean;

tests/service/browser.js

@@ -20,6 +20,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(true);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(false);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(false);
@@ -30,6 +31,23 @@ describe('BrowserService', function() {
         expect(browser.textInfo).toEqual('Firefox 59');
     });
 
+    it('fxiosMobile', () => {
+        const ua = 'Mozilla/5.0 (iPad; CPU OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) FxiOS/8.3b5826 Mobile/14A403 Safari/602.1.50';
+        const service = testUserAgent(ua);
+        const browser = service.getBrowser();
+        expect(browser.chrome).toBe(false);
+        expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(true);
+        expect(browser.ie).toBe(false);
+        expect(browser.edge).toBe(false);
+        expect(browser.opera).toBe(false);
+        expect(browser.safari).toBe(false);
+        expect(browser.name).toEqual('fxios');
+        expect(browser.version).toEqual(8);
+        expect(browser.mobile).toBe(true);
+        expect(browser.textInfo).toEqual('Firefox (iOS) 8 [Mobile]');
+    });
+
     it('chrome', () => {
         const ua = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36';
         const service = testUserAgent(ua);
@@ -52,6 +70,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(true);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(false);
@@ -68,6 +87,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(true);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(false);
@@ -84,6 +104,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(false);
         expect(browser.edge).toBe(true);
         expect(browser.opera).toBe(false);
@@ -100,6 +121,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(false);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(true);
@@ -116,6 +138,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(false);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(false);
@@ -132,6 +155,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(false);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(false);
@@ -148,6 +172,7 @@ describe('BrowserService', function() {
         const browser = service.getBrowser();
         expect(browser.chrome).toBe(false);
         expect(browser.firefox).toBe(false);
+        expect(browser.fxios).toBe(false);
         expect(browser.ie).toBe(false);
         expect(browser.edge).toBe(false);
         expect(browser.opera).toBe(false);
@@ -155,7 +180,7 @@ describe('BrowserService', function() {
         expect(browser.name).toEqual('safari');
         expect(browser.version).toEqual(10);
         expect(browser.mobile).toBe(true);
-        expect(browser.textInfo).toEqual('Safari 10 Mobile');
+        expect(browser.textInfo).toEqual('Safari 10 [Mobile]');
     });
 
 });