PWA即将推向所有Chrome平台

\

看新闻很累?看技术新闻更累?试试下载InfoQ手机客户端,每天上下班路上听新闻,有趣还有料!

\
\\

大多数人应该都听说了微软已经着手在Windows商店中增加PWA,这是一个重磅消息!

\\

a5a31bd5ed459efa8f2654e0d7f247b1.png

\\

渐进增强式Web应用即将在Win10系统上线,我们已经准备好了!图片来源:ashleymcnamara

\\

作为制定Web App Manifest规则的联合编辑,Kenneth一直参与到相关规则的制定中。实际上,微软是最早关注Web App Manifest的公司之一,最开始使用他们的Manifold工具,然后转为使用http://PWAbuilder.com。自从首个ManifoldJS发布之后,Marcos Caceres和Kenneth进行了联系,并结识了Jeff Burtoft。这一系列的事件推动了谷歌在该方面与微软的合作,最终改进了Manifest,以便它在Windows商店和桌面应用上取得更好表现。

\\

几年前,谷歌在Chrome OS中添加了一些“add to shelf”的支持,这是一次实验性的改进,存在很多不完善的地方。但是在很长一段时间里都能正常使用。因此Kenneth提到,当2017年Owen Campbell-Moore在旧金山的chrome Dev峰会上发表演讲时他感到非常激动。

\\

8937da2ab276e23ea3020140f60b4535.png

\\

Owen还提到谷歌将扩展PWA的使用范围,将PWA最终推广到其所有平台的桌面系统。更加重要的是,他们不仅添加了桌面支持,还开放了其API。如今,许多团队(比如Slack和VSCode)都使用了类似的方法,利用Electron将他们的Web应用封装到一个原生容器中,然后开放原生API。

\\

这种方法存在一个弊端,由于浏览器中存在很多公开的安全漏洞,用户的安全问题会面临威胁。虽然大多数漏洞会被浏览器供应商及时解决,但是使用Electron封装的版本通常更新较慢。这就会导致用户需要承受更多的风险。而桌面PWA支持则可以解决这个问题,前提是开发人员可以访问他们需要修改部分的API。

\\

Owen Campbell-Moore在Twitter中提到,Contacts API是谷歌最早开发的API之一:https://mobile.twitter.com/owencm/status/964280373697040384。

\\

如何使用PWA?

\\

在最近版本的Chrome浏览器(比如Canary)中,打开“about:flags”页面然后搜索“progressive”,将选项#desktop-pwas的属性改为Enable:

\\

61e7a215675c8db254115c39b934bc2f.png

\\

在about:flags或chrome://flags页面,你可以使用一些实验性的功能

\\

之后,就可以安装PWA程序到你的桌面系统。
\这是Windows上的运行效果:

\\

81d0b029e21ea9c5f84ab963702b3672.png

\\

Windows上运行的Twitter Lite

\\

这是Linux上的运行效果:

\\

c52b15a021e6806b509fae012bcf52c2.png

\\

Ubuntu上运行的Pokedex

\\

Chrome OS上的PWA

\\

在Chrome OS上的PWA除了有上述优点之外,还有就是它看起来真的很酷!

\\

窗口标题标题使用主题颜色,标题后面跟着是PWA的域名。

\\

215ba60dafcbfd773f9f10d6f69ab111.png

\\

tuner.ninja 和 app.starbucks.com

\\

e5dcec15f457c03820282f67449380f5.png

\\

使用了窗口化的PWA之后,Chrome OS看起来更像一个桌面系统了。

\\

应用程序也可以轻松地访问Chrome并分享URL。对于每个应用,都会有一个叫做应用信息(App info)的特殊选项。

\\

da5998c948ff4bb07fca86580c5e868c.png

\\

应用信息允许用户配置应用的打开方式,比如选择在新的标签页打开或者另一个独立的窗口打开。他包含关于Manifest Web App中的“description”字段的信息,该功能最初是为微软的应用商店设计。

\\

f7e0fd69f7f01900c7909c0f9d671c21.png

\\

用户可以决定如何打开应用程序!

\\

如何在桌面系统上配置谷歌地图

\\

用户可以通过网站https://maps.google.com/?force=pwa访问谷歌地图PWA,在桌面端或移动端都可以使用。但是,只有在移动端访问时候才会安装Service Worker,但桌面用户可以通过Chrome开发工具强制加载Service Worker,在桌面端达到和移动端相同的使用体验。

\\

408c751180aec58e4bb453866283a90e.png

\\

欺骗PWA,让它以为是在移动端运行。记住设置后需要重新加载以安装Service Worker

\\

PWA的未来?

\\

2018年将会是PWA大爆发的一年,桌面支持也将迎来全新的改变。

\\

PWA的开发团队甚至在苹果设备上添加了Service Workers与Web App Manifest对IOS的支持,对于Web应用来说,一切都在发生着变化!

\\

f6f3c77f79cc830eee931b35f9300255.png

\\

更新:分屏功能

\\

前一段时间谷歌发布了Chrome OS关于Android应用的新闻,提到Android应用在Chrome OS上支持分屏操作。同样,由于这一功能是为Chrome窗口所设计,所以分屏操作同样适用于PWA,就像下图所示!

\\

a3e8c6e3ed0b5334b59f8e6289ba7c5b.png

\\

更新:Web内容共享

\\

多年以前,谷歌使用navigator.share API在Android系统上实现了Web共享。如果用户在about:flags中启用了实验性的Web平台功能,那么用户甚至可以为已安装的PWA添加Web共享目标,比如使用Twitter Lite进行共享。

\\

b9211a74686d76d978670d6ba6ecd598.png

\\

Justin Willis的新Demo允许用户通过Web共享功能分享歌曲

\\

目前这项功能已经开放使用,并已在Linux和Chrome OS上线。但是仍存在一个问题,在共享到Twitter时,共享窗口会在一个新的Chrome选项卡中打开,而不是在已安装的PWA中打开,当然这个问题会慢慢修复。

\\

e4cd2209d6c3f527a205d1a8024af80c.png

\\

在已安装的Twitter Lite上添加Web共享对象支持后,歌曲就可以直接被分享到Twitter上。

\\

这个功能可以完美的在Android上运行,并且共享窗口会在当前使用的PWA中打开。

\\

b33f805fc2fcfd1a34f6aeab724454a6.png

\\

Android:从一个PWA(InstaMusic)向另一个PWA(Twitter Lite)分享歌曲。

\\

查看英文原文:Progressive Web Apps coming to all Chrome platforms

\\

感谢徐川对本文的审校。

\\

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ,@丁晓昀),微信(微信号:InfoQChina)关注我们。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539304.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++代码转为go_Go语言学习笔记六--string编码

分解探索string编码转为byte数组func main() {s : "Hi小智加油!"fmt.Println("len(s):",len(s)) //len(s): 15 为什么是15呢?for _, v : range []byte(s) {fmt.Printf("%X ",v) //%X 转为16进制//48 69 E5 B0 8F E6 99 BA E5 8A A0 E6 B2 B9 21…

steam游戏时长计算机,我加入steam五年了,盘点下我买过的22款正版单机游戏

我加入steam五年了,盘点下我买过的22款正版单机游戏2020-02-17 10:50:07104点赞72收藏37评论大家好吖,在2015年的时候朋友就推荐了我入坑steam,不过那个时候更多的知道这是个dota启动器,慢慢的steam也越来越出名啦,中国…

AdPlayBanner:功能丰富、一键式使用的图片轮播插件

概述 AdPlayBanner:功能丰富、一键式使用的图片轮播插件详细 代码下载:http://www.demodashi.com/demo/11312.html AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresco、…

pycharm运行模型时怎么设置权重?_使用AMP和Tensor Cores得到更快速,更节省内存的PyTorch模型...

点击上方“AI派”,关注公众号,选择加“星标“或“置顶”导读只需要添加几行代码,就可以得到更快速,更省显存的PyTorch模型。你知道吗,在1986年Geoffrey Hinton就在Nature论文中给出了反向传播算法?此外&…

引入静态变量_Common Lisp变量的一些事情

Lisp-1 vs Lisp-2[1]Scheme的求值模型非常简单:只是用一个名字空间,所有表达式中相应位置的值应该是明确的。Common Lisp和Scheme最大的不同是,函数名字空间和数据的名字空间是分离的。操作函数名字空间的语句包括,defun&#xff…

c理c利用计算机怎么弹,通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的...

通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的计算机的工作方式:现代计算机的基本体系结构都是采用冯诺依曼结构,冯诺依曼的设计思想最重要之处是"存储程序"的这个概念。计算机的工作过程,就是执行程序的…

Linux安装MySQL的两种方法

原文链接:http://blog.csdn.net/superchanon/article/details/8546254 --------------------------------------------------------------------------------------- 1. 运行平台:CentOS 6.3 x86_64,基本等同于RHEL 6.3 2. 安装…

jenkins 手动执行_想知道如何用Jenkins自动执行Python脚本输出测试报告?

前言在用python做自动化测试时,我们写好代码,然后需要执行才能得到测试报告,这时我们可以通过 Jenkins 来进一步完成自动化工作。借助Jenkins,我们可以结合 Git/SVN 自动拉取代码,可以设置定时构建,接着就可…

VR 影院,约吗?

世界第一家 VR 影院已经开张,朋友,去不? 世界第一家 VR 影院正式开张 (无大屏的 VR 电影院) 在被称为 VR 元年的 2016 年,越来越多的人加入了这个新兴的领域,各种传统应用也在被 VR 包装之后以…

redis cluster 分布式锁_关于分布式锁原理的一些学习与思考redis分布式锁,zookeeper分布式锁...

首先分布式锁和我们平常讲到的锁原理基本一样,目的就是确保,在多个线程并发时,只有一个线程在同一刻操作这个业务或者说方法、变量。在一个进程中,也就是一个jvm 或者说应用中,我们很容易去处理控制,在jdk …

sp烘焙流程_小手雷-PBR材质流程(一)——(基本材质)

小手雷-PBR材质流程(一)Substance Painter生存手册经过了12个章节的讲解后,已经完结了(。・ω・。)相信大家经过了生存手册这一基础教程过后,对Substance Painter这款软件已经有了比较坚实的基础了,…

怎样呵护友谊_呵护真正的友情,助力漫长的人生

友情,即友谊,是指朋友和朋友之间的感情。它是一种很美妙的东西,可以让你在失落的时候变得高兴起来,可以让你走出苦海,去迎接新的人生。它就像一种你无法说出又可以感到快乐无比的东西。只有拥有真正朋友的人&#xff0…

【Day41】Python之路——AJAX

什么是AJAX AJAX Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 优点: 不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行 同源…

aes离线解密工具_如何在Python中解密OpenSSL AES加密文件?

OpenSSL为AES加密提供了一种流行的(但不安全 - 见下文!)命令行界面:openssl aes-256-cbc -salt -in filename -out filename.encPython以PyCrypto包的形式支持AES,但它只提供工具。如何使用Python / PyCrypto解密使用OpenSSL加密的文件&#…

VUE-搜索过滤器

VUE非常实用的搜索过滤&#xff0c;喜欢点个赞哦 废话不多说&#xff0c;先来看看效果 1 引入vue <script src"https://cdn.jsdelivr.net/npm/vue"></script>2 HTML <div id"app"><input v-modelsearch /><ul v-if"search…

单选按钮必填会有红色选中提示吗_为什么单选按钮和复选框不能共存?

以下内容由摹客团队翻译整理&#xff0c;仅供学习交流&#xff0c;摹客设计协作一站式云平台&#xff0c;从产品、设计到开发&#xff0c;摹客来解决。单选按钮和复选框长期以来一直都是容易导致用户困惑的组件。这两个组件通常用于相同的情景下&#xff0c;但看起来又完全不同…

程序包org.junit.jupiter.api不存在

在跑项目的时候遇到这个问题&#xff0c;去看pom文件一切正常&#xff0c;也引入了这个依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13.2</version> <scope>test</scope&…

thrift介绍及应用(一)—介绍

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12157151 ------------------------------------------------------------------------------------ 一、概述 Thrift是Apache下的一个子项目&#xff0c;最早是Facebook的项目&#xff0c;后来Facebook提供给Apa…

matlab双目相机标定校正_基于双目视觉的无人机避障算法(一)

讲述在10月到12月所做的所有工作对于一个无人机自主避障来说&#xff0c;存在着以下流程&#xff1a;感知&#xff1a;障碍物检测、行人检测、目标检测SLAM&#xff1a;为无人机提供位置估计&#xff0c;构建稀疏环境地图路径规划&#xff1a;规划一条从当前位置到目标位置的移…

计算机无法播放,如果无法播放计算机mp4文件怎么办?

FireStar365接受1. 下载并安装最新版本的视频播放器(例如: Storm Video).2. 在硬盘中找到MP4视频文件.3. 右键单击该文件&#xff0c;然后选择打开方法“ Storm Video”.4. 可以双击打开页面.zxc942128835将mp4链接到计算机&#xff0c;打开磁盘&#xff0c;单击菜单栏上的工具…