How to inspect elements on iPad or iPhone?

Test af Safari: Emulatorer vs. Ægte Browsere

09/02/2022

Rating: 4.11 (8259 votes)

I en verden, hvor den digitale tilstedeværelse er altafgørende, er det kritisk at sikre, at dit website eller din webapplikation fungerer fejlfrit på tværs af alle browsere. Selvom Chrome og Firefox dominerer mange markeder, er Apple Safari den foretrukne browser for millioner af iPhone-, iPad- og Mac-brugere verden over. At ignorere Safari-kompatibilitet kan betyde en dårlig brugeroplevelse for en betydelig del af dit publikum. Men hvordan tester man på Safari, hvis man ikke ejer en Apple-enhed? Dette spørgsmål fører ofte til overvejelser om Safari-emulatorer og simulatorer, men som vi vil se, er der vigtige nuancer og langt mere pålidelige løsninger.

Why is Safari emulation important?
Since Safari is the most popular browser for Apple systems, it is very important to be able to simulate it. When developers run an emulation of Safari, what it really means that they can guarantee that the website will work as it should when it is opened in safari browser in different environments. What is an Online Safari Emulator?
Indholdsfortegnelse

Hvad er en Safari-emulator eller simulator?

En Safari-emulator eller simulator er et værktøj, der forsøger at efterligne Safaris funktionalitet, rendering og adfærd uden faktisk at køre den ægte browser. Formålet er at give udviklere og testere mulighed for at se, hvordan et website ser ud og fungerer under Safari-lignende forhold. En 'emulator' sigter mod at replikere hardware og software, mens en 'simulator' blot simulerer adfærd.

Historisk set har der eksisteret simple "iPhone Safari simulatorer" i form af webværktøjer, der viste din hjemmeside i dimensionerne af en iPhone 3. Disse værktøjer var dog i høj grad begrænsede og kunne ikke give en nøjagtig gengivelse af Safaris render-engine. De var primært nyttige til at teste "responsiveness" af et layout (media queries) eller for at se websiden i specifikke dimensioner. Problemer som lodrette scrollbars, manglende fortolkning af meta-viewport tags, og forskellig håndtering af Flash og :hover-events var almindelige. Det er afgørende at forstå, at disse ikke er ægte browsere.

Hvorfor er det vigtigt? Fordi emulatorer og simulatorer, uanset hvor avancerede de er, agerer som virtuelle maskiner og kører ofte langsommere end den faktiske Safari-browser. De kan ikke altid efterligne alle interaktioner eller den præcise CSS-understøttelse, hvilket betyder, at en slutbruger potentielt kan opleve en fejl, der forblev uopdaget under test på en simulator. Derfor er den klare anbefaling altid at teste på ægte browsere installeret på rigtige mobile eller desktop-enheder.

Hvorfor er test af Safari så vigtigt?

Safari er den mest populære browser for Apple-systemer og en af de mest udbredte browsere globalt. Den bruger sin egen browser-engine, WebKit, som har unikke renderingregler, især med skrifttyper, farver og CSS-animationer. Desuden håndhæver Safari strengere sikkerheds- og privatlivsfunktioner, som kan blokere visse scripts eller cookies, der fungerer fint i andre browsere. Hvis dit website ser anderledes ud eller bryder sammen i Safari, men fungerer perfekt i Chrome eller Firefox, skyldes det ofte disse forskelle.

At sikre, at dit website fungerer problemfrit på Safari, er ikke kun et spørgsmål om æstetik, men også om funktionalitet. En dårlig Safari-oplevelse kan føre til høj afvisningsprocent, tabte konverteringer og generel utilfredshed blandt Apples store brugerbase. Derfor er omfattende test på Safari afgørende for at levere den bedst mulige brugeroplevelse og opretholde kundeloyalitet.

Udfordringen: Test af Safari uden en Mac

Den største udfordring for mange udviklere og testere er, at Safari primært er designet til macOS og iOS. Apple stoppede med at understøtte Safari til Windows efter version 5.1.7 i 2012, og der er ingen officiel Linux-version. Dette betyder, at du ikke direkte kan installere en moderne Safari-browser på en Windows- eller Linux-maskine.

Virtuelle Maskiner (VM'er)

En metode til at omgå manglen på en Mac er at opsætte en macOS virtuel maskine (VM) på din Windows- eller Linux-computer ved hjælp af virtualiseringssoftware som VMware eller VirtualBox. Du kan derefter installere Safari på macOS VM'en og udføre test, som om du var på et native macOS-miljø. Denne tilgang kræver dog, at din computer har tilstrækkelig processorkraft og RAM til at køre flere operativsystemer samtidigt, og opsætningen kan være kompleks.

How do I test a safari emulator?
Navigate to the device and browser dashboard, which displays all options for testing. Select the device you want. Select the Safari browser on said device to test on. Start testing. Repeat the process on different devices and operating systems, for making your website cross-browser and cross-platform compatible. What is a Safari Emulator?

Skybaserede Testtjenester: Den Bedste Løsning

Den mest anbefalede og effektive løsning til at teste Safari uden en fysisk Mac er at bruge skybaserede platforme til cross-browser test. Tjenester som Browserling, BrowserStack, Sauce Labs og Testsigma tilbyder adgang til ægte Safari-browsere, der kører på virkelige macOS-maskiner i skyen. Dette er ikke emulatorer eller simulatorer, men faktiske installationer af Safari, hvilket sikrer de mest nøjagtige testresultater.

Fordele ved skybaserede testtjenester:

  • Ingen Mac Nødvendig: Du kan teste Safari fra enhver enhed med en webbrowser, uanset om det er Windows, Linux eller en anden Mac.
  • Adgang til Flere Versioner: Disse tjenester giver dig adgang til et bredt udvalg af Safari-versioner (f.eks. Safari 15, 16, 17, 18) på forskellige macOS-versioner (Monterey, Ventura, Sonoma, Sequoia).
  • Realtidsinteraktion: Du interagerer direkte med den virkelige browser, hvilket giver en ægte brugeroplevelse.
  • Automatisering: Mange platforme understøtter automatiseret test via API'er, hvilket er essentielt for CI/CD-workflows.
  • Fejlfinding: Du kan ofte få adgang til udviklerværktøjer direkte i skybrowseren til fejlfinding.

Disse platforme er ideelle for udviklere, der ønsker at sikre kompatibilitet uden at skulle investere i flere Apple-enheder.

Brugeragent-spoofing i andre browsere

Du kan også forsøge at "efterligne" Safari ved at ændre browserens brugeragentstreng i udviklerværktøjerne i browsere som Chrome eller Edge. Dette gøres typisk under "Network conditions" eller "More tools > Network conditions". Ved at vælge en Safari-brugeragent (f.eks. "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15") narrer du websitet til at tro, du er en Safari-bruger.

Vigtig bemærkning: Dette er ikke en ægte Safari-emulering. Selvom websitet måske justerer sit indhold baseret på brugeragenten, vil rendering-motoren (f.eks. Chromes Blink-motor) stadig være den, der gengiver siden. Dette er kun nyttigt til at teste responsivt design eller indhold, der er afhængigt af brugeragenten, men det vil ikke afsløre Safari-specifikke CSS-, JavaScript- eller WebKit-renderingfejl.

Safaris Unikke Egenskaber og Kompatibilitet

WebKit Browser Engine

Safari er bygget på WebKit-browser-motoren, som adskiller sig fra de motorer, der bruges af Chrome (Blink) og Firefox (Gecko). Dette er den primære årsag til, at websites kan opføre sig forskelligt i Safari. WebKit har sine egne fortolkninger af webstandarder, og selvom de fleste moderne funktioner understøttes, kan der være små forskelle i rendering eller adfærd.

Intelligent Sporingsforebyggelse (ITP)

En af Safaris mest markante funktioner er Intelligent Sporingsforebyggelse (ITP), som aggressivt blokerer tredjeparts-cookies som standard. Dette har store konsekvenser for cross-site tracking, autentificering og analyseservices, der er afhængige af cookies. Udviklere skal være opmærksomme på ITP, da det kan påvirke login-flows, reklamer og sporing af brugeradfærd.

CSS- og JavaScript-nuancer

  • CSS-animationer: Safari har en strengere håndtering af hardwareacceleration og compositing layers. Nogle egenskaber som transform og opacity kan opføre sig anderledes, og du kan have brug for -webkit- præfikser for visse animationer.
  • JavaScript-timere: Safari drosler aggressivt setTimeout, setInterval og requestAnimationFrame i baggrundsfaner for at forbedre batterilevetiden. Dette kan påvirke realtidsopdateringer.
  • Autoplay-begrænsninger: Safari blokerer som standard videoer med lyd, der afspilles automatisk. Videoer skal være slået fra (muted-attribut) eller initieres af brugerinteraktion for at tillade autoplay.

Billedformater og Videoafspilning

  • WebP/AVIF: Safari understøtter WebP-billeder fra version 14 og AVIF fra version 17. Ældre versioner kræver fallback-løsninger (f.eks. JPEG/PNG).
  • HEIC/HEIF: Safari understøtter fuldt ud HEIC og HEIF-billeder på macOS og iOS.
  • VP9: Safari understøtter VP9 på macOS Big Sur (Safari 14), men ikke på iOS, hvor Apple foretrækker HEVC (H265).

Moderne Web-API'er og Funktioner

Moderne versioner af Safari understøtter fetch(), async/await og de fleste ES6+-funktioner. Safari understøtter også WebRTC (fra Safari 11), WebAssembly (fra Safari 11), native lazy loading (fra Safari 15) og Picture-in-Picture-tilstand. Progressive Web Apps (PWA'er) understøttes, men med visse begrænsninger på iOS (f.eks. ingen push-notifikationer før iOS 17, begrænset baggrundssynkronisering). Fra Safari 16 på macOS Ventura og Safari 17 på iOS 17 understøttes push-notifikationer for webapps.

What is a safari emulator?
A Safari emulator tries to mimic Safari without running the real browser. It attempts to recreate Safari's rendering engine, features, and behavior, but it's not always accurate. Many emulators miss important details like Apple's font rendering, JavaScript quirks, and privacy settings.

Safari-versioner og macOS-kompatibilitet

Safaris opdateringer er tæt knyttet til macOS-versionerne. Her er en oversigt over større Safari-versioner og de macOS-versioner, de er kompatible med:

Safari VersionPrimær macOS VersionUdgivelsesdato (ca.)Nøglefunktioner
Safari 1Mac OS X 10.2 JaguarJanuar 2003Apples første egen browser
Safari 2Mac OS X 10.4 TigerApril 2005Første med RSS-understøttelse
Safari 3Mac OS X 10.5 LeopardJuni 2007Første med Windows-understøttelse
Safari 4Mac OS X 10.5 LeopardJuni 2009Top Sites, Cover Flow, Nitro JavaScript Engine
Safari 5Mac OS X 10.6 Snow LeopardJuni 2010Udvidelser, Læsertilstand
Safari 6Mac OS X 10.8 Mountain LionJuli 2012Droppede Windows-understøttelse, Smart Search
Safari 7Mac OS X 10.9 MavericksOktober 2013Forbedret iCloud Nøglering
Safari 8Mac OS X 10.10 YosemiteOktober 2014Nyt browserdesign
Safari 9Mac OS X 10.11 El CapitanSeptember 2015Indholdsblokering
Safari 10macOS 10.12 SierraSeptember 2016Apple Pay i browseren
Safari 11macOS 10.13 High SierraSeptember 2017Intelligent Sporingsforebyggelse
Safari 12macOS 10.14 MojaveSeptember 2018Automatiske stærke adgangskoder
Safari 13macOS 10.15 CatalinaSeptember 2019Redesignet startside
Safari 14macOS 11 Big SurSeptember 2020Indbygget oversætter, WebP-understøttelse
Safari 15macOS 12 MontereySeptember 2021Redesignede faner, native lazy loading
Safari 16macOS 13 VenturaSeptember 2022Passkeys, Web Push på macOS
Safari 17macOS 14 SonomaSeptember 2023Understøttelse af flere profiler, AVIF-understøttelse, Web Push på iOS
Safari 18macOS 15 SequoiaSeptember 2024Distraction Control, ny Video Viewer

Apple vedligeholder ikke længere en Windows-port af Safari. Den sidste version til Windows var Safari 5.1.7. Forsøg på at installere nyere versioner fra uofficielle kilder kan udgøre en sikkerhedsrisiko.

Fejlfinding og Optimering i Safari

For at fejlfinde dit website i Safari skal du aktivere udviklerværktøjerne. Gå til Safari > Indstillinger > Avanceret, og marker feltet "Vis Udviklermenu i menulinjen". Derefter kan du åbne Web Inspector med Option + Command + I. Her finder du værktøjer til at debugge JavaScript, inspicere elementer, overvåge netværksanmodninger og analysere ydeevneproblemer under fanen "Timelines".

Hvis dit website bryder sammen i Safari, men fungerer i Chrome, skyldes det ofte Safaris strengere CORS-politikker, forskellige standardstilarter for elementer eller manglende understøttelse af nogle nyere web-API'er. Sørg for at tjekke for konsolfejl, brug passende -webkit- CSS-præfikser, hvor det er nødvendigt, og brug eksplicitte ventetider i automatiserede tests for at sikre, at siden er fuldt indlæst.

Ofte Stillede Spørgsmål

Her er svar på nogle af de mest almindelige spørgsmål om Safari-test og -emulering:

Kan jeg køre Safari-browseren på Windows 10 & 11?

Nej, Apple stoppede med at understøtte Safari til Windows efter version 5.1.7. Den eneste måde at bruge en nyere Safari-version på Windows er via en virtuel browser (cloud-baseret tjeneste) eller ved at købe en Mac-computer.

Hvad er forskellen mellem en Safari-emulator og en virtuel Safari?

En Safari-emulator forsøger at efterligne Safari uden at køre den ægte browser, hvilket ofte fører til unøjagtige resultater. En virtuel Safari (f.eks. via en cloud-tjeneste) kører en ægte Safari-browser på en fjernbaseret Mac-computer, hvilket giver en 100% nøjagtig testoplevelse.

Understøtter Safari push-notifikationer?

Ja, Safari understøtter push-notifikationer for webapps fra Safari 16 på macOS Ventura og Safari 17 på iOS 17. Sørg for, at brugeren har givet tilladelse i Indstillinger > Notifikationer.

Hvorfor drosler Safari JavaScript-timere i baggrundsfaner?

Safari drosler aggressivt setTimeout, setInterval og requestAnimationFrame i baggrundsfaner for at forbedre batterilevetiden. Overvej at bruge Web Workers eller serverbaserede løsninger til realtidsopdateringer, der ikke er afhængige af JavaScript-timere.

Is there an iPhone Safari simulator?
iPhone Safari simulator – online in your browser. (Not perfect, but useful for basic websites previews.)

Understøtter Safari WebP/AVIF-billeder?

Ja, Safari understøtter WebP-billeder fra version 14 og AVIF-billeder fra version 17. For ældre versioner skal du overveje fallback-løsninger som JPEG eller PNG.

Hvor ofte opdateres Safari-browseren?

Apple opdaterer Safari regelmæssigt, typisk med større opdateringer (som fra version 17 til 18) en gang om året, når en ny macOS- eller iOS-version frigives. Mindre opdateringer, som sikkerhedsrettelser og ydeevneforbedringer, kommer med få måneders mellemrum.

Hvornår blev den første Safari-browserversion udgivet?

Den første version af Safari-browseren blev udgivet den 7. januar 2003 af Steve Jobs på Macworld Expo i San Francisco.

Hvordan håndterer Safari tredjeparts-cookies?

Safari har Intelligent Sporingsforebyggelse (ITP), som aggressivt blokerer tredjeparts-cookies som standard. Dette kan påvirke cross-site tracking, autentificering og analyseservices, der er afhængige af cookies.

Kan jeg teste mit website i flere Safari-versioner ved hjælp af CI/CD?

Ja, men da Safari-opdateringer er bundet til macOS-versioner, skal du køre hver test på den rigtige macOS-version. Cloud-baserede testplatforme med API'er (f.eks. Live API eller Headless API) er ideelle til at køre tests i flere Safari-versioner på ægte macOS-maskiner.

Hvad er Safari-browserens brugeragent?

Safari-browserens brugeragent er en streng, der fortæller websites, hvilken browser og operativsystem du bruger. Den inkluderer typisk "Mozilla/5.0", "AppleWebKit" og "Safari" for at vise, at den kører på Apples WebKit-motor. Websites bruger denne info til at justere, hvordan sider indlæses. Eksempel for Safari 18: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Understøtter Safari flere profiler?

Ja, fra Safari 17 på macOS Sonoma tilføjede Apple understøttelse af flere profiler, hvilket giver dig mulighed for at holde separate historikker, cookies, bogmærker og udvidelser for forskellige formål (f.eks. arbejde og privat browsing).

Konklusion

At sikre, at dit website fungerer problemfrit på Safari, er en uomgængelig del af moderne webudvikling. Selvom enkle Safari-emulatorer kan give en grundlæggende idé om layout, er de ingen erstatning for test på ægte browsere. Den mest pålidelige og effektive metode til at teste Safari uden at eje en Mac er at udnytte de mange robuste skybaserede platforme, der tilbyder adgang til virkelige Safari-instanser på macOS. Ved at forstå Safaris unikke egenskaber og udnytte de rette testværktøjer kan du sikre en fremragende brugeroplevelse for alle dine besøgende, uanset hvilken browser de vælger.

Hvis du vil læse andre artikler, der ligner Test af Safari: Emulatorer vs. Ægte Browsere, kan du besøge kategorien Teknologi.

Go up