搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > OpenWeb开发者 > 移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

OpenWeb开发者 2018-07-01

为推进Web技术的发展,Brilliant Open Web 团队特推出每月一期的月报,该月报将整理较流行的移动Web加速技术,并跟进各项技术的进展和发展方向,以期帮助开发者了解或选用相关的技术,把握技术发展趋势。欢迎关注【OpenWeb开发者】公众号并回复“加群”,一起探讨相关技术。

作者 | Brilliant Open Web 团队
编辑 | Daisy

本期看点

  • MIP 为全站改造MIP的站点引入了MIP-SHELL 模块

  • 小故事相关的组件开源

  • GoogleSearch团队推出non-click

  • AMP概念Web Package技术标准落地到了Google Search中

升级与重要进展

MIP Shell 组件

熟悉 MIP 的开发者可能了解,MIP 全称 Mobile Instant Pages(移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及MIP-Cache 页面缓存系统,实现移动网页加速。MIP 是以页面(Page)为单位来运行的,开发者通过改造/提交一个个页面,继而被百度收录并展示。从搜索打开的MIP页面,极大的提升用户体验。

移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

但以页面为单位带来一个问题:当一个MIP 页面往其他页面跳转时,就会使浏览器使用加载页面的默认行为来加载新页面,这就是所谓的的“第二跳”。从实际来看,“第二跳”的体验比起从搜索结果页到 MIP页面的“第一跳”来说相去甚远,依然会出现白屏。

移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

为了解决“第二跳”的体验问题,我们为全站改造MIP的站点引入了MIP-SHELL 模块。它的作用是把多个页面以一定的形式组织起来,让它们互相切换时拥有和单页应用一样的切换效果,而不是浏览器默认的切换效果。这个功能大部分对开发者是透明的,但也需要开发者遵守一些页面的编写规范。

目前 MIP-SHELL 组件已经完成开发,正在进行小范围内测,在这里先和大家介绍一下 MIP-SHELL 组件的部分能力。

在实际项目中,我们很可能会有一些独立于页面内容之外的相对固定的部分,我们称之为外壳(Shell)。在页面切换时,Shell 部分一般不跟随页面内容进行过场动画。

开发者可以在每个页面中使用标签来定义Shell 的各项配置。目前 MIP 仅提供头部 Shell,后续会陆续提供多种类型、多种样式的 Shell 供开发者选择。

开发者通过如下方式使用 MIP-SHELL 组件,并进行对应的配置。

<html>
       <head></head>
       <body>
           <mip-shell>
               <script type="application/json">
                   {
                       key: value
                   }
               
</script>
           </mip-shell>
           <!-- mip script -->
       </body>
   </html>

通过使用 MIP-SHELL 组件,我们可以让一个站点的切换变得非常流畅。目前已经有站点通过全站接入MIP,获得了酷炫的效果,比如搜索“极客公园”即可查看效果,目前页面效果已经和 APP 相媲美。

移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

小故事

小故事是基于 MIP 技术的一种展现移动原生优质内容的富媒体产品。是一种具备沉浸式浏览和交互体验,为站点提供移动搜索上的一种易于生产制作的全新内容呈现形态。


小故事由段落(view),层(layer)和元素(element)组成,具体结构如下:移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

小故事的代码结构很简单,使用小故事相关的 MIP 组件即可完成一个小故事的制作,代码示意如下:

移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景

欢迎各位开发者使用小故事组件快速构建属于自己的小故事!

如有小故事组件的任何技术问题,欢迎通过Github向我们提交Issue,我们会尽快解答你的问题!

5月AMP技术一览

non-click AMP概念推出

Google Search团队最近推出了一种AMP页面的新使用场景,即通过AMP特有的预渲染技术,让一些页面在前一个页面中露出部分内容,用户可快速、顺滑的打开。具体效果如下:


解读:AMP的预渲染技术正在为AMP创造更多的使用场景,让原来不可能的交互方式变为可能

Web Package 落地

AMP团队在GoogleI/O大会发布最新消息,已经将新的Web Package技术标准落地到了Google Search中,在最新的Chrome上可以使用。

Web Package主要用于解决AMPCache的URL Origin的问题。具体技术可以参见:https://github.com/WICG/webpackage

Google Search中的应用如下:


下月技术预告

MIP 核心代码重要升级

MIP核心代码进行了大量高质量升级,提供了许多新特性,包括基于MVVM的组件方案、MIP-SHELL、全局数据控制等,将大幅提升站点开发MIP的效率。值得一提的是,此类升级是完全兼容当前MIP的,所以MIP开发者无需进行自身站点组件的改动即可完美兼容。

熊掌号能力大波来袭

MIP团队联合熊掌号团队正在打造一批高质量的熊掌号MIP组件,包括登录、支付、关注、订单、对话等等,大量熊掌号MIP组件将在6月份对外发布!

推荐阅读

(点击图片即可跳转)




Brilliant Open Web 

BOW(Brilliant Open Web)团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,让Web重新成为开发者的首选。

BOW 关注前端,关注Web;剖析技术、分享实践;谈谈学习,也聊聊管理。

关注 OpenWeb开发者,回复“加群”,让我们一起推动 OpenWeb技术的发展!

OpenWeb开发者

ID:BrilliantOpenWeb

技术连接世界,开放赢得未来



版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《移动Web体验月报(5月):MIP引入MIP-SHELL组件;Google Search推出AMP页面新使用场景》的版权归原作者「OpenWeb开发者」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注OpenWeb开发者微信公众号

OpenWeb开发者微信公众号:BrilliantOpenWeb

OpenWeb开发者

手机扫描上方二维码即可关注OpenWeb开发者微信公众号

OpenWeb开发者最新文章

精品公众号随机推荐