I’ve installed Android 8 on my Google Pixel, and I’ve tested a couple of things regarding websites and PWAs and then I have a couple of bad news to share.

Android Instant Apps are the only mention to something related to the Web or browser in the Android Oreo website. It seems to repeat last Google IO keynote, where Android Instant Apps appeared as more important than PWAs from an Android’s perspective.

But let me start with good news: software updates can solve most of the problems. The issue is that nobody seemed to care enough about it to do it before the Android release that is currently being delivered to users.

Broken Add to Home Screen #

Let’s start stating the worst problems: on Opera Mobile, Samsung Internet, and Firefox the “Add to the Home screen” feature is not working. While Firefox is not supporting Web App Manifest yet for standalone display, it supports bookmarks to the Home Screen.

No icon appears after Adding on the Home screen on Samsung Internet and Opera using Oreo

On these browsers when you add a website or PWA to the Home screen, nothing happens. Nothing. No icon appears, and the browsers seem to understand everything is ok. Web App Banners appears correctly without luck after accepting the icon installation.

My first guess is that the old shortcut API is not working and these browsers had to update to the new Pinned Shortcuts API.

If you had installed icons with these browsers before installing Android 8.0, they would still work after the upgrade. The problem seems to be in the icon installation.

“Add to Home Screen” still works correctly on Google Chrome, but from the other browsers we will need to wait for an update at Google Play.

New Installation Process in Chrome #

This screen appears after we accept the icon installation dialog

Using Google Chrome, we have a new step before actually installing the icon: the home screen place selector. Here we can use “Add automatically” that will find a free spot where to install the icon or you can touch and hold the icon and drop it wherever you want it. The problem is that this new process has a new step that might decrease a little bit installation rate.

The new process involves:
1- Open the menu.
2- Select Add to Home screen.
3- Edit the title and press “Add.”
4- Press “Add Automatically” or touch and hold the icon to place it manually.

If the Web App Banner appears, steps 1 and 2 will be replaced by one step: press “Add to Home screen” on the banner.

Icons are not what you expect any more #

Up to Android 7.1, Chrome and Android were honoring the icon that you set inside the Web App Manifest (or meta tags as a fallback) without any transformation.

Starting with Android Oreo, every shortcut added from Chrome (and potentially other browsers as well, but they are not working now) will have a Chrome badge at the lower right corner of the icon.

This is bad for PWAs as we want to offer the user an app-like experience; the Chrome icon doesn’t help for the user to understand it as an app. And many companies won’t be happy about it.

The other issue with icons is that if your icon is not a perfect circle with a transparent background, the icon is treated as square and it’s reduced to fit entirely within the boundaries of a white circle. You can see the same PWA icons installed in the same device on Android 7.1 and Android 8:

On Android Oreo, icons have the badge and if they are not a perfect centered circle, they are embedded inside a white circular icon, reducing their original size.

In the previous image, the Lyft, Get Kana! and NASA icons are suffering for this issue while Garbarino, Flipkart and AliExpress keeps their original icons.

I don’t have confirmation but it seems icons for PWAs are following now the App Shortcut Icon Design Guidelines.

Any icon installed previous to Android 8 upgrade maintains the original icon; changes happen if you install the icon after the upgrade.

Update 8/23: Chrome’s response after a few days #

After a few days this post was published, some people started to see that the behavior on Chrome on Android Oreo was not what I explained here anymore. After a couple of tweets, I could get confirmation that Google has activated for all Android Chrome users WebAPK and it’s currently being rolled out as I write. My Chrome didn’t get the update yet, so it’s still on the behavior I’m stating here as many other users. I’ll post other update when I can confirm that everyone is under WebAPK. To know more about WebAPK continue reading.

WebAPK will be our hero #

While we can’t do anything about it, for now, one solution might appear when WebAPK becomes stable in the future. WebAPK is a new feature in Google Chrome that creates a native Android Package container (APK) and signs it server-side for our PWA. It’s currently available in Chrome under a flag “Improved Add to Home screen” and in Canary by default.

UPDATE 8/23: Chrome team confirmed on Twitter that WebAPK is being rolled out to Chrome stable users. It’s not on all users yet.

With WebAPK enabled, icons are back to normal as we were used in Android before Oreo. There is no public information yet on when WebAPK will become available but I guess (and hope) that these problems will speed things up.

And WebAPK will solve the issue for Chrome only. Samsung Internet, Opera, Firefox and other browsers will have the same icon problems unless Google opens WebAPK to third-party browsers as Google is the only one that can sign those on-the-fly generated APKs.

Public Open WiFi hotspots now under a VPN #

Android supports now a feature that will connect automatically to open access points (those without any security) and it will use a Google VPN as a secure tunnel to increase security. That means that your users will appear to your server as coming from Mountain View, USA. The original IP address is not available in the HTTP headers, so Google is not using the X-Forwarded-For header as with proxies.

Android 8 goodies not available to PWAs #

Android Oreo added a couple of things that can be useful for PWAs, but are still out of reach for Web content as of today, such as:

• Notification Dots: when an app has a pending notification, a dot will appear on the icon.
• Adaptive Icons: which can display a variety of shapes across different device models. For example, an adaptive launcher icon can display a circular shape on one OEM device, and display a square on another device
• Notification channels: it will let us define categories of notifications that we want to receive from an app/website.
• Shortcuts: options that will appear when you touch and hold an icon

Someone though this was a good idea. But Android Oreo has some good ideas we want to see in PWAs. www.flickr.com/photos/jeepersmedia/14206784113

Any good news? #

Before ending the article, I’ve some good news regarding web development on Android 8. Let’s cover them quickly.

Chrome and PWA emulation #

You can test everything that I’ve mentioned here even if you don’t have an Android 8 device as of today, Android emulator (available with Android Studio) now includes Google Chrome (version 58).

Android 8 Emulator now includes Chrome for Web and PWA testing, including the ability to connect a Remote Inspector

Picture-in-Picture for video playing #

If you have a <video> tag now, PiP is supported in Chrome. I’m not sure it has the right UX now though: you need to open the video in full screen mode and then press the Home Screen. At that point the video will continue playing as a PiP small floating window that you can move around and close it.

PiP works with most HTML5 video tags. Somehow, it’s not working on YouTube so I’m sorry, you won’t be able to watch Despacito again in PiP mode.

Google needs to work harder on PWAs #

PWAs with Oreo?

We usually criticize Apple a lot regarding support for the Web Platform, but PWAs on other platforms, including Android, are still in early stages. And I’m sorry to say that. I want to say something nicer here.

I tweeted about something similar during last Google I/O where my feeling was Google doesn’t care about PWAs. And I’m saying Google, not Chrome. Weird? Yes.

I know some people at the Chrome team are doing an outstanding job, but some things (such as WebAPK) are taking too much time to get ready (I tweeted about it 14 months ago).

The Android team doesn’t seem to care too much about PWAs: the support for Instant Apps and the problems stated in this post on today’s release for me are enough probe to say it, and it’s harming a little bit current PWAs’ trust.

I also know some people will reply saying that PWAs are more about Service Workers than about Web App Manifest and the icon installation, but you know… It sounds good, but I don’t think SW alone is selling the PWA idea to companies.

Let’s work on making it work better in the future!