7月QCon广州站2022,关注Web 3.0、数据架构选型、数字化转型等热门话题,点击了解 了解详情
写点什么

谷歌推出新提案 Portals:Web 上的无缝跳转体验

  • 2019 年 11 月 13 日
  • 本文字数:3431 字

    阅读完需:约 11 分钟

谷歌推出新提案Portals:Web上的无缝跳转体验

想要了解新提案的 Portals API 是如何改善页面跳转用户体验的吗?本文将主要对 Portals 的具体内容、Portals 在 Chrome Canary 中的试用、Portals 的规范等几个方面进行详细讲解。如果你希望用户在浏览自家网站时,能够在不同页面跳转得更加流畅,不妨来读一读这篇文章


确保页面快速加载是提供良好用户体验的关键。但是我们经常忽略的一个领域是页面过渡,也就是用户在页面之间移动时所看到的内容。


一项名为 Portals 的 Web 平台 API 新提案,可以让用户在浏览网站时提升不同页面间跳转的流畅体验,从而帮助实现这一目标。该视频展示了 Portals 的实际使用效果。


Portals 带来了哪些内容

单页应用程序(SPA)提供了很好的页面过渡效果,但代价是更高的构建复杂性。多页面应用程序(MPA)的构建更容易一些,但结果会导致页面之间跳转时屏幕显示空白内容。


Portals 则取两者所长:同时具备 MPA 的低复杂性和 SPA 的无缝过渡效果。可以将它们视为一个iframe,其中可以嵌入内容。但与iframe不同,它们还具有跳转到其中内容上的功能。


眼见为实,请先来看看我们去年在 Chrome 开发者峰会上展示的内容


使用经典跳转时,用户必须在等待时看着空白屏幕,直到浏览器渲染完目标页面为止。现在有了 Portals,用户可以在等待时体验到动画效果,而portal会预渲染内容并创建出无缝的跳转体验。


在 Portals 诞生之前,我们可以使用iframe来预先渲染另一个页面。我们还可以添加动画在页面上移动这个 frame。但是iframe不能让你跳转到其中的内容上。Portals 弥补了这一空白,从而可以实现一些有趣的用例。


在 Chrome Canary 中试用 Portals

要在 Chrome Canary 中试用 Portals,只需启用一个实验性标志:


chrome://flags/#enable-portals


目前在 Portals 实验的早期阶段,我们还建议设置 --user-data-dir 命令行标志,使用完全独立的用户数据目录进行测试。启用 Portals 后,在开发工具中确认你已经有了全新的 HTMLPortalElement。



让我们来看一个基本的例子。


// 用维基百科页面创建一个 portal,然后嵌入它。// (就像一个 iframe)。你也可以使用<portal>标志。portal = document.createElement('portal');portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';portal.style = '...';document.body.appendChild(portal);
// 用户触碰预览时(嵌入的 portal):// 播放漂亮的动画,例如展开……// 实际跳转完成后动画结束。portal.activate();
复制代码


就这么简单。在开发工具控制台中尝试这段代码,应该会打开维基百科页面。



如果你想构建像我们在 Chrome 开发者峰会上展示的那种效果,就像上面的视频演示那样,那么可以看看下面这段有趣的代码。


// 添加一些过渡样式const style = document.createElement('style');style.innerHTML = `  portal {    position:fixed;    width: 100%;    height: 100%;    opacity: 0;    box-shadow: 0 0 20px 10px #999;    transform: scale(0.4);    transform-origin: bottom left;    bottom: 20px;    left: 20px;    animation-name: fade-in;    animation-duration: 1s;    animation-delay: 2s;    animation-fill-mode: forwards;  }  .portal-transition {    transition: transform 0.4s;  }  @media (prefers-reduced-motion: reduce) {    .portal-transition {      transition: transform 0.001s;    }  }  .portal-reveal {    transform: scale(1.0) translateX(-20px) translateY(20px);  }  @keyframes fade-in {    0% { opacity: 0; }    100% { opacity: 1; }  }`;const portal = document.createElement('portal');// 跳转到 WICG Portals spec 页面portal.src = 'https://wicg.github.io/portals/';// 添加一个定义了过渡效果的类。考虑使用// `prefers-reduced-motion` media query 来控制动画。// https://developers.google.com/web/updates/2019/03/prefers-reduced-motionportal.classList.add('portal-transition');portal.addEventListener('click', evt => {  // 用户交互时显示 portal 的动画  portal.classList.add('portal-reveal');});portal.addEventListener('transitionend', evt => {  if (evt.propertyName == 'transform') {    // 过渡效果完成时激活这个 portal    portal.activate();  }});document.body.append(style, portal);
复制代码


功能检测也很容易,这样就可以使用 Portals 对网站进行渐进式增强。


if ('HTMLPortalElement' in window) {  // 如果这个平台有 Portals……  const portal = document.createElement('portal');  ...}
复制代码


如果你想快速体验 Portal 的感觉,请试试 uskay-portals-demo.glitch.me。请使用 Chrome Canary 访问它并打开实验性标志!


1.输入你要预览的 URL。


2.然后,该页面将作为一个元素嵌入。


3.单击预览。


4.动画播放后将激活预览。



查看规范

我们正在 Web 孵化社区组(WICG)中积极讨论 Portals 的规范。要跟上最新的节奏,请看一下 explainer。以下是你需要熟悉的三个重要功能:


  • portal元素:HTML 元素本身。该 API 非常简单。它由 src 属性、activate 函数和消息传递接口(postMessage)组成。activate 带有一个可选参数,以在激活时将数据传递给portal

  • portalHost 接口:将一个 portalHost 对象添加到 window 对象。这使你可以检查页面是否作为portal元素嵌入。它还提供了用于将消息传递(postMessage)返回主机的接口。

  • PortalActivateEvent 接口:激活portal时将触发的事件。有一个整洁的函数,名为 adoptPredecessor,你可以用它将上一页作为一个portal元素取回。这使你可以在两个页面之间创建无缝跳转和组合式体验。


下面看看基本使用模式以外的内容。以下是 Portals 可以实现的内容详细列表及示例代码。


当嵌入为元素时自定义样式

// 检查该页面是否由一个 portal 托管if (window.portalHost) {  // 嵌入为 portal 时自定义 UI}
复制代码


元素和 portalHost 之间的消息传递

// 向 portal 元素发送消息const portal = document.querySelector('portal');portal.postMessage({someKey: someValue}, ORIGIN);
// 通过 window.portalHost 接收消息window.portalHost.addEventListener('message', evt => { const data = evt.data.someKey; // 处理事件});
复制代码


激活元素并接收 portalactivate 事件

// 你可以选择向激活函数的参数添加数据portal.activate({data: {'somekey': 'somevalue'}});
// 激活时 portal 内容会接收 portalactivate 事件window.addEventListener('portalactivate', evt => { // 数据作为 evt.data 可用 const data = evt.data;});
复制代码


获取前页

// 侦听 portalactivate 事件window.addEventListener('portalactivate', evt => {  // ……创新地使用前页  const portal = evt.adoptPredecessor();  document.querySelector('someElm').appendChild(portal);});
复制代码


知道你的页面已被视为前页

// 激活函数返回一个 Promise.// 当 promise 解析时, 意味着 portal 已被激活。// 如果该文档被其采用,则会存在 window.portalHost。portal.activate().then(_ => {  // 检查该文档是否被 portal 元素采纳。  if (window.portalHost) {    // 可以开始与 portal 元素通信    // 如侦听消息    window.portalHost.addEventListener('message', evt => {      // 处理事件    });  }});
复制代码


通过组合 Portals 支持的所有这些功能,你可以构建非常精美的用户体验。例如,该视频演示了 Portal 如何在网站和第三方嵌入内容之间实现无缝的用户体验。


对这个演示感兴趣吗?可以在 GitHub 上 fork 它,并构建你自己的版本。


用例和计划

我们希望你喜欢这篇关于 Portals 的简短介绍!我们迫不及待想看看大家能做出些什么内容。你可能想要开始使用 Portals 进行非常规跳转,比如,从产品类别列表页面中预渲染最畅销产品页面。


另一件重要的事情是,Portals 可以像iframe一样用于跨域跳转。因此,如果你有多个相互交叉引用的网站,还可以使用 Portals 在两个不同的网站之间创建无缝跳转。这是 Portals 的独特用例,甚至可以改善 SPA 的用户体验。


欢迎反馈

Portals 提案仍处于早期阶段,因此并非一切都能正常工作(这就是它位于实验性标志后的原因)。也就是说,它已准备好在 Chrome Canary 中进行实验。社区的反馈对于新 API 的设计至关重要,因此请尝试一下,并告诉我们你的想法!你可以在 Chromium 错误跟踪器上检查当前的限制条件。如果你有任何功能要求或反馈,请转到 WICG GitHub 仓库


原文链接:


https://web.dev/hands-on-portals/


2019 年 11 月 13 日 19:113509
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 65.4 次阅读, 收获喜欢 266 次。

关注

评论 1 条评论

发布
用户头像
我可以转载么? 公众号《脑洞前端》
2019 年 11 月 16 日 12:36
回复
没有更多了
发现更多内容

对不起,我错了,这代码不好写

捉虫大师

Java Go sentinel 6月月更

linux之同时监控多个日志文件变化

入门小站

Linux

在线数字转成人民币大写

入门小站

工具

特别的儿童节,OceanBase 送上一份特别的惊喜

OceanBase 数据库

oceanbase

换个角度带你学C语言的基本数据类型

华为云开发者联盟

开发 C语言 数据类型位数

儿童节,和 AI 一起通关 “超级马里奥兄弟”

华为云开发者联盟

MixNet解析以及pytorch源码

AI浩

人工智能 六月月更

ObserverPattern-观察者模式

梁歪歪 ♚

设计模式

天猫精灵的自定义语音技能创建流程

Jerry Wang

人工智能 机器学习 机器人 机器人流程自动化 6月月更

MSVC编译动态库

Loken

音视频 5月月更

字节跳动一站式数据治理解决方案及平台架构

字节跳动数据平台

数据治理 元数据

TemplateMethodPattern-模板方法模式

梁歪歪 ♚

设计模式

Agora Web UIKit:快速构建视频通话或直播

devpoint

React 直播技术 视频通话

应用实践|Lifewit 数据平台基于Apache Doris的建设实践

SelectDB

数据库 数据仓库 apache doris SelectDB

对话ACE第三期:数据库技术生态应如何构建

OceanBase 数据库

oceanbase

安势信息加入Linux基金会OpenChain项目,助力软件供应链安全

安势信息

Linux 开源 DevSecOps SCA 开源软件

StrategyPattern-策略模式

梁歪歪 ♚

设计模式

水果FL Studio最新20.9中文破解版下载

茶色酒

水果FL Studio

那些年,我们在Apache SeaTunnel 2.1.0部署中踩过的坑【含源码分析】

Apache SeaTunnel

Apache 大数据 开源 workflow Seatunnel

leetcode 547. Number of Provinces 省份数量(中等)

okokabcd

LeetCode 搜索

在线HTML转PERL工具

入门小站

工具

云图说丨应用宕机怎么办?MAS帮您实现业务无缝切换

华为云开发者联盟

云计算 MAS 宕机 多云高可用服务

ConcurrentLinkedQueue

周杰伦本人

6月月更

磁盘I/O性能测试工具

穿过生命散发芬芳

6月月更 磁盘测试工具

InfoQ 极客传媒 15 周年庆征文|深入理解 ELK 中 Logstash 的底层原理 + 填坑指南

悟空聊架构

运维 Logstash ELK 6月月更 InfoQ极客传媒15周年庆

科技成就伟大游戏 | 2022 亚马逊云科技游戏开发者大会

亚马逊云科技 (Amazon Web Services)

开发者 亚马逊云

初识IndexedDB【改,删】下

上进小菜猪

indexedDB 6月月更 前端数据库

2022 核心服务动手训练营

亚马逊云科技 (Amazon Web Services)

Amazon 亚马逊云

彰显个性│博客园的自定义主题

程序员亮仔

主题 可视化看板 6月月更

常遇到读多写少,教你用ReadWriteLock实现一个通用的缓存中心

华为云开发者联盟

缓存 高并发 开发 ReadWriteLock

阿里高级专家剖析 | HeartBeat方案的标准设计

高翔龙

架构 dubbo 源码解析 HeartBeat 心跳设计

谷歌推出新提案Portals:Web上的无缝跳转体验_前端_Yusuke Utsunomiya_InfoQ精选文章