瞭解如何運用提議的入口網站 API 提升導航使用者體驗。
確保網頁能快速載入,是提供良好使用者體驗的關鍵。 但我們發現,網頁轉換 也是我們常常忽略的地方 他們在瀏覽網頁時
名為 Portals 的全新網路平台 API 提案,目的是 簡化使用者「跨平台瀏覽」 網站。
查看入口網站的實際運作情形:
入口網站可啟用的功能
單頁應用程式 (SPA) 提供良好的轉場效果 但建構的複雜度也較高 多頁面應用程式 (MPA) 更容易建構 但網頁之間卻出現空白畫面
入口網站具有以下兩種優點:
也能順暢轉換 MPA。
例如可以嵌入的 <iframe>
但與 <iframe>
不同
並透過一些功能瀏覽自己的內容
觀眾可信: 請先看看我們在 2018 年 Chrome 開發人員高峰會中展示的內容:
使用傳統版導覽時,使用者必須等待一片空白畫面
直到瀏覽器完成到達網頁轉譯為止
有了入口網站,使用者就可以體驗動畫
<portal>
會預先轉譯內容,並提供順暢的瀏覽體驗。
在傳送門之前,我們可以使用 <iframe>
轉譯另一個網頁。我們還可以加入動畫,在網頁上移動頁框。不過,<iframe>
無法讓您前往其內容。能量塔則彌補了這個缺口,實現了有趣的用途。
試用入口網站
透過 about://flags 啟用
切換實驗性標幟,即可在 Chrome 85 以上版本中試用入口網站:
- 針對相同來源導覽啟用
about://flags/#enable-portals
標記。 - 如要測試跨來源導覽,請一併啟用
about://flags/#enable-portals-cross-origin
標記。
在入口網站實驗的初期階段
我們也建議您使用完全獨立的使用者資料目錄進行測試
方法是設定
--user-data-dir
敬上
指令列旗標
啟用入口網站後,請在開發人員工具中確認是否已推出全新閃亮的 HTMLPortalElement
。
實作入口網站
讓我們來看看一個基本導入範例。
// Create a portal with the wikipedia page, and embed it
// (like an iframe). You can also use the <portal> tag instead.
portal = document.createElement('portal');
portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web';
portal.style = '...';
document.body.appendChild(portal);
// When the user touches the preview (embedded portal):
// do fancy animation, e.g. expand …
// and finish by doing the actual transition.
// For the sake of simplicity, this snippet will navigate
// on the `onload` event of the Portals element.
portal.addEventListener('load', (evt) => {
portal.activate();
});
就是這麼簡單。在開發人員工具控制台中嘗試使用此程式碼,系統會開啟 Wikipedia 頁面。
如果你想打造類似上述示範的內容,在 Chrome 開發人員高峰會中展示, 下列程式碼片段對您有幫助。
// Adding some styles with transitions
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');
// Let's navigate into the WICG Portals spec page
portal.src = 'https://wicg.github.io/portals/';
// Add a class that defines the transition. Consider using
// `prefers-reduced-motion` media query to control the animation.
// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
portal.classList.add('portal-transition');
portal.addEventListener('click', (evt) => {
// Animate the portal once user interacts
portal.classList.add('portal-reveal');
});
portal.addEventListener('transitionend', (evt) => {
if (evt.propertyName == 'transform') {
// Activate the portal once the transition has completed
portal.activate();
}
});
document.body.append(style, portal);
此外,機構可輕鬆對功能偵測,透過入口網站逐步強化網站。
if ('HTMLPortalElement' in window) {
// If this is a platform that have Portals...
const portal = document.createElement('portal');
...
}
如果您想迅速體驗能量塔的感覺,可以使用 uskay-portals-demo.glitch.me. 請務必使用 Chrome 85 以上版本存取這項工具,並開啟實驗標記!
- 輸入要預覽的網址。
- 然後將頁面嵌入為
<portal>
元素。 - 按一下預覽畫面。
- 播放動畫後會啟用預覽。
查看規格
我們正在積極討論 入口網站規格 (簡稱 WICG)。 若要快速上手,請參閱 關鍵情境。 請務必熟悉下列三項重要功能:
<portal>
元素:HTML 元素本身。API 非常簡單,其中包含src
屬性、activate
函式和訊息介面 (postMessage
)。activate
會使用選用引數,在啟用時將資料傳遞至<portal>
。portalHost
介面:將portalHost
物件新增至window
物件。這可讓您檢查網頁是否為<portal>
元素嵌入。它也提供返回主機的訊息介面 (postMessage
)。- PortActivateEvent 介面:啟動
<portal>
時觸發的事件。有一個名為adoptPredecessor
的簡潔函式,可用來擷取上一頁做為<portal>
元素。如此一來,您就能在兩個頁面間提供流暢的瀏覽體驗和組合體驗。
讓我們來看看除了基本使用模式之外。下方僅列舉部分清單,列出了您可以透過傳送門和範例程式碼達成的目標。
自訂內嵌為 <portal>
元素時的樣式
// Detect whether this page is hosted in a portal
if (window.portalHost) {
// Customize the UI when being embedded as a portal
}
<portal>
元素和 portalHost
之間的訊息
// Send message to the portal element
const portal = document.querySelector('portal');
portal.postMessage({someKey: someValue}, ORIGIN);
// Receive message via window.portalHost
window.portalHost.addEventListener('message', (evt) => {
const data = evt.data.someKey;
// handle the event
});
啟用 <portal>
元素並接收 portalactivate
事件
// You can optionally add data to the argument of the activate function
portal.activate({data: {somekey: 'somevalue'}});
// The portal content will receive the portalactivate event
// when the activate happens
window.addEventListener('portalactivate', (evt) => {
// Data available as evt.data
const data = evt.data;
});
擷取前身
// Listen to the portalactivate event
window.addEventListener('portalactivate', (evt) => {
// ... and creatively use the predecessor
const portal = evt.adoptPredecessor();
document.querySelector('someElm').appendChild(portal);
});
知道網頁成為前任者
// The activate function returns a Promise.
// When the promise resolves, it means that the portal has been activated.
// If this document was adopted by it, then window.portalHost will exist.
portal.activate().then(() => {
// Check if this document was adopted into a portal element.
if (window.portalHost) {
// You can start communicating with the portal element
// i.e. listen to messages
window.portalHost.addEventListener('message', (evt) => {
// handle the event
});
}
});
結合傳送門支援的所有功能之後 讓你輕鬆打造精美的使用者體驗 舉例來說,以下示範展示了入口網站如何提供流暢的使用者體驗 和第三方嵌入內容之間的連線
用途和方案
希望您喜歡這份入口網站簡介!我們等不及想看到你的精彩表現了!舉例來說,您可能會想要開始使用入口網站進行簡單的瀏覽,例如從產品類別產品資訊頁面預先算繪暢銷產品的頁面。
還有一件重要事項,那就是 Portal 可用於跨來源導覽,就像使用 <iframe>
一樣。因此,如果您有多個網站並互相參照,也可以使用入口網站在兩個不同的網站之間提供順暢的瀏覽體驗。這個跨來源使用案例對入口網站來說非常獨特,甚至能改善 SPA 的使用者體驗。
歡迎踴躍提供意見
您現在可以在 Chrome 85 以上版本中測試入口網站。社群意見對我們開發新的 API 至關重要,歡迎試用並與我們分享您的想法!如果你有任何功能要求或意見回饋,請前往 WICG GitHub 存放區。