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

Better macOS dock icon, custom icons for Beta/Dev modes (#1841)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-04-26 17:08:55 +02:00
parent b409071edc
commit 364352815d
19 changed files with 135 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/apple-touch-icon-dev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
public/icon-dev-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/icon-dev-384x384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
public/icon-dev-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
public/icon-square-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/icon-square-384x384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
public/icon-square-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
public/icon-square-dev-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/icon-square-dev-384x384.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/icon-square-dev-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
public/screenshot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

10
public/site.webmanifest
View File

@ -1,6 +1,7 @@
{ {
"name": "Telegram WebZ", "name": "Telegram Web",
"short_name": "Telegram WebZ", "short_name": "Telegram Web",
"description": "Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.",
"start_url": "./", "start_url": "./",
"gcm_sender_id": "122867383838", "gcm_sender_id": "122867383838",
"icons": [ "icons": [
@ -20,6 +21,11 @@
"type": "image/png" "type": "image/png"
} }
], ],
"screenshots" : [{
"src": "screenshot.jpg",
"sizes": "1280x802",
"type": "image/jpeg"
}],
"theme_color": "#ffffff", "theme_color": "#ffffff",
"background_color": "#ffffff", "background_color": "#ffffff",
"display": "standalone" "display": "standalone"

32
public/site_apple.webmanifest Normal file
View File

@ -0,0 +1,32 @@
{
"name": "Telegram Web",
"short_name": "Telegram Web",
"description": "Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.",
"start_url": "./",
"gcm_sender_id": "122867383838",
"icons": [
{
"src": "icon-square-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-square-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icon-square-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"screenshots" : [{
"src": "screenshot.jpg",
"sizes": "1280x802",
"type": "image/jpeg"
}],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

32
public/site_apple_dev.webmanifest Normal file
View File

@ -0,0 +1,32 @@
{
"name": "Telegram Web Beta",
"short_name": "Telegram Web Beta",
"description": "Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.",
"start_url": "./",
"gcm_sender_id": "122867383838",
"icons": [
{
"src": "icon-square-dev-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-square-dev-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icon-square-dev-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"screenshots" : [{
"src": "screenshot.jpg",
"sizes": "1280x802",
"type": "image/jpeg"
}],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

32
public/site_dev.webmanifest Normal file
View File

@ -0,0 +1,32 @@
{
"name": "Telegram Web Beta",
"short_name": "Telegram Web Beta",
"description": "Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.",
"start_url": "./",
"gcm_sender_id": "122867383838",
"icons": [
{
"src": "icon-dev-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-dev-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icon-dev-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"screenshots" : [{
"src": "screenshot.jpg",
"sizes": "1280x802",
"type": "image/jpeg"
}],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

19
src/index.html
View File

@ -4,16 +4,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Telegram</title> <title><%= htmlWebpackPlugin.options.appName %></title>
<meta name="title" content="Telegram Web"> <meta name="title" content="<%= htmlWebpackPlugin.options.appName %>">
<meta name="description" content="Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed."> <meta name="description" 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="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="Telegram WebZ"> <meta name="mobile-web-app-title" content="<%= htmlWebpackPlugin.options.appName %>">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Telegram WebZ"> <meta name="apple-mobile-web-app-title" content="<%= htmlWebpackPlugin.options.appName %>">
<meta name="application-name" content="Telegram WebZ"> <meta name="application-name" content="<%= htmlWebpackPlugin.options.appName %>">
<meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="./browserconfig.xml"> <meta name="msapplication-config" content="./browserconfig.xml">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
@ -22,29 +22,28 @@
<!-- Open Graph / Facebook --> <!-- Open Graph / Facebook -->
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://web.telegram.org/z/"> <meta property="og:url" content="https://web.telegram.org/z/">
<meta property="og:title" content="Telegram Web"> <meta property="og:title" content="<%= htmlWebpackPlugin.options.appName %>">
<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="./icon-192x192.png"> <meta property="og:image" content="./icon-192x192.png">
<!-- Twitter --> <!-- Twitter -->
<meta property="twitter:card" content="summary_large_image"> <meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://web.telegram.org/z/"> <meta property="twitter:url" content="https://web.telegram.org/z/">
<meta property="twitter:title" content="Telegram Web"> <meta property="twitter:title" content="<%= htmlWebpackPlugin.options.appName %>">
<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="./icon-192x192.png"> <meta property="twitter:image" content="./icon-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="./<%= htmlWebpackPlugin.options.appleIcon %>.png">
<link rel="icon" href="./favicon.svg" type="image/svg+xml"> <link rel="icon" href="./favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="./icon-192x192.png"> <link rel="icon" type="image/png" sizes="192x192" href="./icon-192x192.png">
<link rel="alternate icon" href="./favicon.ico" type="image/x-icon"> <link rel="alternate icon" href="./favicon.ico" type="image/x-icon">
<link rel="manifest" href="./site.webmanifest"> <link rel="manifest" id="the-manifest-placeholder" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="portals"></div> <div id="portals"></div>
</body> </body>
</html> </html>

3
src/index.tsx
View File

@ -5,6 +5,7 @@ import React from './lib/teact/teact';
import TeactDOM from './lib/teact/teact-dom'; import TeactDOM from './lib/teact/teact-dom';
import { getActions, getGlobal } from './global'; import { getActions, getGlobal } from './global';
import updateWebmanifest from './util/updateWebmanifest';
import './global/init'; import './global/init';
import { DEBUG } from './config'; import { DEBUG } from './config';
@ -25,6 +26,8 @@ if (DEBUG) {
console.log('>>> START INITIAL RENDER'); console.log('>>> START INITIAL RENDER');
} }
updateWebmanifest();
TeactDOM.render( TeactDOM.render(
<App />, <App />,
document.getElementById('root'), document.getElementById('root'),

15
src/util/updateWebmanifest.ts Normal file
View File

@ -0,0 +1,15 @@
// Original idea was found here
// https://medium.com/@alshakero/how-to-setup-your-web-app-manifest-dynamically-using-javascript-f7fbee899a61
import { DEBUG } from '../config';
import { IS_MAC_OS } from './environment';
export default function updateWebmanifest() {
const manifest = document.getElementById('the-manifest-placeholder');
if (!manifest) {
return;
}
const url = `site${IS_MAC_OS ? '_apple' : ''}${DEBUG ? '_dev' : ''}.webmanifest`;
manifest.setAttribute('href', url);
}

6
webpack.config.js
View File

@ -6,7 +6,7 @@ const {
EnvironmentPlugin, EnvironmentPlugin,
ProvidePlugin, ProvidePlugin,
} = require('webpack'); } = require('webpack');
const HtmlPlugin = require('html-webpack-plugin'); const HtmlWebackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { GitRevisionPlugin } = require('git-revision-webpack-plugin'); const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
@ -118,7 +118,9 @@ module.exports = (env = {}, argv = {}) => {
}, },
}, },
plugins: [ plugins: [
new HtmlPlugin({ new HtmlWebackPlugin({
appName: process.env.APP_ENV === 'production' ? 'Telegram Web' : 'Telegram Web Beta',
appleIcon: process.env.APP_ENV === 'production' ? 'apple-touch-icon' : './apple-touch-icon-dev',
template: 'src/index.html', template: 'src/index.html',
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({