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

2018-06-14 admin

为推进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页面,极大的提升用户体验。

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

为了解决“第二跳”的体验问题,我们为全站改造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 相媲美。

小故事

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

小故事由段落(view),层(layer)和元素(element)组成,具体结构如下:

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

小故事是基于MIP基础来制作的,同时 MIP 团队也将小故事相关的组件源码开源到了 github,大家可以通过以下地址查看:https://github.com/mipengine/mip-extensions/tree/master/src/mip-story

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

如有小故事组件的任何技术问题,欢迎通过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月份对外发布!

推荐阅读

(点击图片即可跳转)

Google 确实在推动 PWA 上花了很多精力,提出并推进了很多新的标准。Chrome 对一些新特性的支持,推动其他浏览器跟进最新标准等,成绩也很瞩目,至少在国外很火,用户的接受度也很高。

《Google I/O 2018 — Web 系列参会笔记》

**Brilliant Open Web **

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

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

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

OpenWeb开发者

ID:BrilliantOpenWeb

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

原文链接:https://mp.weixin.qq.com/s/GQeQkycw-ivpxHQTKDh0LA

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34001.html

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

相关文章
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
Bootstrap BootstrapDialog使用详解
这里有两种展现方式 写在前面:首先你要引入的库有 css : bootstrap.min.css bootstrap-dialog.css js : jquery-1.11.1.min.js bootstrap.min.js bootstr...
2017-03-16
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
2015年将会有大量基于HTML5和JS的WEB应用
随着HTML5的定稿,以及JS的迅速发展,我们有理由相信,在接下来的一年里,将会涌现出大量的WEB应用,网站的表现形式将不再仅仅局限于过去的形式,必将在2015年引来一次重大改革! ...
2015-11-12
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
回到顶部