PWA 再进化,可以生成一个安卓原生的 WebAPK 了

2018-06-13 admin

By Pete LePage Pete is a Developer Advocate

Add to Home Screen on Android does more than just add the Progressive Web App to the users Home Screen. Chrome automatically generates and installs a special APK of your app. We sometimes refer to this as a WebAPK. Being installed via an APK makes it possible for your app to show up in the app launcher, in Android’s app settings and to register a set of intent filters.

To generate the WebAPK Chrome looks at the web app manifest, and other meta-data. Whenever the manifest changes, Chrome will need to generate a new APK.

Android intent filters

When a Progressive Web App is installed on Android, it will register a set of intent filters for all URLs within the scope of the app. When a user clicks on a link that is within the scope of the app, the app will be opened, rather than opening within a browser tab.

Consider the following partial manifest.json, when launched from the app launcher, it would launch https://example.com/ as a standalone app, without any browser chrome.


"start_url": "/",
"display": "standalone",

The WebAPK would include the following intent filters:


<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:scheme="https"
    android:host="example.com"
    android:pathPrefix="/" />
</intent-filter>

If the user clicks on a link within an installed app to https://example.com/read, it would be caught by the intent and opened in the Progressive Web App.

Using scope to restrict intent filters

If you don’t want your Progressive Web App to handle all URLs within your site, you can add the scope property to your web app manifest. The scope property tells Android to only open your web app if the URL matches the origin + scope, and limits which URLs will be handled by your app and which should be opened in the browser. This is helpful when you have your app and other non-app content on the same domain.

Consider the following partial manifest.json, when launched from the app launcher, it would launch https://example.com/app/ as a standalone app, without any browser chrome.


"scope": "/app/",
"start_url": "/",
"display": "standalone",

Like before, the generated WebAPK would include an intent filter but would modify the android:pathPrefix attribute in the APK’s AndroidManifest.xml:


<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data
    android:scheme="https"
    android:host="example.com"
    android:pathPrefix="/app/" />
</intent-filter>

Let’s take a look at a few examples: https://example.com/app/ - within /app/ https://example.com/app/read/book - within /app/ https://example.com/help/ - not in /app/ https://example.com/about/ - not in /app/

See scope for more information about scope, what happens when you don’t set it, and how you can use it to define the scope of your app.

Managing permissions

Permissions work in the same way as other web apps and cannot be requested at install time, instead they must be requested at run time, ideally only when you really need them. For example, don’t ask for camera permission on first load, but instead wait until the user attempts to take a picture.

Managing storage and app state

Even though the progressive web app is installed via an APK, Chrome uses the current profile to store any data, and it will not be segregated away. This allows a shared experience between the browser and the installed app. Cookies are shared an active, any client side storage is accessible and the service worker is installed and ready to go.

Though, this can be an issue if the user clears their Chrome profile, or chooses to delete site data.

Frequently asked questions

<dt>What happens if the user has already installed the native app for the site?</dt>

<dd>Like add to home screen today, users will be able to add a site independent of any native apps. If you expect users to potentially install both, we recommend differentiating the icon or name of your site from your native app.</dd>

<dt>When a user opens a site installed via improved add to Home screen, will Chrome be running?</dt>

<dd>Yes, once the site is opened from the home screen the primary activity is still Chrome. Cookies, permissions, and all other browser state will be shared.</dd>

<dt>Will my installed site’s storage be cleared if the user clears Chrome’s cache?</dt>

<dd>Yes.</dd>

<dt>Will my app be re-installed when I get a new device?</dt>

<dd>Not at this time, but we think it is an important area and we are investigating ways to make it work.</dd>

<dt>Will I be able to register to handle custom URL schemes and protocols?</dt>

<dd>No.</dd>

<dt>How are permissions handled? Will I see the Chrome prompt or Android’s?</dt>

<dd>Permissions will still be managed through Chrome. Users will see the Chrome prompts to grant permissions and will be able to edit them in Chrome settings.</dd>

<dt>What versions of Android will this work on?</dt>

<dd>Progressive web apps can be installed on all versions of Android that run Chrome for Android, specifically Jelly Bean and above.</dd>

<dt>Does this use the WebView?</dt>

<dd>No, the site opens in the version of Chrome the user added the site from.</dd>

<dt>Can we upload the APKs that are created to the Play Store?</dt>

<dd>No. There is no key signing information supplied to enable you to create your own PWA that can be in the store.</dd>

<dt>Are these listed in the Play Store?</dt>

<dd>No.</dd>

<dt>I am developer of another browser on Android, can I have this seamless install process?</dt>

<dd>We are working on it. We are committed to making this available to all browsers on Android and we will have more details soon.</dd>

[转载]原文链接:https://developers.google.cn/web/fundamentals/integration/webapks?hl=zh-cn

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33948.html

文章标题:PWA 再进化,可以生成一个安卓原生的 WebAPK 了

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
回到顶部