1. 首页
  2. 前端进阶

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

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

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

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

Portals 带来了哪些内容

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

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

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。

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

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


// 用维基百科页面创建一个 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();

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

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

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

如果你想构建像我们在 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 页面, JS中文网 - 前端进阶资源教程 https://javascriptc.com/ portal.src = 'https://wicg.github.io/portals/'; // 添加一个定义了过渡效果的类。考虑使用 // `prefers-reduced-motion` media query 来控制动画。 // https://developers.google.com/web/updates/2019/03/prefers-reduced-motion portal.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. 动画播放后将激活预览。

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

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

查看规范

我们正在 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, JS中文网 - 前端进阶资源教程 https://javascriptc.com/
}

元素和 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 事件

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

// 你可以选择向激活函数的参数添加数据
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 元素通信
    // 如侦听消息, JS中文网 - 前端进阶资源教程 https://javascriptc.com/
    window.portalHost.addEventListener('message', evt => {
      // 处理事件
    });
  }
});


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

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

用例和计划

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

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

欢迎反馈

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

作者:Yusuke Utsunomiya
链接:https://web.dev/hands-on-portals/

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

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

链接:https://www.javascriptc.com/2686.html

« 探索 Serverless 中的前端开发模式
2019 年 JS 正则大全(常用)»

相关推荐

QR code