MakairaIO · datlieu110 · May 20, 2024
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,4 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Script from 'next/script'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
@@ -17,7 +18,8 @@ export default class MyDocument extends Document {
           <link rel="dns-prefetch" href="https://cdn.polyfill.io" />
           <link rel="preconnect" href="https://cdn.polyfill.io" />
            */}
-
+          {/* polyfill for old browser with no difinition of class constructor */}
+          <Script src="https://unpkg.com/event-target@latest/min.js" async />
           <Favicon />
         </Head>
         <body id="body">

diff --git a/patterns/core/BrowserHintPage/browserHIntPage.styl b/patterns/core/BrowserHintPage/browserHIntPage.styl
@@ -99,6 +99,15 @@ $breakpoint-medium = 768px
           width 7.3rem
           height 7.8rem
 
+    &--safari
+      img
+        width 4.8rem
+        height 4.8rem
+        margin-bottom 2rem
+        @media (min-width $breakpoint-medium)
+          width 7.8rem
+          height 7.8rem
+
     &--firefox, &--chrome
       width 50%
 

diff --git a/patterns/core/BrowserHintPage/index.js b/patterns/core/BrowserHintPage/index.js
@@ -66,6 +66,18 @@ export default function BrowserHintPage() {
                   Google Chrome
                 </Copytext>
               </Link>
+              <Link
+                href="https://apps.apple.com/us/app/safari/id1146562112"
+                className="browser browser--safari"
+              >
+                <img
+                  src="/assets/images/browserHintPage/safari.svg"
+                  alt="Safari Logo"
+                />
+                <Copytext size="aphrodite" element="span">
+                  Safari &gt;= 14
+                </Copytext>
+              </Link>
             </div>
             <img
               className="browser-hint-page__browsers-divider"

diff --git a/public/assets/images/browserHintPage/safari.svg b/public/assets/images/browserHintPage/safari.svg
diff --git a/server/index.js b/server/index.js
@@ -45,10 +45,13 @@ app
     server.use((req, res, next) => {
       const ua = parser(req.headers['user-agent'])
 
-      if ('IE' !== ua.browser.name) {
-        next()
-      } else {
+      if (
+        'IE' === ua.browser.name ||
+        (ua.browser.name.includes('Safari') && ua.browser.major < 14)
+      ) {
         app.render(req, res, '/frontend/browser', req.query)
+      } else {
+        next()
       }
     })
 

diff --git a/utils/core/GlobalDataProvider/index.js b/utils/core/GlobalDataProvider/index.js
@@ -42,7 +42,12 @@ class GlobalDataProvider extends Component {
     // parsing big JSON-Strings is more efficient than parsing big
     // Object-literals
     // see: https://v8.dev/blog/cost-of-javascript-2019#json
-    localStorage.setItem('menuData', JSON.stringify(this.state.menuData))
+    try {
+      localStorage.setItem('menuData', JSON.stringify(this.state.menuData))
+    } catch (error) {
+      // iPhone private mode is able to prevent web access localStorage, this will lead to throw error when calling object localStorage
+      console.warn('You are preventing us to access localStorage!')
+    }
   }
 
   render() {

diff --git a/utils/core/fetchMenuData/index.js b/utils/core/fetchMenuData/index.js
@@ -1,17 +1,24 @@
 export default async function fetchMenuData() {
-  let data
+  let data = null
 
-  if (process.browser && localStorage.getItem('menuData')) {
-    const menuString = localStorage.getItem('menuData')
+  try {
+    if (process.browser && localStorage.getItem('menuData')) {
+      const menuString = localStorage.getItem('menuData')
 
-    if (['undefined', 'null', '[]'].includes(menuString)) {
-      const response = await fetchMenuFromApi()
+      if (['undefined', 'null', '[]'].includes(menuString)) {
+        const response = await fetchMenuFromApi()
 
-      data = response.menu
-    } else {
-      data = JSON.parse(menuString)
+        data = response.menu
+      } else {
+        data = JSON.parse(menuString)
+      }
     }
-  } else {
+  } catch (error) {
+    // iPhone private mode is able to prevent web access localStorage, this will lead to throw error when calling object localStorage
+    console.warn('You are preventing us to access localStorage!')
+  }
+
+  if (!data) {
     const response = await fetchMenuFromApi()
 
     data = response.menu

diff --git a/utils/core/translations/locales/de.js b/utils/core/translations/locales/de.js
@@ -40,11 +40,11 @@ export default {
   ERROR_PAGE_FURTHER_TITLE: 'Die technischen Daten',
   BROWSER_HINT_PAGE_HEADING: 'Leider gibt es ein Problem mit Ihrem Browser!',
   BROWSER_HINT_PAGE_SUB_HEADING:
-    'Wie es scheint benutzten Sie den Microsoft Internet Explorer',
+    'Wie es scheint benutzten Sie einen veralteten Browser',
   BROWSER_HINT_PAGE_TEXT_TOP:
     '“Ja, und?” höre ich Sie mit Verwunderung fragen. Recht haben Sie. Hat der Browser Ihnen doch die letzten Jahrzehnte immer gute Dienste erwiesen. Und jetzt soll da irgendetwas nicht stimmen? <br/><br/> Wir hatten nicht gehofft diejenigen sein zu müssen, die Ihnen die News überbringen, aber leider werden sehr viele aktuelle Technologien von Ihrem Browser nicht mehr unterstützt. Aus diesem Grund haben wir uns dazu entschieden Ihnen lieber eine Empfehlung für einen modernen Browser zu machen als eine halbgare Lösung zusammenzubasteln, die am Ende kaum eine Chance auf Wartbareit durch uns und Zufriedenheit bei Ihnen hat.',
   BROWSER_HINT_PAGE_TEXT_BOTTOM:
-    'Nehmen wir uns also einen Moment und gedenken der wunderschönen Surferlebnisse, die Sie mit dem Internet Explorer hatte und schließen diese tief in unsere schönen Erinnerungen ein … hach ja … der Hamsterdance, die Blueballmachine, die Lycos Suchmaschine, … Schön war es. <br/><br/> So, und nun kann man auch mit tränenfreien Auge in die Zukunft schauen, und Sie sind mit einem neuen frischen Browser wieder ganz vorne dabei. <br/><br/> Bitte wählen Sie doch einfach einen zum Download aus, mit beiden kommen Sie gut durch den Alltag. Versprochen, wir nutzen diese auch beide bei der Entwicklung.',
+    'Nehmen wir uns also einen Moment und gedenken der wunderschönen Surferlebnisse, die Sie mit Ihrem veralteten Browser hatten und schließen diese tief in unsere schönen Erinnerungen ein … hach ja … der Hamsterdance, die Blueballmachine, die Lycos Suchmaschine, … Schön war es. <br/><br/> So, und nun kann man auch mit tränenfreien Auge in die Zukunft schauen, und Sie sind mit einem neuen frischen Browser wieder ganz vorne dabei. <br/><br/> Bitte wählen Sie doch einfach einen zum Download aus, mit beiden kommen Sie gut durch den Alltag. Versprochen, wir nutzen diese auch beide bei der Entwicklung.',
   BROWSER_HINT_PAGE_DOWNLOAD_HINT:
     'Jetzt kostenlos einen modernen Browser downloaden',
   BROWSER_HINT_PAGE_RECOMMENDATIONS: 'Unsere Empfehlungen',