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

General: Fix compatibility on old browsers (#3186)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-05-28 14:32:09 +02:00
parent 233fff7eb5
commit 227f706a0c
4 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
public/unsupported.html
View File

@ -2,6 +2,18 @@
<html style="height: 100%"> <html style="height: 100%">
<head> <head>
<title>Unsupported browser</title> <title>Unsupported browser</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!--[if IE]>
<style>
.hide-for-ie {
display: none;
}
</style>
<![endif]-->
</head> </head>
<body style="height: 100%; margin: 0;"> <body style="height: 100%; margin: 0;">
<table style="width: 100%; height: 100%; border-collapse: collapse;"> <table style="width: 100%; height: 100%; border-collapse: collapse;">
@ -9,10 +21,18 @@
<td style="vertical-align: middle; text-align: center;"> <td style="vertical-align: middle; text-align: center;">
<div style="display: inline-block;"> <div style="display: inline-block;">
<img src="./unsupported.png"> <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> <h3>Your browser is not supported</h3>
<p>Please, update it or use our <a href="http://telegram.org/dl" target="_blank">native clients</a>.</p>
<a class="hide-for-ie" onclick="forceLoad()" href="#">I'm Feeling Lucky</a>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
<script>
function forceLoad() {
window.localStorage.setItem('tt-ignore-compat', true);
window.top.location.reload();
}
</script>
</body> </body>
</html> </html>

6
src/components/middle/MiddleColumn.tsx
View File

@ -25,7 +25,9 @@ import {
TMP_CHAT_ID, TMP_CHAT_ID,
MAX_SCREEN_WIDTH_FOR_EXPAND_PINNED_MESSAGES, MAX_SCREEN_WIDTH_FOR_EXPAND_PINNED_MESSAGES,
} from '../../config'; } from '../../config';
import { IS_ANDROID, IS_IOS, MASK_IMAGE_DISABLED } from '../../util/windowEnvironment'; import {
IS_ANDROID, IS_IOS, IS_TRANSLATION_SUPPORTED, MASK_IMAGE_DISABLED,
} from '../../util/windowEnvironment';
import { DropAreaState } from './composer/DropArea'; import { DropAreaState } from './composer/DropArea';
import { import {
selectCanAnimateInterface, selectCanAnimateInterface,
@ -608,7 +610,7 @@ function MiddleColumn({
/> />
<SeenByModal isOpen={isSeenByModalOpen} /> <SeenByModal isOpen={isSeenByModalOpen} />
<ReactorListModal isOpen={isReactorListModalOpen} /> <ReactorListModal isOpen={isReactorListModalOpen} />
<MessageLanguageModal isOpen={isMessageLanguageModalOpen} /> {IS_TRANSLATION_SUPPORTED && <MessageLanguageModal isOpen={isMessageLanguageModalOpen} />}
</div> </div>
</Transition> </Transition>

14
src/index.html
View File

@ -77,16 +77,18 @@
var isCompatible = hasPromise && hasWebSockets && hasWebCrypto && hasObjectFromEntries; var isCompatible = hasPromise && hasWebSockets && hasWebCrypto && hasObjectFromEntries;
if (isCompatible) { if (isCompatible || (window.localStorage && window.localStorage.getItem('tt-ignore-compat'))) {
window.isCompatTestPassed = true; window.isCompatTestPassed = true;
return; return;
} }
console.warn('Compatibility test report:'); if (window.console && console.warn) {
console.warn('Promise', hasPromise); console.warn('Compatibility test report:');
console.warn('WebSocket', hasWebSockets); console.warn('Promise', hasPromise);
console.warn('WebCrypto', hasWebCrypto); console.warn('WebSocket', hasWebSockets);
console.warn('Object.fromEntries', hasObjectFromEntries); console.warn('WebCrypto', hasWebCrypto);
console.warn('Object.fromEntries', hasObjectFromEntries);
}
document.body.innerHTML = '<iframe src="./unsupported.html" width="100%" height="100%">'; document.body.innerHTML = '<iframe src="./unsupported.html" width="100%" height="100%">';
} }

2
src/lib/fasterdom/stricterdom.ts
View File

@ -60,6 +60,7 @@ export function setHandler(handler?: ErrorHandler) {
function setupLayoutDetectors() { function setupLayoutDetectors() {
Object.entries(LAYOUT_CAUSES).forEach(([name, causes]) => { Object.entries(LAYOUT_CAUSES).forEach(([name, causes]) => {
const entity = window[name as Entities]; const entity = window[name as Entities];
if (!entity) return;
const prototype = typeof entity === 'object' ? entity : entity.prototype; const prototype = typeof entity === 'object' ? entity : entity.prototype;
if ('props' in causes) { if ('props' in causes) {
@ -100,6 +101,7 @@ function setupLayoutDetectors() {
function clearLayoutDetectors() { function clearLayoutDetectors() {
Object.entries(LAYOUT_CAUSES).forEach(([name, causes]) => { Object.entries(LAYOUT_CAUSES).forEach(([name, causes]) => {
const entity = window[name as Entities]; const entity = window[name as Entities];
if (!entity) return;
const prototype = typeof entity === 'object' ? entity : entity.prototype; const prototype = typeof entity === 'object' ? entity : entity.prototype;
if ('props' in causes) { if ('props' in causes) {