我的浏览器 - 可个性化的自定义浏览器

我的浏览器 - 可个性化的自定义浏览器_第1张图片
识别图中二维码下载安装

背后的历史故事

说起我的浏览器,那是2015年春天刚过完没多久,正值5月底,依稀还记得那时我是住在民生路的羽北小区,因为那时刚搬去新房子不久,刚在淘宝上买的墙纸与壁画贴上不久,一个人在一个还算蛮温馨房间里,带着欣慰的心情独自坐一台山寨的iMac前,思索着接下来打算做点什么。

我的浏览器 - 可个性化的自定义浏览器_第2张图片
01在羽北小区.JPG

记得当时到公司有大半年了,做的不是浏览器项目,后来有leader说后期会让我做浏览器,所以当时就开始研究起了浏览器。做浏览器,当时有两种核心组件可并行的用,市面上主流的都是基于UIWebView,因为坑少,也成熟用了很多年了。部分浏览器从iOS8开始采用WKWebView核心,因为用WKWebView核心加载网页比UIWebView核心快太多。但WKWebView当时作为一个新事物坑还是比较多的。

2014年10月那次苹果推出了iOS8,对我来说iOS8有两个非常重要的新东西,一个是WKWebView,一个是Keyboard Extension。可幸的是我都接触了,而且应用它们都做了优秀的App,而我的浏览器就主要基于这个WKWebView构建的。

我的浏览器前期也兼容了两种核心,其实当时我并没有想要自己做一款浏览器的想法,只是为以研究做浏览器,比较好做法是自己写一个实现一遍。心想虽然这样会比较累,但这样对我来说成效是最大的。因为当前公司的浏览器项目确实有点臃肿,依赖于之上的业务也多。所以怀着对自己的信任,为了技术热情与理想,重新架构设计,从零开始重新写一个轻量的Demo浏览器。

当时重新写时,首先就用UIWebView做了一遍,顺便熟悉了WebViewJavascriptBridge的用法,发现没有想象的那么困难,因为能在UIWebView上可做的事情挺多的,都还挺顺畅的,也不麻烦,很快就实现了一个基于UIWebView的浏览器,主要是支持多窗口,有历史与书签管理。

后来参考了github诸多案例后,就想做一个既兼容UIWebView又兼容WKWebView的WebView组件,最后实现下来,发现总还是免不了逻辑和代码变得更复杂了,变得更加难以维护,问题复杂化了,后面不断的功能变更与版本迭代时问题太多,得不尝失。做一个同时兼容UIWebView和WKWebView的XXWebView组件不合理,成本太高,现在我github的MyBrowser的master分支上还保留着,只是没维护了。

不知道什么时候,可能是熟悉WKWebView后,了解他更多的特性与优点后,就比较排斥再用UIWebView了。所以就想着把之前做的半拉子的Demo浏览器进一步优化完善,直至后来新开git分支完全用WKWebView实现,把与UIWebView相关代码与逻辑都删除了。终于解脱了,至少我自己有一个App不用再在为了UIWebView与WKWebView之间的兼容性来回折腾了。

最后再解释一下这个浏览器为什么叫『我的浏览器』,因为当时我做它的时候,想到的只是给自己做的用的,一时没想到特别好的名字,就叫了这个名字,以突显这是我的浏览器,我的个性化浏览器,那时多少有一点装B的意思。

好了,废话已经写了很多了,下面具体介绍我的浏览器吧。

先上几张浏览器的效果图:

我的浏览器 - 可个性化的自定义浏览器_第3张图片
02首页.PNG
我的浏览器 - 可个性化的自定义浏览器_第4张图片
03窗口页.PNG
我的浏览器 - 可个性化的自定义浏览器_第5张图片
04更多设置页.PNG

基本功能介绍

我的浏览器的特点是极简、极轻、可自定义。功能多又能体积小,一个重要原因是基本上不添加第3方库,所有的功能模块基本都用系统原生支持的或是自己亲手编写实现。所以安装包在5M以内,即便是3x(3x图大)屏幕的设备安装包也在8M左右。

自动全屏

自动全屏功能让我们在看浏览内容时能更加全神贯注于内容本身;我的浏览器在向上滑动内容时会自动隐藏顶部导航条与底部工具栏,从而为主体内容预留出更多展现空间。

05自动全屏.gif

夜间模式 & 无图模式

开启夜间模式可有效降低屏幕亮度保护我们的眼睛;

我的浏览器 - 可个性化的自定义浏览器_第6张图片
06夜间模式.gif

无图模式可以屏蔽掉网页中的图片;

07无图模式.gif

广告拦截

广告拦截让网页更干净;页面加载更加迅速;

我的浏览器 - 可个性化的自定义浏览器_第7张图片
08无广告拦截.PNG
我的浏览器 - 可个性化的自定义浏览器_第8张图片
09有广告拦截.PNG

多窗口、书签管理

多窗口、书签管理、历史记录、清除痕迹作为一款浏览器必有的功能,所以我的浏览器也必须加上了。

我的浏览器 - 可个性化的自定义浏览器_第9张图片
10多窗口.PNG
我的浏览器 - 可个性化的自定义浏览器_第10张图片
11书签管理.PNG
我的浏览器 - 可个性化的自定义浏览器_第11张图片
12历史记录.PNG

扫描二维码

每想到Safari没有扫描二维码的功能,就感觉这是一个极大的缺陷,浏览器没有扫描二维码太不方便了。

我的浏览器 - 可个性化的自定义浏览器_第12张图片
13扫描二维码.PNG

网页截图

用我的浏览器打开网页后,双指长按页面可以对打开的网页进行选取区域截图,并可以进行分享保存。

13网页截图.gif

网页导出成PDF

有时候我们想在手机保存我们浏览的网页,并且适配手机屏幕,还是一件挺麻烦的事情,而我的浏览器就可以轻松的把浏览过的网页导出成pdf文件。

14导出pdf.gif

高级功能介绍

高级功能对于专业的朋友来说,可做的事情就有很多了,可以更大程度上玩转我的浏览器。

强大的ShareExtension

我的浏览器的ShareExtension之强大,不但可以将其他App的网址链接用我的浏览器打开,还支持其他任何格式文件导入到我的浏览器,使用我的浏览器打开。

我的浏览器 - 可个性化的自定义浏览器_第13张图片
15选择导入到我的浏览器.PNG
我的浏览器 - 可个性化的自定义浏览器_第14张图片
16开启我的浏览器ShareExtension.PNG
我的浏览器 - 可个性化的自定义浏览器_第15张图片
17导入到我的浏览器.PNG

比如可以导入音视频文件放到内置的站点上,实现手机上在线播放或分享文件给局域网内的好友。

我的浏览器 - 可个性化的自定义浏览器_第16张图片
18导入视频.gif

又比如可以把微信或QQ收到的word、excel、ppt、key或pdf等文件用其他应用程序打开,选择我的浏览器导入,放到内置的站点上供自己或局域网内的好友在线浏览下载。

19打开word及pdf.gif

自定义首页配置

我的浏览器的配置文件都在web容器的Config目录下,用户可以修改HomeContent.json文件内容来自定义浏览器首页。打开我的浏览器,点击默认首页上的『Web Server』,即可打开Web容器的主目录,主目录下默认有一个Config文件夹。

首页的展示的数据来源于HomeContent.json,每一项UI对应于HomeContent.json的数据项,类型支持4种,分别为:TextIcon,Text,Search,WebServer。

通过Web DAV或者Web Uploader上传自定义的HomeContent.json文件替换掉Config目录中老的Homecontent.json文件即可自定义浏览器首页。(注意这里要确保json文件格式正确哦)

我的浏览器 - 可个性化的自定义浏览器_第17张图片
20Config目录首页配置文件.PNG
我的浏览器 - 可个性化的自定义浏览器_第18张图片
21HomeConfig配置文件.png

自定义广告拦截的规则

我们可以在web容器的Config目录下修改AdblockRules.txt文件内容来添加或修改广告拦截的规则,修改规则后重启浏览器即可马上生效;建意拦截规则不要添加太多,超过3万条就会影响网页的加载速度或部分网页的会被误拦截。

完整版的EasyList中国区规则列表 https://easylist-downloads.adblockplus.org/easylistchina+easylist.txt

撰写 Adblock Plus 过滤规则,可参考:https://adblockplus.org/filters

内置静态WebServer

默认的首页有个打开WebServer的入口,那个『Web Server』链接项就是了。内置静态的WebServer,支持在手机上搭建简单的静态web站点。我们可向Web容器上传或导入文件或文件夹。

我的浏览器 - 可个性化的自定义浏览器_第19张图片
22打开WebServer分享目录.PNG
我的浏览器 - 可个性化的自定义浏览器_第20张图片
23打开WebServer.PNG

内置的Web Uploader

内置的Web Uploader 可以直接在浏览器里管理Web容器里的文件,包括上传文件到Web容器,或移动、删除或新建文件夹等操作。

使用Web Uploader,我们可以在手机上添加、移动、删除及重名命文件夹,也可以上传、移动、删除及重命名文件。

24WebUploader.gif

内置Web DAV

想必用过FTP的朋友应该也听说过Web DAV,与FTP的功能类似。通过Web DAV,可以更方便快捷实现从电脑上传或下载文件到web容器。我的浏览器的WebDAV启动后,默认端口是8081。

Windows上WebDAV客户端可以使用NetDrive、AnyClient,Mac上可以使用Transmit。下面来一张在Mac上使用Transmit 通过 WebDAV 连接到手机上的『我的浏览器』的Web容器目录的操作演示。

25WebDAV.gif

关注微信

我的浏览器 - 可个性化的自定义浏览器_第21张图片
weichat_qrcode.jpg

你可能感兴趣的:(我的浏览器 - 可个性化的自定义浏览器)