Kamran Ahmed
2 years ago
parent
8dd1665cd0
commit
8e257d3168
13 changed files with 549 additions and 301 deletions
@ -1,8 +0,0 @@ |
|||||||
# PWA APIs |
|
||||||
|
|
||||||
One of the main purposes of PWAs is to provide a native-app-like experience. APIs like service workers, web sockets, and storage allow a PWA to fast load, access data offline, and other capabilities, similar to a native app. |
|
||||||
|
|
||||||
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://web.dev/progressive-web-apps/'>Progressive Web Apps</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps'>Progressive web apps (PWAs)</BadgeLink> |
|
||||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/project-fugu-5-new-apis-to-try-out-in-your-pwa/'> 5 new APIs to try out in your PWA</BadgeLink> |
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
# Web Storage API |
||||||
|
|
||||||
|
The Web Storage API provides mechanisms for storing key-value pairs in a web browser. It includes two storage objects: localStorage and sessionStorage, which allow you to save data on the client side and persist it across multiple browser sessions, respectively. |
||||||
|
|
||||||
|
The Web Storage API is designed to be simple and easy to use, and it is widely supported across modern web browsers. It is often used as an alternative to cookies, as it allows for larger amounts of data to be stored and is more efficient in terms of performance. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API'>Web Storage API - MDN</BadgeLink> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Web Sockets |
||||||
|
|
||||||
|
Web Sockets is a technology that allows for full-duplex communication over a single TCP connection. It enables real-time, bi-directional communication between a client and a server, and is typically used in applications that require high-speed, low-latency communication, such as online gaming and real-time data streaming. |
||||||
|
|
||||||
|
Web Sockets utilizes a persistent connection between a client and a server, allowing for continuous data exchange without the need for the client to send additional requests to the server. This makes it more efficient and faster than other technologies, such as HTTP, which require a new request to be sent for each piece of data. |
||||||
|
|
||||||
|
Web Sockets is supported by most modern web browsers and can be used with a variety of programming languages and frameworks. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API'>Web Sockets - MDN</BadgeLink> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Server Sent Events |
||||||
|
|
||||||
|
Server-Sent Events (SSE) is a technology that allows a web server to push data to a client in real-time. It uses an HTTP connection to send a stream of data from the server to the client, and the client can listen for these events and take action when they are received. |
||||||
|
|
||||||
|
SSE is useful for applications that require real-time updates, such as chat systems, stock tickers, and social media feeds. It is a simple and efficient way to establish a long-lived connection between a client and a server, and it is supported by most modern web browsers. |
||||||
|
|
||||||
|
To use SSE, the client must create an EventSource object and specify the URL of the server-side script that will send the events. The server can then send events by writing them to the response stream with the proper formatting. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events'>Server-Sent Events - MDN</BadgeLink> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Service Workers |
||||||
|
|
||||||
|
Service Workers are a type of web worker that acts as a proxy between a web page and the network, allowing web developers to build offline-first and reliable applications. Service Workers can intercept network requests, access the cache, and make decisions on how to respond to a request based on the available resources. |
||||||
|
|
||||||
|
Service Workers are written in JavaScript and are registered by a web page. Once registered, they can control the page and all its requests, even when the page is not open in a browser. This allows Service Workers to enable features such as push notifications, background synchronization, and offline support. |
||||||
|
|
||||||
|
Service Workers are supported by most modern web browsers, and they are an essential component of progressive web applications (PWAs). |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API'>Service Workers - MDN</BadgeLink> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
# Location API |
||||||
|
|
||||||
|
The Geolocation API is a web API that provides access to the device's location data, such as latitude and longitude. It allows web developers to build location-based applications, such as mapping and location sharing, by using the device's GPS, Wi-Fi, and other sensors to determine the user's location. |
||||||
|
|
||||||
|
To use the Geolocation API, a web page must first request permission from the user to access their location. If permission is granted, the page can then use the `navigator.geolocation` object to access the device's location data. The API provides several methods for getting the user's current location, watching for location changes, and calculating distances between two locations. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API'>Geolocation API - MDN</BadgeLink> |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
# Notifications API |
||||||
|
|
||||||
|
The Notifications API is a web API that allows web pages to display system-level notifications to the user. These notifications can be used to alert the user of important events, such as new messages or updates, even when the web page is not open in the browser. |
||||||
|
|
||||||
|
To use the Notifications API, a web page must first request permission from the user to display notifications. If permission is granted, the page can then use the `Notification` constructor to create a new notification and display it to the user. The notification can include a title, body text, and an icon, and it can be customized with options such as a timeout and a click action. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API'>Notifications API - MDN</BadgeLink> |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Device Orientation API |
||||||
|
|
||||||
|
The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games. |
||||||
|
|
||||||
|
To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation. |
||||||
|
|
||||||
|
The Device Orientation API is supported by most modern web browsers and is often used in conjunction with other APIs, such as the Geolocation API, to build location-based applications. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Device_orientation_events'>Device Orientation API - MDN</BadgeLink> |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
# Payments |
||||||
|
|
||||||
|
The Payment Request API is a web API that allows web developers to build checkout flows within their web applications. It provides a standardized, browser-based interface for collecting payment and shipping information from the user, and it supports a wide range of payment methods, including credit cards, debit cards, and digital wallets. |
||||||
|
|
||||||
|
To use the Payment Request API, a web page must first create a `PaymentRequest` object and specify the payment and shipping options that are available to the user. The page can then invoke the Payment Request UI by calling the `show()` method on the `PaymentRequest` object. The user can then select their preferred payment and shipping options and confirm the payment, at which point the Payment Request API will return a payment response object that can be used to complete the transaction. |
||||||
|
|
||||||
|
The Payment Request API is supported by most modern web browsers and is designed to be simple and efficient for both the developer and the user. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API'>Payment Request API - MDN</BadgeLink> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,10 @@ |
|||||||
|
# Credentials API |
||||||
|
|
||||||
|
The Credential Management API is a web API that allows web developers to integrate password-based and federated login flows into their applications. It provides a standardized, browser-based interface for storing and retrieving user credentials, such as username and password combinations and OAuth tokens. |
||||||
|
|
||||||
|
To use the Credential Management API, a web page must first create a Credential object and specify the credentials that the user wishes to store. The page can then use the navigator.credentials object to store and retrieve the user's credentials. The API provides several methods for storing and retrieving credentials, as well as for prompting the user to sign in or sign up. |
||||||
|
|
||||||
|
The Credential Management API is supported by most modern web browsers and is designed to improve the security and usability of login flows by allowing the user to store and reuse their credentials across multiple sites and devices. |
||||||
|
|
||||||
|
<ResourceGroupTitle>Free Content</ResourceGroupTitle> |
||||||
|
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API'>Credential Management API - MDN</BadgeLink> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue