- Progressive Web Application Development by Example
- Chris Love
- 458字
- 2021-08-05 10:33:20
The Chrome add to homescreen experience
The clear leader in the progressive web application experience is Chrome. They should be, since they created the concept. They have also had time to experiment with the concept to see what works, what doesn't, and what consumers and developers expect.
This has led them to continually improve the process to the point that Chrome on Android creates a WebAPK when the app is installed, elevating the app to a similar level as native apps. Recently, they extended this functionality to Windows and ChromeOS, with plans to implement it on macOS soon.
Here, you can see some recently installed progressive web apps in my Windows Start menu:
So, what exactly is a WebAPK and the enhanced add to homescreen experience?
I have already explained this: it is where the Chrome packages progressive web apps in an apk package is called a WebAPK. If you are not familiar with Android native application development, all of the assets are packaged in a single file called an apk.
As an oversimplification, this is just a zip file containing the application's assets. Windows does something similar with the appx format. What Chrome does when it creates a WebAPK is akin to using Cordova to generate a native application from a website.
The Chrome team instead decided to create a duplicate channel to maintain and give PWAs similar control, as native apps implementing this hybrid approach was most efficient. They first shipped this capability in Chrome 57. The big difference between a native Android application and an installed progressive web app is no access to platform APIs.
The application appears like any Play Store installed application on the device. The icon can be placed on the homescreen, is visible in the app shelf, and can be managed through the Android platform settings.
Here is how the 2048 PWA is surfaced in the Android application management interface:
As Chrome implements this functionality on other platforms, you may or may not find the same level of control. For example, you still can't manage a Chrome installed PWA from the control panel on Windows.
The application uses the same storage settings as the web page. Clearing storage for the domain will also clear the storage for the installed PWA. This means that cookies and cached content will be removed.
Another benefit is when the web manifest file is updated to reference a new icon or change the name value. This will be updated on the homescreen icon.
Google is not hoarding this functionality to themselves. They have provided documentation and reference for other user agents (browsers) to implement similar functionality (https://chromium.googlesource.com/chromium/src/+/master/chrome/android/webapk). This means that we could see FireFox, Samsung Internet, UC Browser, and so on implement similar functionality soon.