Google I/O 2018 : 应用于 PC 端的 PWA

Chrome OS 67 已经支持 PC 端的 Progressive Web App 了,但目前还处于 Beta 阶段。Mac 和 Windows 相关的开发工作也在进行中。

PC 端的 PWA 可以像普通应用一样被「安装」在设备上。运行速度非常快。启动和使用都跟普通应用一样,没有地址栏和 Tab 页,所以用户体验和普通应用一致。同时,得益于 Service Worker ,App 运行需要的相关资源都可以被缓存起来,可靠性有了保证。对于用户来说,体验也更加舒适了。

PC 用户很重要

移动端在 PWA 方面已经有很大发展。移动用户虽然增长的很快, PC 端的使用量也没有降低。移动端使用量的高峰在清早和夜晚,平板使用量的高峰在夜晚。而 PC 端的使用量在白天分布得很均匀,大部分用户在工作的时候会用电脑。

开始

在 Windows 和 MacOS 操作系统中体验 PWA 需要开启 Chrome 浏览器的 #enable-desktop-pwas 选项。

将 PWA 应用于 PC 端要做的事情相比将 PWA 应用于移动端并没有很大区别,PC 端的 PWA 并不是一类全新的应用。在现有的 PWA 上完成的工作仍然可用。Service Worker 提高应用运行速度和可靠性;Web 推送和通知让用户能收到最新消息。通过 add to home screen 还可以「安装」应用。唯一的区别在于,应用不再运行在浏览器的标签页中,它改为运行在一个 App 窗口里了。

添加至主屏幕(add to home screen)

应用一旦满足添加到主屏幕的要求,Chrome 就会触发 beforeinstallprompt事件。在event handler 中,保存这个事件并修改用户界面,提醒用户可以把你的应用添加到主屏幕。例如,Spotify 在用户名上面加了一个「Intall App」按钮。

查阅 Add to Home Screen 获取更多关于处理添加至主屏幕事件、更新 UI 和展示相关提示的信息。

扫描二维码关注公众号,回复: 470875 查看本文章

App 窗口

App 窗口没有地址栏和 Tab 栏。整个窗口都用来显示应用。同时还针对 App 的场景进行了优化,相比浏览器的 Tab 页,管理窗口和进行操作都更灵活了。App 窗口使得全屏模式下完成单一任务或者多窗口模式下并行开展任务都更容易。App 窗口也使得在多个 App 间进行切换更自如。

如你所想,App 窗口有常规的包含最大化、最小化和关闭图标的标题栏。在 Chrome OS 中,标题栏可以根据 Web App Manifest 的 theme_color 自定义主题。你的 App 界面应该被设计为铺满整个窗口。

在 App 窗口中,还有 App 菜单(三个小点组成的按钮)。通过这个菜单,可以获得更多有关 App 的信息。打开 URL、打印页面、缩放和在浏览器打开应用都更容易。

设计注意事项

相比移动端 PWA,PC 端的 PWA 在设计上有更多需要注意的点。

PC 端的应用所占的屏幕更大,不要简单的给 content 包裹一层 padding 或者 margin。应用于更宽的屏幕时,应该适当的增加元素之间的间隙。部分应用很适合这么做。

在考虑留白时,思考一下用户会怎么使用你的 App 以及用户会如何调整窗口大小。例如某个天气应用,界面会显示7天的天气。当界面变小时,相比让所有元素下移,显示5天的天气更好。当界面继续缩小,内容可能会溢出,应用针对这种情况需要进行优化。

部分 App 的迷你模式非常有用,比如上文的天气应用,迷你模式下仅显示当前的天气状况。音乐播放器在迷你模式下可以只显示正在播放的音乐和播放下一首的按钮。

你可以借鉴响应式设计的概念以支持可切换模式的设备,比如 Pixelbook 和 Surface。当切换至平板模式时,这些设备会让活跃的窗口全屏。同时会根据用户手持状态切换横屏或者竖屏。

注意正确的应用响应式设计 —— 这非常重要。无论用户主动调整窗口大小还是切换设备模式,响应式设计对一个成功的 PWA 来说都至关重要。

PC 端的 App 窗口提供了大量可能性。和你的设计师一起,通过为宽屏增加留白、支持横竖屏、支持全屏或非全屏、支持虚拟键盘等尝试应用响应式设计。

What's next?

我们正在努力支持 Windows 和 Mac。无论是哪个平台,我们都希望做到:

  • 支持快捷键。这样就可以为你的 App 某些功能增加快捷键。
  • 桌面图标徽章。这样可以在非全屏通知的情况下让用户收到重要的信息。
  • 支持绑定链接 - 当用户访问某个已安装 PWA 的链接时,可以打开该 PWA。

原文链接:Progressive Web Apps on the Desktop

猜你喜欢

转载自juejin.im/post/5af3b73a6fb9a07ab1112f3f