神马笔记实现网站笔记功能

神马笔记实现网站笔记功能

一、目标

神马笔记添加网站笔记功能。

二、需求

把网站地址添加到旧版本神马笔记时,只是显示一段文本地址。

过了一段时间,根本无法记住这个地址是什么内容。

新版本的神马笔记将网站地址单独作为一种类型的笔记,与文字笔记区分开发。

同时,自动获取网址的标题和图片进行显示。

三、实现过程

1. 区分类型

URL可以指向任何类型的资源,如文本、图片、视频、音频、PDF、网页、……

网页是网站笔记的目标类型,我们将分析页面内容,提取出关键的数据进行显示。

其他类型则不做处理,只保存URL地址。

2. 关键数据

除了id, url, status为必须的数据外,其他数据为可选。

基本信息Share信息通常都不太准确,作为META信息的备选数据。

META信息是网站笔记的核心数据。

不同站点选择的META信息格式各异。

类型 字段 描述 可选性
基础 id 笔记唯一ID 必须
url 网址笔记的URL 必须
状态码 status 状态码 必须
contentType URL的资源类型,只处理text/html类型。
基本信息 title 标题
icon 小图标,通常为favicon.ico
touchIcon 图标,获取apple-touch-icon属性
description 描述
background 背景图片,获取第一个background-image属性
META信息 metaTitle 从og, twitter, itemprop, _shareData, ……等数据中获取
metaIcon 同metaTitle
metaImage 同metaTitle
Share信息 shareTitle 获取shareTitle元素
shareIcon 获取shareIcon元素
shareImage 获取shareImage元素

3. META信息

目前神马笔记从页面中提取以下数据作为META信息。

描述
og Open Graph
twitter
tgm
itemprop

4. SHARE信息

描述
application/ld+json
window._shareData

四、技术点

技术点 描述
OkHttp 获取HTTP内容,包括status,contentType,页面HTML数据。
jsoup 解析HTML数据,提取各种数据。
NestedScrollWebView 显示页面内容

五、支持站点一览

测试结果详见《网站笔记功能测试》。

类型 站点 示例页面
网站 百度百科 苒_百度百科
百度汉语 苒_词语_成语_百度汉语
CSDN Android解析歌词文件
妖道角 霹雳靖玄录 - 妖道角
cnBeta 魅族发布Lifeme梨木伞:100道工序纯手工 阻隔99%紫外线
实修驿站 金刚经全文
新闻资讯 微信公众号 如何让一辈子变长?答案在图里
今日头条 文章离婚后姚笛首次接受采访,笑到花枝乱颤,手上婚戒也不翼而飞
腾讯新闻 刘德华牵着女儿返港,穿父女装十分抢镜,太太朱丽倩低调跟随
百家号 黄章不妥协!魅族16S Pro确认,搭载Flyme8系统,流畅度提升
短视频 抖音 哈尼又摔弹簧P股系列
微视 老外极限运动操作失误,都是为了生活
视频 爱奇艺 烈火军校
腾讯视频 遇见幸福
bilibili 乔碧萝殿下翻车现场Freestyle
音乐 网易云音乐 The Oasis
QQ音乐 Hello My Love
酷狗音乐 把孤独当晚餐却难以下咽
虾米音乐 《沧海一声笑》单曲
酷我音乐 隔壁泰山
知识付费 得到 第795期 什么是“精神装置”?
樊登读书 自尊
播客 喜马拉雅 青年文摘
应用商店 应用宝 快点