コラム

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.

Cache API

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.

Cache API | Can I use… Support tables for HTML5, CSS3, etc.

Push API

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.

Push API | Can I use… Support tables for HTML5, CSS3, etc.

Geolocation

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.

Geolocation | Can I use… Table support for HTML5, CSS3, etc.

Window.localStorage

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.

Window API: localStorage | Can I use… Table support for HTML5, CSS3, etc.

WebSocket

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.

WebSocket API | Can I use… Support tables for HTML5, CSS3, etc.

WebRTC

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).

WebRTC peer-to-peer connections | Can I use… Support tables for HTML5, CSS3, etc.

WebAssembly

WebAssembly is a non-JavaScript programming execution environment supported by web browsers. Because it is binary, it is often faster than JavaScript.

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.

WebAssembly | Can I use… Support tables for HTML5, CSS3, etc.

Server-Sent Events

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.

Server-sent events | Can I use… Support tables for HTML5, CSS3, etc.

Web Worker API

Web workers run programs in a separate thread inside the browser. This allows for parallel processing, which is useful for heavy computation.

Unlike JavaScript, which runs in the main thread, Web Workers cannot perform DOM operations. Most of the time, Web Workers are used for computational processing.

Web Workers | Can I use… Support tables for HTML5, CSS3, etc.

Service Workers

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.

Service Workers | Can I use… Support tables for HTML5, CSS3, etc.

Shared Workers

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.

Shared Web Workers | Can I use… Support tables for HTML5, CSS3, etc.

Navigator.onLine

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.

Online/Offline Status | Can I use… Support tables for HTML5, CSS3, etc.

Add to Home Screen

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.

Add to Home Screen (A2HS) | Can I use… Support tables for HTML5, CSS3, etc.

Web Share API

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.

Web Share API | Can I use… Support tables for HTML5, CSS3, etc.

HTML Drag & Drop API

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.

Drag and Drop | Can I use… Table support for HTML5, CSS3, etc.

MediaDevices.getUserMedia()

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.

getUserMedia/Stream API | Can I use… Support tables for HTML5, CSS3, etc.

Navigator.vibrate()

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.

Navigator API: vibrate | Can I use… Support tables for HTML5, CSS3, etc.

Web Authentication API

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.

Web Authentication API | Can I use… Support tables for HTML5, CSS3, etc.

History API

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.

History API: Back | Can I use… Support tables for HTML5, CSS3, etc.

Features only available in Chrome

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

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.

WebTransport | Can I use… Support tables for HTML5, CSS3, etc.

File and Directory Items API

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.

Filesystem & FileWriter API | Can I use… Support tables for HTML5, CSS3, etc.

MediaStream ImageCapture API

The ImageCapture API is an API for capturing images using a webcam. Depending on the camera, operations such as zooming and blurring the background can be performed with JavaScript.

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.

ImageCapture API | Can I use… Support tables for HTML5, CSS3, etc.

Web Bluetooth API

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.

Web Bluetooth | Can I use… Support tables for HTML5, CSS3, etc.

Web NFC API

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.

Web NFC | Can I use… Support tables for HTML5, CSS3, etc.

Conclusion

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.