• WebAPKs on Android
  • By Pete LePage
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: [Yuhanlolo] (https://github.com/Yuhanlolo)
  • Proofreader: [maoqyhz] (https://github.com/maoqyhz)

On Android, web Install banners do more than just add progressive Web Apps (PWA) to a user’s home screen. Chrome automatically generates a special APK for your application, sometimes called a WebAPK. Install the app as an APK on the phone, enable it to appear in the user’s application launcher and system Settings, and register a set of intent filters.

To generate WebAPK, Chrome needs to examine the Web App manifest and metadata. Once the manifest changes, Chrome will generate a new APK.

Note: Since changes to the MANIFEST regenerate WebAPK, we recommend modifying it only when necessary. Also, don’t use manifest to store any user-specific information or other data that needs to change frequently. Frequent changes to the manifest will trigger Chrome to constantly generate new WebAPK, resulting in longer installation times.

Android intent filters

When a PWA is installed on Android, the app registers a set of Intent filters for all of its urls. When the user clicks on any link included in the PWA, the application will be opened as an application, not in the browser.

Let’s take a look at the following snippet of the manifest.json file. When called from the application launcher, it launches https://example.com/ as a standalone application, without requiring any browser.

"start_url": "/"."display": "standalone".Copy the code

A WebAPK includes 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>
Copy the code

If a user clicks on a link to https://example.com/read in an application, this behavior will be picked up by the intent and the link will be opened in the corresponding PWA.

Note: Jumping directly to https://example.com/app/ from the address bar is the same as opening the link from a native app with the intent filter. Chrome will assume that the user consciously wants to access the address and open it.

usescopeLimit the intent filters

If you don’t want your PWA to handle all the links on your website, you can add the Scope attribute to the manifest. The Scope property tells Android to open your PWA only when the URL matches origin and Scope, and dictates which urls should be opened in the PWA and which urls should be opened in the browser. Scope is very helpful when your app is in the same domain as other non-app content.

Let’s take a look at the following snippet of the manifest.json file. When called from the application launcher, it launches https://example.com/app/ as a standalone application, without requiring any browser.

"scope": "/app/"."start_url": "/"."display": "standalone".Copy the code

As before, the generated WebAPK will include Intent filters, but it will modify the Android :pathPrefix attribute in the APK 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>
Copy the code

Let’s look at a few simple examples: ✅ https://example.com/app/ – under the/app/path ✅ https://example.com/app/read/book – under the/app/path ❌ https://example.com/help/ – out Under the/app/path ❌ https://example.com/about/ – not in/app/directory

If you don’t want to set the scope property, or want to know how to define the scope of a PWA, see Scope for more information.

Rights management

Permission management works just like any other web application; they need to be requested at run time rather than at install time. Ideally, ask for them only when you need them. For example, don’t ask for permission for the camera as soon as it’s loaded, ask for it when the user is ready to take a picture.

Note: Android typically grants notifications to newly installed apps right away, but this does not apply to apps installed via WebAPK. Therefore, you need to request notification permissions at run time.

Manage storage space and application status

Although PWA is installed via APK, Chrome uses the current configuration file to store data and does not isolate it. This provides a data-sharing experience for interaction between the browser and the application. Here, the cache is shared and active, and any client’s storage space is accessible. At the same time, the server side is installed and ready to run.

However, this can cause problems when users clear their Chrome profile or site data.

Q&A

What if the user already has the site’s native apps installed?

Just like the PWA installation banner, users can add any website independent of the native app to the home screen. If you expect users to install both, we recommend that you use a different icon or name to differentiate your site from your application.

Is Chrome running when a user opens a site with an installed PWA?

Yes, once the site is opened through the home screen, the main activity still runs under Chrome. The cache, permissions, and all browser state will be shared by both.

If the user clears the browser cache, will the storage space of the installed PWA be cleared?

Yes.

If I use a new device, will my PWA be reinstalled?

Not all the time. But we think it’s an important issue and we’re working on it.

Can I register my own methods and protocols for handling urls?

Can’t.

How are permissions resolved? Am I getting notifications from Android or Chrome?

Permissions are still managed through Chrome. Users will be prompted by Chrome to grant permissions and can edit those permissions in Chrome Settings.

Which version of Android does PWA run on?

PWA runs on all Android devices with Chrome installed, Jelly Bean and above, to be specific.

Does PWA use a WebView?

No, the site is opened through Chrome, and the version of Chrome that opens the site is the one that the user added the PWA to.

Can we upload an APK that can be submitted to the App Store?

No, because there is currently no signature that supports PWA uploading to the app store.

Is PWA in the app Store list?

Not here.

I am a developer of other browsers on the Android platform. Can I implement such a quick installation process for my web applications?

We are working on that. We want all browsers to support PWA. More details will be announced later.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.