I really wanted to write my browser, with my chips, etc. So, I tried to use the standard WForms component, but it uses the IE kernel, which is also obsolete.
I tried using CefSharp, which works with Chromium, but eats more RAM than I would like.
So, I would like to know how to write my core, if you know books devoted to these topics, some examples, articles or lessons - I will be extremely grateful to you.
* If this is not possible to implement in C #, then I will be glad all the same books, lessons, examples and articles in C ++.
Thank you all in advance for your answers.
Create a browser
The user interface includes the following ten components:
- Back button
- Forward button
- Refresh button
- Address bar
- Twitter Button
- Button and favorites menu
- Button and settings menu
- WebView Control
We also implemented several additional features to make working with the browser even more enjoyable:
- Keyboard shortcuts: pressing F11 switches to full-screen mode, ESC exits full-screen mode, Ctrl + L selects the address bar,
- CSS transitions for menu animations
- Cache management
- Manage your favorites
- Analysis of input addresses - for example, “bing.com” translates to http (s): //bing.com, and “seahawks” searches for Bing
- Automatically change the highlighting of the address bar with focus
- Responsive Design
Button control back and forth
When you press the back button, the browser returns the previous page from the browser history, if available. Similarly, when you press the forward button, the browser returns the next page from the history, if it is also available. To implement this logic, we use the goBack () and goForward () methods, respectively. These functions will automatically navigate to the correct page from the navigation stack.
After going to a certain page, we also update the current state of the buttons to prevent the “possibility” of navigation when we reach one of the ends of the navigation stack. In other words, we turn off the navigation buttons forward or backward, checking the properties of canGoBack or canGoForward for equality false.
Manage update and stop buttons
The update and stop buttons are slightly different from the rest of the navigation bar components in that they use the same place in the UI. When the page loads, clicking on the button will stop loading, hide the “progress ring” and display the refresh icon. Conversely, when the page is loaded, clicking on the button will start updating the page and (in another part of the code) will display the stop icon. We use the refresh () or stop () methods depending on the current conditions.
Address Bar Management
In general, the implementation of the address bar can be very simple. When the URL is entered into the text field, pressing Enter will call the navigate () method, using the contents of the input element of the address bar as a parameter.
However, modern browsers have gone much further and introduce additional functionality for the convenience of users. This adds some complexity to the implementation - and it all depends on the scripts that you want to support.
Here is an example of a script that we tried to implement. Suppose the address “microsoft.com" is entered in the address bar. The address is not complete. If you pass this value to the navigate () method, it will fail. Our browser should know that the URL is not complete, and be able to determine which protocol to substitute correctly: http or https. Moreover, it is possible that the value entered was not intended by the address. For example, we could enter the value “seahawks” in the address bar, hoping that, like in many browsers, the bar also works as a search field. The browser must understand that the value is not an address, and try to “find” it in the search engine.
Requesting favicon is a non-trivial task, as there are several ways the icon can be set. The easiest way is to check the root of the website for the presence of the favicon.ico file. However, some sites may be on a subdomain and therefore have an excellent icon. For example, the icon on “microsoft.com” is different from the icon on “windows.microsoft.com”. To avoid ambiguity, you can use another method - check the page layout for a link-text inside the document with a rel-attribute equal to “icon” or “shortcut icon”.
We use the invokeScriptAsync () method to insert a script inside the WebView control that will return a string if successful. Our script looks inside the page for all elements with a link-tech, checks if the rel-attribute contains the word “icon”, and if it matches, returns the value of the “href” attribute back to the application.
As mentioned above, we use in our code features from the new ES2015 specification. You may have noticed the use of arrow notation in many of the examples above, as well as a number of other features. An embeddable script is a great example of code improvement achieved through ES2015 support.
Keyboard shortcuts support
Unlike the capabilities that we have implemented above, supporting keyboard shortcuts will require us to have a small piece of C ++ or C # code wrapped in the form of a Windows Runtime (WinRT) component.
To determine the pressing of hot keys for performing certain actions, for example, to select the address bar when pressing the Ctrl + L combination or switch to full-screen mode by F11, we need to insert another script in WebView. To do this, we use the invokeScriptAsync () method, which we already mentioned above. However, we need to somehow report back to the application layer when certain keys are pressed.
Using the Windows Runtime API, we can change the ApplicationView.TitleBar property to customize the color palette of all application header components. In our browser, when loading the application, we change the colors so that they match the navigation bar. We also update the colors when opening the menu to match the background of the menu. Each color must be defined as an object with RGBA properties. For convenience, we created a helper function that generates the desired format from a hexadecimal string record.
An indication of progress, as well as a menu of settings and favorites, use CSS transitions for animation. From the settings menu, temporary web data can be cleared using the clearTemporaryWebDataAsync () method. And in the favorites menu, the displayed list is stored in a JSON file in the root folder of the roaming application data warehouse.