Navigation API 与 App History：单页导航与过渡协调

概述Navigation API 提供标准化的导航事件与拦截机制，配合 App History 可更一致地管理历史栈与入口更新。适合现代 SPA 路由实现并与视图过渡协作。基础示例navigation.addEventListener('navigate', e => {

if (e.navigationType === 'push') {

e.intercept({ handler: async () => {

const html = await (await fetch(e.destination.url)).text()

document.getElementById('app').innerHTML = html

} })

}

})

document.querySelectorAll('a').forEach(a => {

a.addEventListener('click', ev => {

ev.preventDefault()

navigation.navigate(a.href, { history: 'push' })

})

})

工程建议协同过渡：与 View Transitions 配合以平滑页面切换；处理入口更新与滚动恢复。兼容：不支持的浏览器回退到 History API 与手动路由；特性检测后启用。观测：记录导航开始/完成时序与失败原因，优化资源加载与缓存策略。参考与验证WICG Navigation API：https://github.com/WICG/navigation-apiMDN Navigation API 文档：https://developer.mozilla.org/docs/Web/API/Navigation_APIChrome 平台文档：https://developer.chrome.com/docs/web-platform/navigation-api/