One by one, things that were once only possible with desktop software are becoming web applications. Even Photoshop has a web version, albeit a beta version. In this context, there are technologies that make web applications more like desktop or smartphone applications that you should be aware of.
This article introduces APIs that can be used in the PWA process.
The Cache API is a feature used in Service Worker. It acts as a cache by storing the response to a request URL.
The Cache API does not manage expiration dates, etc., so you need to implement that part yourself.
The Push API is an API for push notifications. It uses a different mechanism than smartphones, so device tokens obtained from smartphone applications cannot be used.
To use the Push API, you must be able to use Service Worker. In addition to capturing the unique URL for each device, the process of displaying notifications is also implemented in Service Worker.
Geolocation is an API to retrieve location information that combines not only GPS, but also IP address, WiFi, and other information.
In addition to a one-time collection, there is also a continuous collection feature.
localStorage is a function to store text in KVS. It does not have a search function, but only retrieves data by specifying a key.
Since localStorage is bound to a URL, it is not shared with other domains or even with different port numbers.
WebSocket is an API for sending and receiving text messages between a server and a client. The connection is persistent, so it is used for chatting.
WebSocket can only be used for text, so if you want to send data like video or audio, use the WebRTC API.
WebRTC is an API for video and voice chat. WebRTC can be managed centrally on a server or connected via P2P. P2P does not require a central server, but the load on the client is higher.
There are other data channels that can send arbitrary data (text can also be sent).
WebAssembly generates intermediate binaries that can be converted from and run in any language, not a programming language; you can create executables for WASM in a variety of languages, including Rust, C/C++, C#, and Go.
Server-sent events are one-way from the server to the client, whereas WebSockets can be sent and received on both the server and client sides.
Server-sent events are useful for notifying the client of server-side changes.
Web workers run programs in a separate thread inside the browser. This allows for parallel processing, which is useful for heavy computation.
Service Workers are a form of Web Workers, but are specifically used for the Cache API, Push API, and Add to Home Screen.
To use these functions, they must be implemented on top of Service Workers, for which special events such as fetch and install are provided.
Shared Web Workers are a subset of Web Workers. They are characterized by the ability to be shared between browser tabs. They can be used to send and receive messages between tabs or to organize network connections.
This API can be used to get network status (online or offline). This is essential for developing offline-capable web applications.
It can be used to get the status before accessing the network or to execute queued information when the network is offline.
This feature installs a web application on the home screen like a desktop or smartphone application. The installation is limited to placing an icon on the home screen.
When the application is on the home screen, the address bar is hidden and a more application-like interface can be achieved.
Web Share API is an API that can be used to associate URLs with external services. It is the same functionality that can be used to share content in applications.
This API is useful for distributing content by sharing it with external services, or sharing it with friends via chat, etc.
Drag and drop allows you to drag and drop files and folders onto a web page. Since desktop files can be passed to and from the API, this is a more user-friendly mechanism than uploading files using input tags.
getUserMedia is used to retrieve the input from the webcam. On a smartphone, the content of the front camera can be used for video chatting or capturing a QR code.
Values can be streamed to a video tag or applied to a canvas tag.
vibrate is a function that allows you to vibrate using a specified pattern. It is also supported on the desktop, but nothing happens when it is executed.
You can specify the execution time or the vibration pattern.
The Web Authentication API is also called WebAuthn. Passkey for MacOS is also based on WebAuthn.
WebAuthn uses biometrics and other authentication methods to generate private and public keys. The same public key is used for authentication when logging in, so there is no need to register or enter a password.
The History API adds browser history management to operations such as SPA, which performs screen transitions without reloading the screen. The browser’s back function can be used and the appearance URL can be changed.
By changing the appearance URL, the content is displayed as the user expects, even when the browser is reloaded.
From here on, APIs that can only be used in limited browsers (mostly Chrome), such as Web Bluetooth, will no longer be implemented, as Safari explicitly refuses to implement them.
WebTransport is a still-under-development API supported by Chrome but not Safari and is an evolution of WebSocket for HTTP3.
It differs from WebSocket in that it supports multiple streams. It is designed to solve the problems of WebSocket and WebRTC.
Creates a virtual filesystem in the browser. Files can be written to the virtual file system. This API is essential to achieve a more desktop-like UX.
Images can be captured more easily than before by using getUserMedia to reflect them in the canvas. This feature is currently not available in Safari.
Web Bluetooth is an API for connecting to Bluetooth devices, allowing you to receive data from Bluetooth devices and vice versa.
It can be used to collect data from Bluetooth-connected sensors, send files, etc.
Can be used to read data from SUICA, My Number Card, etc. Can be used with Chrome on Android, but not with Safari on iPhone. However, it can be used on iPhone, so there is a possibility that it will be implemented in the future.
By using the APIs and functions introduced here, the UI/UX of a web application can be more similar to that of a native application.
Please use these features to develop more usable web applications.