Webböngészők Történet (2)

● Böngészőháborúk – Lásd: ://en.wikipedia.org/wiki/Browser_wars Jeszenszky Péter Debreceni Egyetem, Informatikai Kar [email protected]

Utolsó módosítás: 2021. szeptember 24.

3

Történet (1) Hogy működnek a böngészők?

● Az első böngésző: ● Ajánlott olvasnivaló: – WorldWideWeb (Tim Berners-Lee, 1990. – Tali Garsiel and Paul Irish. How Browsers Work: december 25.) Behind the scenes of modern web browsers. – Lásd: August 5, 2011. https://www.html5rocks.com/en/tutorials/internals/h ● Tim Berners-Lee. The WorldWideWeb browser. owbrowserswork/ https://www.w3.org/People/Berners-Lee/WorldWideWeb .html – Anton Paras. Notes on “How Browsers Work”. ● Jay Hoffmann. The Web’s First (And Second) Browser. December 11, 2017. September 25, 2017. https://codeburst.io/how-browsers-work-6350a423 https://thehistoryoftheweb.com/web-first-and-second-br 4634 owser/

2 4 A böngészők komponensei: A böngészők felépítése felhasználó felület

User Interface ● A felhasználói felülethez tartozik a címsor, a gombok (például, vissza, előre, frissítés), menük, stb. ● Beletartozik a böngésző minden látható része,

Data annak a területnek a kivételével, ahol a Storage weboldal megjelenítésre kerül. Rendering Engine

Networking JS Engine UI Backend

5 7

A böngészők komponensei: Böngészőmotor és renderelő motor böngészőmotor

● A böngészőmotor (browser engine), renderelő ● Egy magas szintű interfészt biztosít a motor (rendering engine) és layout engine renderelő motor manipulálásához. kifejezéseket gyakran egymás megfelelőiként ● Közvetítő szerepet tölt be a felhasználói felület használják, bár ez technikailag pontatlan. és a renderelő motor között. – A egy speciális eset, mivel egy ● böngészőmotorból és egy renderelő motorból áll. Kezeli az adattároló komponenst.

6 8 A böngészők komponensei: A böngészők komponensei: renderelő motor hálózati komponens (2)

● A böngészők egy kulcskomponense. ● További információk: ● Feladata webes tartalom (például egy HTML – WebSocket API: vagy XML dokumentum) vizuális ● HTML Living Standard – Web sockets https://html.spec.whatwg.org/multipage/web-sockets.ht reprezentációjának létrehozása egy kimeneti ml eszközön való megjelenítés céljából. – WebRTC: – A tartalom renderelése a meghatározott formázási ● https://webrtc.org/ szabályoknak megfelelően történik. ● WebRTC 1.0: Real-time Communication Between Browsers (W3C ajánlás, 2021. január 26.) https://www.w3.org/TR/webrtc/

9 11

A böngészők komponensei: A böngészők komponensei: hálózati komponens (1) JavaScript-motor (1)

● A hálózati komponens felelős a hálózati ● Feladata JavaScript kód végrehajtása. kommunikáció kezeléséért, beleértve: – HTTP kérések és válaszok – WebSocket API – WebRTC ● Egy platformfüggetlen interfészt biztosít, mely mögött platform specifikus API-k kerülnek felhasználásra.

10 12 A böngészők komponensei: A böngészők komponensei: JavaScript-motor (2) adattároló (1)

● A fő JavaScript-motorok: ● Az adattároló felelős az adatok perzisztens – SpiderMonkey (programozási nyelv: /C++; licenc: tárolásáért, a következőkhöz használják: Public License 2.0) https://spidermonkey.dev/ – HTTP sütik ● A Mozilla projekt JavaScript motorja. – V8 (programozási nyelv: C++; licenc: New BSD License) – HTTP gyorsítótárazás https://v8.dev/ https://github.com/v8/v8/ – Indexed Database API (IndexedDB) ● A JavaScript motorja. – API – JavaScriptCore (programozási nyelv: C++; licenc: LGPLv2) https://developer.apple.com/documentation/javascriptcore https://trac.webkit.org/wiki/JavaScriptCore ● Az Apple JavaScript motorja.

13 15

A böngészők komponensei: A böngészők komponensei: UI back-end adattároló (2)

● Az UI back-end felelős a böngészőben a ● További információk: rajzolásért. – HTTP sütik: ● Adam Barth, HTTP State Management Mechanism, RFC 6265, April 2011. ● Egyaránt használják a felhasználói felület https://www.rfc-editor.org/rfc/rfc6265 – HTTP gyorsítótárazás: elemek és a weboldal megjelenítéséhez. ● Roy T. Fielding (ed.), Mark Nottingham (ed.), Julian F. Reschke (ed.), Hypertext Transfer Protocol (HTTP/1.1): Caching, RFC 7234, June 2014. ● Egy platformfüggetlen interfészt biztosít, mely https://www.rfc-editor.org/rfc/rfc7234 mögött platform specifikus API-k kerülnek – Indexed Database API (IndexedDB): ● Indexed Database API 3.0 (W3C munkaterv, 2021. június 18.) felhasználásra. https://www.w3.org/TR/IndexedDB/ – Web Storage API: ● HTML Living Standard – Web storage https://html.spec.whatwg.org/#webstorage

14 16 A főbb renderelő motorok Renderelő motorok:

● WebKit ● Webhely: https://www.chromium.org/blink ● Fejlesztő: Chromium Project (Google) ● Blink ● Licenc: Simplified BSD License/New BSD License/LGPLv2.1 ● Programozási nyelv: C++ ● Gecko ● A Blink eredetileg a WebKit WebCore komponensének forkjaként született. ● A Blink-en alapuló szoftverek: – Chromium https://www.chromium.org/Home – , Google Chrome for Android https://www.google.com/chrome/ – Chromium-alapú https://www.microsoftedgeinsider.com/ – https://www.opera.com/ – https://vivaldi.com/ – …

17 19

Renderelő motorok: WebKit Renderelő motorok: Gecko

● Webhely: https://webkit.org/ ● Webhely: ? ● Fejlesztő: Apple ● Fejlesztő: Mozilla Project ● Licenc: LGPLv2/Simplified BSD License ● Licenc: 2.0 ● Programozási nyelv: C++ ● Programozási nyelvek: C, C++, JavaScript, Rust ● A WebKit-en alapuló szoftverek: ● A Gecko-n alapuló szoftverek: – https://www.apple.com/safari/ – https://www.mozilla.org/firefox/ – Google Chrome for iOS https://www.google.com/chrome/ – https://www.mozilla.org/firefox/browsers/mobile/ – Firefox for iOS https://www.mozilla.org/firefox/browsers/mobile/ – SeaMonkey https://www.seamonkey-project.org/ – GNOME Web https://wiki.gnome.org/Apps/Web – … – …

18 20 Böngészők piaci részesedése Böngészők összehasonlítása

● Minden platform: ● Can I use… – Compare browsers https://gs.statcounter.com/browser-market-sha https://caniuse.com/ciu/comparison re https://github.com/Fyrd/caniuse ● Asztali: ● https://en.wikipedia.org/wiki/Comparison_of_w https://gs.statcounter.com/browser-market-sha eb_browsers re/desktop ● Mobil: https://gs.statcounter.com/browser-market-sha re/mobile

21 23

Műszaki dokumentáció fejlesztők A főbb asztali böngészők számára

● Chromium, Google Chrome ● Chromium, Google Chrome: ● Firefox – For Developers https://www.chromium.org/developers ● Opera ● Firefox: ● Safari – https://developer.mozilla.org/en-US/docs/Mozilla/Fi ● Microsoft Edge refox – https://firefox-source-docs.mozilla.org/ ● Microsoft Edge: – https://docs.microsoft.com/en-us/microsoft-edge/# microsoft-edge-for-developers 22 24 A főbb asztali böngészők: A főbb asztali böngészők: Chromium Chromium és Google Chrome (1)

● Webhely: https://www.chromium.org/Home ● A Google Chrome a Chromiumon alapul. ● Fejlesztő: Chromium Project (Google) ● Licenc: New BSD License – Lásd: https://chromium.googlesource.com/chromium/src/+/master/LICENSE ● Programozási nyelvek: C, C++, JavaScript ● Platform: Linux, macOS, Windows ● Renderelő motor: Blink ● JavaScript motor: V8 ● Technikai információk: chrome://system

25 27

A főbb asztali böngészők: Google A főbb asztali böngészők: Chrome Chromium és Google Chrome (2)

● Webhely: https://www.google.com/chrome/ ● A két böngésző közötti különbségek: ● Fejlesztő: Google – Eltérő logók. – Eltérő audio és videó kódekekkel vannak felszerelve. ● Licenc: nem szabad (lásd: chrome://terms) – A felhasználói adatok tárolása különböző könyvtárakban. ● Programozási nyelvek: C, C++, JavaScript ● Chromium: ~/.cache/chromium, ~/.config/chromium ● Platform: Linux, macOS, Windows ● Google Chrome: ~/.cache/google-chrome, ~/.config/google- chrome ● Renderelő motor: Blink – A Chromium forráskódját módosíthatják az operációs rendszer ● JavaScript motor: V8 disztribúciók, a csomagolás is disztribúciófüggő.

● ● Technikai információk: chrome://system Lásd: The Difference between Google Chrome and Chromium on Linux ● Fejlesztői kiadás: https://www.google.com/intl/hu/chrome/dev/ https://chromium.googlesource.com/chromium/src/+/master/doc s/chromium_browser_vs_google_chrome.md

26 28 A főbb asztali böngészők: Firefox A főbb asztali böngészők: Safari

● Webhely: https://www.mozilla.org/firefox/ ● Webhely: https://www.apple.com/safari/

● Fejlesztő: Mozilla Project ● Fejlesztő: Apple ● Licenc: Mozilla Public License 2.0 (lásd: about:license) ● Licenc: nem szabad ● Programozási nyelvek: C, C++, JavaScript, Rust ● Programozási nyelvek: C++, Objective-C ● Platform: Linux, macOS, Windows ● Platform: macOS ● Renderelő motor: Gecko ● Renderelő motor: WebKit ● JavaScript motor: SpiderMonkey ● ● Technikai információk: about:support JavaScript motor: JavaScriptCore ● Fejlesztői kiadás: Firefox Developer Edition ● Fejlesztői kiadás: Safari Technology Preview https://www.mozilla.org/firefox/developer/ https://developer.apple.com/safari/technology-preview/

29 31

A főbb asztali böngészők: A főbb asztali böngészők: Opera Microsoft Edge (1)

● Webhely: https://www.opera.com/ ● Webhely: https://www.microsoft.com/edge ● Fejlesztő: Opera Software ● ● Licenc: nem szabad Fejlesztő: Microsoft – Lásd: https://www.opera.com/eula/computers ● Licenc: nem szabad (lásd: edge://terms) ● Programozási nyelv: C++ ● ● Platform: Linux, macOS, Windows Platform: Linux (2020–), macOS (2019–), ● Renderelő motor: Blink Windows ● JavaScript motor: V8 ● Renderelő motor: EdgeHTML (–2019), Blink ● Technikai információk: opera://system (2019–) ● Fejlesztői kiadás: Opera developer https://www.opera.com/computer/beta ● JavaScript motor: Chakra (–2019), V8 (2019–)

30 32 A főbb asztali böngészők: Böngésző kiegészítők Microsoft Edge (2)

● Chromium-alapú Edge: ● Egy böngésző kiegészítő egy böngésző – Bejelentés: megjelenését vagy viselkedését testreszabó szoftvermodul. ● Joe Belfiore. Introducing Microsoft Edge Beta: Be one of the first to try it now. August 20, 2019. – A kiegészítők fajtái: kiterjesztések, nyelvi https://blogs.windows.com/windowsexperience/2019/08/ 20/introducing-microsoft-edge-beta-be-one-of-the-first-t csomagok, témák, plugin-ek o-try-it-now/ – Programozási nyelv: C, C++, JavaScript – Linux-ra jelenleg csak előzetes kiadás érhető el itt: https://www.microsoftedgeinsider.com/

33 35

Webfejlesztő eszközök Böngésző kiterjesztések

● Chromium, Google Chrome, Opera: ● Egy böngésző kiterjesztés egy olyan – Chrome Developer Tools (DevTools) kiegészítő, mely egy böngésző viselkedését https://developer.chrome.com/devtools módosítja, azaz új funkcionalitást ad hozzá ● Firefox: vagy létező funkcionalitást módosít. – Firefox Developer Tools https://developer.mozilla.org/docs/Tools ● Safari: – Safari Developer Tools https://developer.apple.com/safari/tools/ https://support.apple.com/guide/safari-developer ● Chromium-alapú Edge: – Microsoft Edge (Chromium) Developer Tools https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chro mium

34 36 Böngésző kiterjesztések fejlesztése Elérhető böngésző kiegészítők (1)

● Chromium, Google Chrome: Chrome Web Store ● Chromium, Google Chrome, Chromium-alapú Edge: https://chrome.google.com/webstore/ – Lásd: https://developer.chrome.com/extensions ● Firefox: Firefox Add-ons ● Firefox: https://addons.mozilla.org/firefox/ – A Firefox kiterjesztések a WebExtensions API segítségével készülnek, mely egy keresztböngészős rendszer kiterjesztések ● Opera: Opera add-ons https://addons.opera.com/ fejlesztéséhez. A rendszer nagymértékben kompatibilis a Google Chrome és az Opera által támogatott kiterjesztési API- ● Safari: Mac App Store val: az ezen böngészőkhöz készült kiterjesztések minimális változtatásokkal kell, hogy működjenek a Firefox-szal. ● Chromium-alapú Edge: Microsoft Edge Addons – Lásd: Browser Extensions https://microsoftedge.microsoft.com/addons/Micro https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web soft-Edge-Extensions-Home Extensions

37 39

A kiterjesztésekkel kapcsolatos Böngésző kiterjesztések fejlesztése szabványosítási törekvések (2)

● WebExtensions Community Group ● Opera: https://www.w3.org/community/webextensions/ – Lásd: Extensions Documentation https://github.com/w3c/webextensions/ https://dev.opera.com/extensions/ – Kezdeményezők: Apple, Google, Microsoft, Mozilla ● Safari: – A közösségi csoport célja egy olyan közös – Az Xcode IDE-vel kell létrehozni a Safari böngésző kiterjesztési platform meghatározása és böngészőhöz kiterjesztéseket. szabványosítása, mely lehetővé teszi a fejlesztők számára, hogy ne kelljen teljesen újraírniuk a – Lásd: Safari Extensions kiterjesztéseiket ahhoz, hogy azok különböző https://developer.apple.com/safari/extensions/ böngészőkben működjenek.

38 40 Böngésző kiterjesztések fejlesztése „Fej nélküli” böngészők (1) (3)

● A kiterjesztések webtechnológiákon alapulnak, ● Egy „fej nélküli” (headless) böngésző egy grafikus mint például a HTML, CSS és JavaScript. felhasználói felület nélküli böngésző. – Programozottan vezérelhető. ● A tárgyalt főbb böngészők mindegyikénél ● Lehetséges alkalmazások: összecsomagolt HTML, CSS, JavaScript és egyéb állományok (például képek). – Webalkalmazások automatikus tesztelése – Weboldalakkal történő interakció automatizálása – Chromium, Google Chrome, Firefox, Opera, Microsoft – Képernyőképek készítése weboldalakról Edge: – Információ kinyerés weboldalakból (web scraping) ● Minden kiterjesztésnek van egy manifest állománya – … (manifest.json), mely metaadatokat tartalmaz és egybefogja a komponenseket. ● Lásd: https://en.wikipedia.org/wiki/Headless_browser

41 43

Böngésző kiterjesztések fejlesztése „Fej nélküli” böngészők (2) (4)

● További információk: ● A Chromium, Google Chrome és Firefox – Firefox Extension Workshop böngészők futhatnak „fej nélküli” módban. https://extensionworkshop.com/ – Chromium, Google Chrome: ● Lásd: – Eric Bidelman. Getting Started with Headless Chrome. April 2017. https://developers.google.com/web/updates/2017/04/headless-ch rome – https://chromium.googlesource.com/chromium/src/+/lkgr/headles s/README.md – Firefox: ● Lásd: Using Headless Mode in Firefox https://hacks.mozilla.org/2017/12/using-headless-mode-in -firefox/

42 44 „Fej nélküli” böngészők (3) Szöveges böngészők

● Képernyőkép készítése a Google Chrome-mal ● (platform: Linux, macOS, Windows; licenc: GPLv2) https://lynx.invisible-island.net/ (a kimenet a screenshot.png állományba – A legrégebbi olyan böngésző, melyet a mai napig általánosan kerül kiírásra): használnak és aktívan fejlesztenek. ● (platform: Linux, macOS, Windows; licenc: GPLv2) google-chrome --headless --screenshot \ http://links.twibright.com/ --window-size=1920,1080 https://www.w3.org/ – Grafikus módban is futtatható, lásd a -g parancssori opciót. ● Browsh (platform: Linux, macOS, Windows; licenc: LGPLv2.1) https://www.brow.sh/ https://github.com/browsh-org/browsh – Web oldalak teljesen szöveges verzióit hozza létre „fej nélküli” módban futtatott Firefox segítségével.

45 47

„Fej nélküli” böngészők (4) A főbb mobil böngészők

● Szabad és nyílt forrású „fej nélküli” böngészők: ● Google Chrome (Android, iOS) – HtmlUnit (programozási nyelv: Java; licenc: Apache License 2.0) https://github.com/HtmlUnit/htmlunit https://htmlunit.sourceforge.io/ ● Safari for iOS ● Lehetővé teszi egy böngésző szimulálását tesztelési célból, egy másik tesztelési keretrendszerben történő használatra szánják, mint például a JUnit. ● for Android – Puppeteer (programozási nyelv: JavaScript; licenc: Apache License 2.0) https://pptr.dev/ https://github.com/puppeteer/puppeteer ● UC Browser (Android, iOS) ● Headless Chrome Node.js API. – … ● Lásd: HeadlessBrowsers https://github.com/dhamaniasad/HeadlessBrowsers

46 48 A főbb mobil böngészők: Mobil böngészők iOS-re Safari for iOS

● Az iOS-re készült mobil böngészőknek a ● Webhely: https://www.apple.com/safari/ WebKit renderelő motort és a JavaScriptCore ● Fejlesztő: Apple motort kötelező használni. ● Licenc: nem szabad – Lásd: App Store Review Guidelines – Software Requirements ● Renderelő motor: iOS WebKit https://developer.apple.com/app-store/review/guid elines/ ● JavaScript motor: JavaScriptCore ● „Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.”

49 51

A főbb mobil böngészők: A főbb mobil böngészők: Chrome Samsung Internet for Android

● Webhely: https://www.google.com/chrome/ ● Webhely:

● https://www.samsung.com/us/support/owners/ap Fejlesztő: Google p/samsung-internet ● Licenc: nem szabad ● Fejlesztő: Samsung ● Platform: Android, iOS ● Licenc: nem szabad ● Renderelő motor: Blink (Android)/iOS WebKit ● Renderelő motor: Blink (iOS) ● JavaScript motor: V8 ● JavaScript motor: V8 (Android)/JavaScriptCore (iOS) ● További információk fejlesztők számára: https://developer.samsung.com/internet

50 52 A főbb mobil böngészők: Az about URI séma (1) UC Browser

● Webhely: https://www.ucweb.com/ ● Az about URI sémát széles körben használják a ● Fejlesztő: UCWeb, az Alibaba egy leányvállalata böngészők ahhoz, hogy hozzáférést adjanak a belső erőforrásaikhoz, mint például a beállítások, ● Licenc: nem szabad alkalmazás információk vagy rejtett beépített ● Platform: Android, iOS funkciók (például „húsvéti tojások”). ● Renderelő motor: Blink (Android)/iOS WebKit (iOS) – Lásd: S. Moonesamy (ed.), The "about" URI Scheme, RFC 6694, August 2012. ● JavaScript motor: V8 (Android)/JavaScriptCore (iOS) https://www.rfc-editor.org/rfc/rfc6694 ● Fejlesztői kiadás: https://dev.ucweb.com/ ● Példa: – Az about:blank URI egy üres oldalra hivatkozik.

53 55

A főbb mobil böngészők: Opera Az about URI séma (2)

● Opera for Android (platform: Android), Opera Mini ● Bizonyos böngészők az about URI-kat a saját (Android), Opera Touch (platform: Android), Opera ekvivalens megfelelőikre képezik le, a for iOS (platform: iOS) sémanevet (about) a nevükre (mint például ● Webhely: https://www.opera.com/mobile chrome, opera vagy edge) kicserélve. ● Fejlesztő: Opera Software – Például a Chromium és a Google Chrome az ● Licenc: nem szabad about:about helyett a chrome://about URI-t ● Renderelő motor: Blink (Android)/iOS WebKit (iOS) használja. – Az kivétel, melyet változatlanul ● JavaScript motor: V8 (Android)/JavaScriptCore (iOS) about:blank hagynak.

54 56 Az about URI séma (3) Az about URI séma (5)

● Böngésző támogatás: ● Böngésző támogatás: (folytatás) – Chromium, Google Chrome: – Microsoft Edge (EdgeHTML): Néhány about URI ● Az about leképezése chrome://-ra. támogatott, mint például about:blank és . ● A chrome URI-k listája: chrome://about about:flags – Példák: chrome://bookmarks, chrome://dino, – Chromium-alapú Edge: chrome://history, … ● Az about leképezése edge://-re. – Firefox: ● Az Edge URI-k listája: edge://about ● Az about URI-k listája: about:about – Példák: edge://downloads, edge://flags, – Példák: about:cache, about:downloads, about:mozilla, edge://history/all, edge://history/today, … edge://history/yesterday, …

57 59

Web technológiák támogatása Az about URI séma (4) böngészőkben

● Böngésző támogatás: (folytatás) ● Chrome Platform Status – Opera: A chrome URI-k egy részhalmazát https://www.chromestatus.com/features támogatja valamint néhány továbbit, de a ● Firefox Platform Status sémanevet opera-ra cseréli. https://platform-status.mozilla.org/ – Safari: Csak az about:blank URI-t ismeri fel. ● Microsoft Edge Platform Status https://developer.microsoft.com/en-us/microsof t-edge/status/ ● WebKit Feature Status https://webkit.org/status/

58 60 További hasznos linkek

● HTML5test – How well does your browser support HTML5? https://html5test.com/ https://github.com/WebPlatformTest/HTML5tes t ● The CSS3 Test https://css3test.com/ https://github.com/LeaVerou/css3test ● Browserhacks http://browserhacks.com/ ● Secrets of the Browser Developer Tools http://devtoolsecrets.com/

61