The work of the web project in an unstable connection
Hello, my name is Alexander Zelenin, I am a web developer. Today I want to tell you how sites can work in an unstable connection as promised . Simply put, what to do if you turn off the Internet, and you need to earn money.
Consider 3 examples: an online store , a cinema and an online player . For the store and the cinema, there is also a division into 2 parts - what to do on the user side and on the operator / seller side.
I will not argue because of what problems occur with the connection and separate them in any way. Also, in this article, the loss of connection is considered as a rare case, and not a permanent state. For such a function requires contact with the server at least once a day. Each task has many options to solve it. It makes no sense to write "it was possible to simply store in memory, there is no need to write in LocalStorage", thanks. I also note that I did not specifically write any code in the article, since in each case, an individual approach is required, and over time, storage limitations or peculiarities of browsers may change, but the essence will remain the same.
')
I apologize if some technical solutions are no longer relevant - I will try to describe the principle of implementation. If somewhere is wrong - I will be glad for comments and corrections.
All this will work in the case of OnePageApplication, in other cases, think out the solutions yourself :-)
You climb pages, select products, add to cart. Suddenly, the connection with the store disappears. Immediately, a window appears with a list of already stored goods and a specially formed phone number, when you call, the user will get to the operator, who will immediately specify where to deliver everything and whether you want something else. Especially applicable to food delivery. It happens, the Internet is turned off when you already enter a phone number, click on the next step, and get a connection error. A back will not return and the phone number does not look. Order is lost.
The operator has the opportunity on a separate page to see the orders "in progress", also receives messages about lost customers. If the user has been logged in, he can be called back (directly in the browser), or upon receiving a call with an extension number, ATC immediately displays information about the order. Everyone is happy.
The possibility of online ticket ordering + operator interface working through a browser (maybe a separate program, this does not change the essence) with instant sending of data about tickets purchased to the server.
Internet was cut out, tickets must be printed, so that they were not bought online. The browser blocks a certain number of places (the projected number of purchases online), the rest can be selected / printed without problems. Data is accumulated and recovered as soon as the connection appears. If the places run out, the operator contacts the person in charge of the site’s work, and the latter has the opportunity to allocate another lot for sale offline and the cashier to manually add them as “free”.
The client sees a message on the site that there is no connection with the cinema's box office, but still has the opportunity to buy a limited number of tickets (or the ability to book tickets by phone by calling directly from the browser). Special unique QR code is printed on the tickets, which is checked for compliance when entering the hall.
Now, many are abandoning collections of music on their hard drive in favor of online listening. It would seem that solid pluses - the place on the disk does not end, you can replenish the collection in a couple of clicks, it is always on all devices.
But here the Internet is disconnected, and you sit without music. Not cool.
How do you like that, for example, "favorite" tracks are always available? It is already better when there are at least a couple hundred tracks.
How to determine that the server is not available (from the client)?
We keep a constant socket connection, when disconnected, we block parts of the interface that are responsible for switching to new pages, leaving only the “cached” functionality.
How to determine that the client (user, operator workstation) have fallen off?
Yes, exactly the same. Of course, you need to give at least a couple of seconds to reconnect before you panic.
The main problem is the storage of tracks on the client side. First, you need to understand what we store and in what form. We store, of course, playlists, tracks, and some meta information about them.
How to store tracks?
Base64 or any textual representation of the file.
How to play from a string?
The easiest way is to simply generate an audio element with the source: “data: audio / wav; base64, ...”. There are lots of libraries, it will not be difficult to find them.
Wait, so this is no streaming, playing only after the download?
In part, yes. But here, too, have their own tricks. You can split the file into parts, and start playing as soon as the first part loads. With proper selection of sizes will be almost indistinguishable from streaming. Yes, this is an additional cost for special file storage.
So, well, and where do we keep it?
Here it is more difficult. Depending on the situation (browser, device, etc.) we need to use different storage.
IndexedDB : firefox and chrome on mobile devices, chrome, firefox, IE on desktops
WebSQL : android browser, safari, ios web view on mobile, safari on desktops
SessionStorage for android browser, if 200mb websql is not enough. But keep in mind that saving is only for the session.
In general, for mobile devices, it is better, of course, to release an application.
What is the result then?
The user has disconnected the Internet, giving access to the page with your favorite tracks / playlists, playing from the repository on request :-)
Task: work when there is no connection to the main service.
What data to store?
Information about sessions for a couple of days, tickets sold, “predictable” online sales, places reserved for online tickets in case of connection loss.
Where to store?
In this case, LocalStorage with 5mb should be enough for more than.
Work mechanism
Connection lost -> we limit the space in the interface, mark the tickets sold with a flag that they are not saved. For the operator, in general, nothing changes. When a connection appears, we send updated data, we obtain data about online tickets sold and sessions for the next couple of days
Objective: do not sell tickets that can be sold at the box office.
Solution: We mark in advance the predicted number of places as “online purchases”; in case of loss of the connection, we sell only them or offer the opportunity to call the cashier.
Task: show a grid of sessions, prices, phone numbers for booking.
Solution: immediately load this data into LocalStorage, display when connection is lost.
When you first add a product, a socket connection is established, we get a unique extension number. On subsequent uploads, the data is also sent to the server. Meta data of goods and identifiers are added to LocalStorage, the graph is preloaded. In case of connection breakdown, we display all the information on the goods, telephone and extension number.
We save data on all the goods with reference to the extension number. When calling, the PBX sends the extension number, and the operator immediately displays all the information on the order.
If it was an authorized client, and we know his phone number - you can immediately make a call.
Deciding whether the introduction of such systems costs, of course you.
The main advantage is that the user does not need to install any additional software, add-ins, etc. Everything works right away.
I am pleased to answer questions and tell you about more specific implementations.
Consider 3 examples: an online store , a cinema and an online player . For the store and the cinema, there is also a division into 2 parts - what to do on the user side and on the operator / seller side.
I will not argue because of what problems occur with the connection and separate them in any way. Also, in this article, the loss of connection is considered as a rare case, and not a permanent state. For such a function requires contact with the server at least once a day. Each task has many options to solve it. It makes no sense to write "it was possible to simply store in memory, there is no need to write in LocalStorage", thanks. I also note that I did not specifically write any code in the article, since in each case, an individual approach is required, and over time, storage limitations or peculiarities of browsers may change, but the essence will remain the same.
')
I apologize if some technical solutions are no longer relevant - I will try to describe the principle of implementation. If somewhere is wrong - I will be glad for comments and corrections.
All this will work in the case of OnePageApplication, in other cases, think out the solutions yourself :-)
Situations:
Online store
From the user:
You climb pages, select products, add to cart. Suddenly, the connection with the store disappears. Immediately, a window appears with a list of already stored goods and a specially formed phone number, when you call, the user will get to the operator, who will immediately specify where to deliver everything and whether you want something else. Especially applicable to food delivery. It happens, the Internet is turned off when you already enter a phone number, click on the next step, and get a connection error. A back will not return and the phone number does not look. Order is lost.
Operator
The operator has the opportunity on a separate page to see the orders "in progress", also receives messages about lost customers. If the user has been logged in, he can be called back (directly in the browser), or upon receiving a call with an extension number, ATC immediately displays information about the order. Everyone is happy.
Cinema
The possibility of online ticket ordering + operator interface working through a browser (maybe a separate program, this does not change the essence) with instant sending of data about tickets purchased to the server.
From the cashier:
Internet was cut out, tickets must be printed, so that they were not bought online. The browser blocks a certain number of places (the projected number of purchases online), the rest can be selected / printed without problems. Data is accumulated and recovered as soon as the connection appears. If the places run out, the operator contacts the person in charge of the site’s work, and the latter has the opportunity to allocate another lot for sale offline and the cashier to manually add them as “free”.
From the customer when buying online.
The client sees a message on the site that there is no connection with the cinema's box office, but still has the opportunity to buy a limited number of tickets (or the ability to book tickets by phone by calling directly from the browser). Special unique QR code is printed on the tickets, which is checked for compliance when entering the hall.
Online player
Now, many are abandoning collections of music on their hard drive in favor of online listening. It would seem that solid pluses - the place on the disk does not end, you can replenish the collection in a couple of clicks, it is always on all devices.
But here the Internet is disconnected, and you sit without music. Not cool.
How do you like that, for example, "favorite" tracks are always available? It is already better when there are at least a couple hundred tracks.
Implementation
How to determine that the server is not available (from the client)?
We keep a constant socket connection, when disconnected, we block parts of the interface that are responsible for switching to new pages, leaving only the “cached” functionality.
How to determine that the client (user, operator workstation) have fallen off?
Yes, exactly the same. Of course, you need to give at least a couple of seconds to reconnect before you panic.
Online player
The main problem is the storage of tracks on the client side. First, you need to understand what we store and in what form. We store, of course, playlists, tracks, and some meta information about them.
How to store tracks?
Base64 or any textual representation of the file.
How to play from a string?
The easiest way is to simply generate an audio element with the source: “data: audio / wav; base64, ...”. There are lots of libraries, it will not be difficult to find them.
Wait, so this is no streaming, playing only after the download?
In part, yes. But here, too, have their own tricks. You can split the file into parts, and start playing as soon as the first part loads. With proper selection of sizes will be almost indistinguishable from streaming. Yes, this is an additional cost for special file storage.
So, well, and where do we keep it?
Here it is more difficult. Depending on the situation (browser, device, etc.) we need to use different storage.
IndexedDB : firefox and chrome on mobile devices, chrome, firefox, IE on desktops
WebSQL : android browser, safari, ios web view on mobile, safari on desktops
SessionStorage for android browser, if 200mb websql is not enough. But keep in mind that saving is only for the session.
In general, for mobile devices, it is better, of course, to release an application.
What is the result then?
The user has disconnected the Internet, giving access to the page with your favorite tracks / playlists, playing from the repository on request :-)
Cinema
For cash
Task: work when there is no connection to the main service.
What data to store?
Information about sessions for a couple of days, tickets sold, “predictable” online sales, places reserved for online tickets in case of connection loss.
Where to store?
In this case, LocalStorage with 5mb should be enough for more than.
Work mechanism
Connection lost -> we limit the space in the interface, mark the tickets sold with a flag that they are not saved. For the operator, in general, nothing changes. When a connection appears, we send updated data, we obtain data about online tickets sold and sessions for the next couple of days
On the site (if the cashier is unavailable)
Objective: do not sell tickets that can be sold at the box office.
Solution: We mark in advance the predicted number of places as “online purchases”; in case of loss of the connection, we sell only them or offer the opportunity to call the cashier.
On the site (if client connection breaks)
Task: show a grid of sessions, prices, phone numbers for booking.
Solution: immediately load this data into LocalStorage, display when connection is lost.
Online store
On the client
When you first add a product, a socket connection is established, we get a unique extension number. On subsequent uploads, the data is also sent to the server. Meta data of goods and identifiers are added to LocalStorage, the graph is preloaded. In case of connection breakdown, we display all the information on the goods, telephone and extension number.
On server
We save data on all the goods with reference to the extension number. When calling, the PBX sends the extension number, and the operator immediately displays all the information on the order.
If it was an authorized client, and we know his phone number - you can immediately make a call.
Total
Deciding whether the introduction of such systems costs, of course you.
The main advantage is that the user does not need to install any additional software, add-ins, etc. Everything works right away.
I am pleased to answer questions and tell you about more specific implementations.
Source: https://habr.com/ru/post/242161/
All Articles