One way to improve the user experience is to introduce Progressive Web Apps. I recently learned about Progressive Web Apps and found them interesting, so I applied them to a Web app I'm developing.
Whwt's PWA
This is a technology that Google has been gradually promoting for a couple of years, and it can provide a UX as if you were using a native application while browsing a web page.
Google has been the main proponent of this technology, and it is compatible with Chrome. Firefox and Opera browsers are also supported, although I have not used them.
In addition, Safari's support status has recently been changed to "under development," so there is a lot of excitement about the possibility of using it on iOS as well.
Difference from the normal website
I'm not very knowledgeable, so I'm thinking that websites using Python or PHP could also be considered web apps in the broad sense of the term.
PWAs can use Push Notification API, Cache API, etc. by setting up Service Workers, so they can run faster and have a UX similar to native apps.
Another feature of PWAs is that they can be configured with a Web app manifest, which allows for a native app-like UI, such as by removing the address bar.
Difference from the native application
The advantages are that it is based on the Web, so there is no need to learn the language of native applications, development costs are low, and it is OS-independent.
Moreover, since it is not installed on the terminal, it does not squeeze space; in the case of Twitter Lite, only a few hundred kilobytes!
The disadvantages are that native apps are superior to Twitter Lite in terms of speed, and that an Internet environment is obviously required, even though Twitter Lite can be used offline. Well, you can find a lot of good information on Twitter Lite if you search for it.
Manifest file
It is one of the essential components of a PWA, including appearance, icons, etc. It can be integrated into a non-PWA site as well.
Reference: Add a web app manifest | Articles | web.dev
The manifest file is placed on the server in JSON format.
{
"short_name": "MKTIA.COM",
"name": "MKTIA.COM",
"icons": [
{
"src": "icon.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/",
"background_color": "#fff",
"theme_color": "#004898",
"display": "standalone"
}
A very simple example would look like this:
- short_name: Name added to the home screen
- name: Name displayed on the install banner
- icons: Icons for the app, also used for the splash screen (multiple sizes can be specified)
- src: Location of the icon image
- start_url: URL to connect to when opening
- background_color: Background color of the splash screen
- theme_color: Browser search window and status bar color
- dsiplay: Style of the UI when opened
A meta tag is also required to load this in the web page.
<link rel="manifest" href="/manifest.json" />
Test
Chrome DevTools also includes a manifest file testing tool, which can be found on the Manifest tab of the Application panel.
My impression
This mechanism is likely to make it easier to develop applications at a low cost, so if there is not much functionality required, there may be a growing demand to create PWAs rather than native apps.
Although it will depend on the iPhone's compatibility, those who can write JavaScript can make use of Firebase, React, Vue.js, and so on.
As I am having a hard time learning Android, which I have just started, I think it is necessary to consider the right technology for the right person, taking into account that there are various other options available.