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

识别图中二维码下载安装

背后的历史故事

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

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的意思。

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

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

02首页.PNG
03窗口页.PNG
04更多设置页.PNG

基本功能介绍

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

自动全屏

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

05自动全屏.gif

夜间模式 & 无图模式

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

06夜间模式.gif

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

07无图模式.gif

广告拦截

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

08无广告拦截.PNG
09有广告拦截.PNG

多窗口、书签管理

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

10多窗口.PNG
11书签管理.PNG
12历史记录.PNG

扫描二维码

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

13扫描二维码.PNG

网页截图

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

13网页截图.gif

网页导出成PDF

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

14导出pdf.gif

高级功能介绍

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

强大的ShareExtension

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

15选择导入到我的浏览器.PNG
16开启我的浏览器ShareExtension.PNG
17导入到我的浏览器.PNG

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

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文件格式正确哦)

20Config目录首页配置文件.PNG
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容器上传或导入文件或文件夹。

22打开WebServer分享目录.PNG
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

关注微信

weichat_qrcode.jpg
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容