Android Oreo takes a bite out of Progressive Web Apps
On August, 21st after the solar eclipse, Google released the final version of Android 8 now known as Android Oreo. The sun wasn’t the only thing that was hidden for a while today, as Progressive Web Apps have acquired new problems.
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.
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.
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
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:
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
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).
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.
Google needs to work harder on PWAs
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!
Maximiliano Firtman is a mobile + web developer, trainer, speaker, and writer. He has authored many books, including High Performance Mobile Web published by O’Reilly Media. He is a frequent speaker at conferences worldwide and he has been widely recognized for his work in the mobile-web community. He teaches mobile, HTML5, PWA and performance trainings for top companies around the world. He has delivered several Progressive Web Apps workshops and trainings at Fluent, ForwardJS, Safari Live Trainings, Dutch PHP Conference, ITMaster and more places. Twitter: @firt