Skip to content

Latest commit

 

History

History
63 lines (44 loc) · 5.51 KB

README.md

File metadata and controls

63 lines (44 loc) · 5.51 KB
Raw

React Native Web Browser App

An open-source, extensible cross-platform (mobile and desktop) web browser made in React Native!

Motivation

My masochistic hobby project is building a web browser for browsing foreign-language websites: LinguaBrowse iOS. It is a basic minimal clone of iOS Safari that does a lot of Natural Language Processing and JS injection, manages a vocabulary list, and handles In-App Purchases. It was written imperatively in Swift, which ultimately brought my productivity to a standstill, as I found UIs much harder to build in UIKit than in React, and state much harder to manage in an imperative coding style.

Last year I tried to address these issues by porting LinguaBrowse to React Native macOS, but ultimately gave up developing it due to the premature state of React Native macOS: I was unable to code-share with iOS; had to make most of the UI on the native side (with lots of message-passing over the bridge) due to incomplete React components; and hot-reloading didn't work. But it was fun and showed great promise.

So here I am foolishly building the same browser for the third time, and this time the landscape of React Native and cross-platform app development is looking more exciting than ever:

  • React Native has Fast Refresh and auto-linking;
  • Apple have produced Catalyst (meaning that I don't have to use React Native macOS);
  • Microsoft are driving desktop platforms on React Native (meaning that a new React Native macOS is available anyway);
  • JSI and turbo-modules are on its way;
  • Redux Toolkit makes Redux bearable with TypeScript, and;
  • Expo are doing great work driving the ecosystem with Unimodules, React Navigation, and more.

Given all this momentum behind React Native, I believe that we now have the maturity of tools to pull off a cross-platform, declarative UI-based web browser in a single code-base. So rather than attempt it all on my own and couple the code to LinguaBrowse, I've decided to open-source the 'browser' aspect of LinguaBrowse and maintain any of my brand-specific stuff in a separate fork. In fact, with adequate extension APIs, a fork may not even be needed at all.

Scope

The browser should:

  • have a UI that is no less functional than that of Firefox's;
  • support at least iOS, Android, macOS, and Windows from one codebase;
  • allow consumers to swap out the WebView for another one (for now, I'm using my fork of react-native-webview);

To be clear: This project is purely focused on building a browser UI, and forwarding user actions to a WebView. We are not trying to rebuild a browser engine here – just the UI around it.

Roadmap

  • Functional navigation buttons (back, forward, stop, refresh)
  • Functional URL bar (can navigate to URL inputs and updates text upon page redirect)
  • Rotation
  • Bar retraction
  • Intelligent URL vs. search query determination in search bar
  • Search suggestions
  • Bars snapping to fully retracted/revealed upon gesture release
  • Tabs
  • History
  • Browsing-state persistence
  • Bookmarks
  • Reading list
  • Page-specific actions
  • Branded app-specific actions (e.g. JS injection, popup blocking, whatever)

Prior art

I have been talking a fair bit about browser-building with the Cliqz team, as they are doing some exciting work (see these stellar blog posts) in this space right now.

Cliqz provides superb prior art – it would be great (in my opinion) if this project could converge with it in some way to provide a single, declarative UI codebase that could be used for all platforms. They already use a cross-platform core. In fact, they have experimented with a React Native UI at least for the purposes of producing a Windows app, and I shall have to ask what brought that experiment to an end. It could be that this project could feed into cliqz-s (see below), or vice-versa.

Cliqz give good reasons as to why they use Firefox as a basis rather than Chromium.