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 了

相关文章
从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
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
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回&quot;undefined&quot;:一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
回到顶部