ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browser: Display "Unsupported" page for old browsers (#2955)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-05-15 10:55:10 +02:00
parent a1b0ec5b10
commit f62728fd5e
4 changed files with 57 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/unsupported.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html style="height: 100%">
<head>
<title>Unsupported browser</title>
</head>
<body style="height: 100%; margin: 0;">
<table style="width: 100%; height: 100%; border-collapse: collapse;">
<tr>
<td style="vertical-align: middle; text-align: center;">
<div style="display: inline-block;">
<img src="./unsupported.png">
<h3>Your browser is not supported. Please, update it or use our <a href="http://telegram.org/dl" target="_blank">native clients</a></h3>
</div>
</td>
</tr>
</table>
</body>
</html>

BIN
public/unsupported.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

42
src/index.html
View File

@ -4,11 +4,15 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.appTitle %></title> <title>
<%= htmlWebpackPlugin.options.appTitle %>
</title>
<meta name="title" content="<%= htmlWebpackPlugin.options.appTitle %>"> <meta name="title" content="<%= htmlWebpackPlugin.options.appTitle %>">
<meta name="description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed."> <meta name="description"
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover"> content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-title" content="<%= htmlWebpackPlugin.options.appTitle %>"> <meta name="mobile-web-app-title" content="<%= htmlWebpackPlugin.options.appTitle %>">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
@ -23,14 +27,16 @@
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="<%= htmlWebpackPlugin.options.baseUrl %>"> <meta property="og:url" content="<%= htmlWebpackPlugin.options.baseUrl %>">
<meta property="og:title" content="<%= htmlWebpackPlugin.options.appTitle %>"> <meta property="og:title" content="<%= htmlWebpackPlugin.options.appTitle %>">
<meta property="og:description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed."> <meta property="og:description"
content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
<meta property="og:image" content="./<%= htmlWebpackPlugin.options.mainIcon %>.png"> <meta property="og:image" content="./<%= htmlWebpackPlugin.options.mainIcon %>.png">
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image"> <meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="<%= htmlWebpackPlugin.options.baseUrl %>"> <meta property="twitter:url" content="<%= htmlWebpackPlugin.options.baseUrl %>">
<meta property="twitter:title" content="<%= htmlWebpackPlugin.options.appTitle %>"> <meta property="twitter:title" content="<%= htmlWebpackPlugin.options.appTitle %>">
<meta property="twitter:description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed."> <meta property="twitter:description"
content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.">
<meta property="twitter:image" content="./<%= htmlWebpackPlugin.options.mainIcon %>.png"> <meta property="twitter:image" content="./<%= htmlWebpackPlugin.options.mainIcon %>.png">
<link rel="canonical" href="https://web.telegram.org/"> <link rel="canonical" href="https://web.telegram.org/">
@ -62,5 +68,31 @@
<p>Please, enable JavaScript to open the app.</p> <p>Please, enable JavaScript to open the app.</p>
</noscript> </noscript>
<div id="portals"></div> <div id="portals"></div>
<script>
function compatTest() {
var hasPromise = typeof Promise !== 'undefined';
var hasWebSockets = typeof WebSocket !== 'undefined';
var hasWebCrypto = window.crypto && typeof window.crypto.subtle !== 'undefined';
var hasObjectFromEntries = typeof Object.fromEntries !== 'undefined';
var isCompatible = hasPromise && hasWebSockets && hasWebCrypto && hasObjectFromEntries;
if (isCompatible) {
window.isCompatTestPassed = true;
return;
}
console.warn('Compatibility test report:');
console.warn('Promise', hasPromise);
console.warn('WebSocket', hasWebSockets);
console.warn('WebCrypto', hasWebCrypto);
console.warn('Object.fromEntries', hasObjectFromEntries);
document.body.innerHTML = '<iframe src="./unsupported.html" width="100%" height="100%">';
}
compatTest();
</script>
</body> </body>
</html> </html>

2
src/index.tsx
View File

@ -36,6 +36,8 @@ async function init() {
console.log('>>> INIT'); console.log('>>> INIT');
} }
if (!(window as any).isCompatTestPassed) return;
if (IS_MULTITAB_SUPPORTED) { if (IS_MULTITAB_SUPPORTED) {
subscribeToMultitabBroadcastChannel(); subscribeToMultitabBroadcastChannel();