Top Related Projects
Telegram Desktop messaging app
Telegram for Android source
Telegram-iOS
Cross-platform library for building Telegram clients
Experimental Telegram web client with tdlib, webassembly and react js under the hood
Telegram Web A, GPL v3
Quick Overview
Webogram is an open-source web application that provides a Telegram messenger client for browsers. It allows users to access their Telegram accounts and communicate with contacts directly through a web interface, without the need for a standalone application.
Pros
- Cross-platform compatibility, accessible from any device with a modern web browser
- No installation required, providing instant access to Telegram messaging
- Open-source nature allows for community contributions and customizations
- Supports most core Telegram features, including messaging, file sharing, and group chats
Cons
- May have limited access to some advanced Telegram features compared to official apps
- Performance might be slower than native applications, especially for resource-intensive tasks
- Dependent on browser capabilities and limitations
- Potential security concerns as messages are processed in the browser environment
Getting Started
To use Webogram:
- Visit the official Webogram website or a self-hosted instance.
- Enter your phone number associated with your Telegram account.
- Receive and enter the authentication code sent to your Telegram app.
- Once logged in, you can start messaging and using Telegram features through the web interface.
For developers who want to set up their own instance:
- Clone the repository:
git clone https://github.com/zhukov/webogram.git
- Install dependencies:
cd webogram npm install
- Build the project:
npm run build
- Serve the built files using a web server of your choice.
Note: Ensure you comply with Telegram's terms of service and API usage guidelines when deploying your own instance.
Competitor Comparisons
Telegram Desktop messaging app
Pros of tdesktop
- Native desktop application with better performance and system integration
- Supports more features like voice calls and secret chats
- Offers end-to-end encryption for enhanced security
Cons of tdesktop
- Requires installation and updates, unlike web-based Webogram
- Limited cross-platform compatibility compared to Webogram's browser accessibility
- Larger file size and resource consumption
Code Comparison
tdesktop (C++):
void MainWindow::showSettings() {
if (_settings) {
_settings->showSettings();
}
}
Webogram (JavaScript):
AppSettingsModalController.prototype.showSettings = function () {
$modal.open({
templateUrl: templateUrl('settings_modal'),
controller: 'AppSettingsModalController',
windowClass: 'settings_modal_window mobile_modal'
});
};
Both repositories implement Telegram clients, but tdesktop is a native desktop application while Webogram is a web-based client. tdesktop offers more features and better performance, but Webogram provides easier access across platforms through web browsers. The code snippets show different approaches to implementing settings functionality, with tdesktop using C++ for desktop integration and Webogram using JavaScript for web-based interactions.
Telegram for Android source
Pros of Telegram
- Native Android app with better performance and integration
- Full access to device features like push notifications and contacts
- More secure, with end-to-end encryption for secret chats
Cons of Telegram
- Limited to Android platform
- Requires installation and updates through app stores
- Less accessible for quick use on various devices
Code Comparison
Telegram (Java):
public void sendMessage(String text) {
SendMessage message = new SendMessage()
.setChatId(chatId)
.setText(text);
try {
execute(message);
} catch (TelegramApiException e) {
e.printStackTrace();
}
}
Webogram (JavaScript):
AppMessagesManager.sendText(peerID, text).then(function (sentMessage) {
$rootScope.$broadcast('history_update', {peerID: peerID});
});
Key Differences
- Telegram is a native Android app, while Webogram is a web-based client
- Telegram offers platform-specific features, Webogram provides cross-platform accessibility
- Telegram uses Java for Android development, Webogram uses JavaScript for web implementation
- Telegram has stricter security measures, Webogram focuses on ease of use and accessibility
Both projects aim to provide Telegram messaging functionality, but they target different platforms and use cases. Telegram offers a more robust, native experience for Android users, while Webogram provides a lightweight, web-based alternative accessible from various devices and browsers.
Telegram-iOS
Pros of Telegram-iOS
- Native iOS app with better performance and integration
- Full access to iOS-specific features and APIs
- Official repository maintained by Telegram team
Cons of Telegram-iOS
- Limited to iOS platform, not cross-platform like Webogram
- Requires more development resources for platform-specific code
- Larger codebase and potentially more complex maintenance
Code Comparison
Telegram-iOS (Swift):
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// iOS-specific initialization
return true
}
}
Webogram (JavaScript):
angular.module('myApp', ['myApp.controllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'HomeCtrl'});
// Web-based routing and configuration
}]);
The code snippets highlight the fundamental differences in approach:
- Telegram-iOS uses native iOS code (Swift) and UIKit framework
- Webogram utilizes web technologies (JavaScript, AngularJS) for cross-platform compatibility
Both repositories offer Telegram functionality, but Telegram-iOS provides a native experience for iOS users, while Webogram offers broader platform support through web technologies. The choice between them depends on specific project requirements and target audience.
Cross-platform library for building Telegram clients
Pros of td
- Native implementation in C++, offering better performance and lower resource usage
- Supports more Telegram features and APIs, providing a more comprehensive library
- Cross-platform compatibility, allowing development for various operating systems
Cons of td
- Steeper learning curve due to C++ implementation
- Requires compilation and integration into projects, which can be more complex
- Less suitable for web-based applications compared to Webogram
Code Comparison
td (C++):
auto client = td::Client::create();
client->send({td_api::make_object<td_api::setAuthenticationPhoneNumber>("<phone_number>")});
Webogram (JavaScript):
MtpApiManager.invokeApi('auth.sendCode', {
phone_number: '<phone_number>',
api_id: Config.App.id,
api_hash: Config.App.hash
});
Summary
td is a powerful, native Telegram library with broad platform support and extensive API coverage. It excels in performance but requires more setup and C++ knowledge. Webogram, being web-based, offers easier integration for web applications but may have limitations in features and performance compared to td. The choice between them depends on the specific project requirements and development environment.
Experimental Telegram web client with tdlib, webassembly and react js under the hood
Pros of telegram-react
- Built with modern React, offering better performance and maintainability
- More active development and frequent updates
- Supports more recent Telegram features and UI improvements
Cons of telegram-react
- Smaller community and potentially fewer contributors
- May have less comprehensive documentation compared to Webogram
- Could be less stable due to more frequent changes and updates
Code Comparison
telegram-react (using React hooks):
const [messages, setMessages] = useState([]);
useEffect(() => {
fetchMessages().then(setMessages);
}, []);
Webogram (using AngularJS):
$scope.messages = [];
$http.get('/api/messages').then(function(response) {
$scope.messages = response.data;
});
Summary
telegram-react offers a more modern development experience with React, frequent updates, and support for newer Telegram features. However, Webogram may have a larger community and potentially more stable codebase due to its longer history. The code comparison highlights the difference in frameworks, with telegram-react using React hooks for state management and side effects, while Webogram relies on AngularJS's scope and HTTP service.
Telegram Web A, GPL v3
Pros of telegram-tt
- More recent and actively maintained project
- Utilizes modern web technologies and frameworks
- Better performance and responsiveness
Cons of telegram-tt
- Smaller community and less established codebase
- May have fewer features compared to the more mature webogram
Code Comparison
telegram-tt (TypeScript)
const handleMessage = (message: ApiMessage) => {
if (message.content.text) {
renderTextMessage(message.content.text);
} else if (message.content.photo) {
renderPhotoMessage(message.content.photo);
}
};
webogram (JavaScript)
function handleMessage(message) {
if (message._ == 'message') {
if (message.media && message.media._ == 'messageMediaPhoto') {
renderPhoto(message.media.photo);
} else {
renderText(message.message);
}
}
}
The code comparison shows that telegram-tt uses TypeScript and has a more modern, type-safe approach to handling messages. It also demonstrates a cleaner structure for content type checking. Webogram, being older, uses plain JavaScript and relies on more nested conditionals for message type determination.
Both projects aim to provide web-based Telegram clients, but telegram-tt represents a more recent implementation with potential advantages in terms of maintainability and performance. However, webogram may offer a more stable and feature-complete experience due to its longer development history.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Project is DEPRECATED
The project was superseeded by 2 new official Telegram Web Apps:
- https://github.com/morethanwords/tweb - Telegram Web K, based on source code of Webogram, rewritten in TypeScript.
- https://github.com/Ajaxy/telegram-tt - Telegram Web Z, based on its own Teact framework (which re-implements React paradigm), uses a custom version of GramJS as an MTProto implementation. Written also in Typescript.
Webogram â Telegram Web App
Telegram offers great apps for mobile communication. It is based on the MTProto protocol and has an Open API. I personally like Telegram for its speed and cloud-support (that makes a web app possible, unlike in the case of WA and others).
MTProto data can be carried over HTTP (SSL is also supported), so this project is my take at creating one.
That said, I'm using this app myself and I'd like to share its sources, so anyone can contribute to the development. Any help is welcome!
Interface
Here are some screenshots of the interface:
Unsupported at the moment
- Secret chats
- Black list
- ...
Maintained locations
Description | URL | Type |
---|---|---|
Online Web-version (hosted on Telegram servers) | https://web.telegram.org/ | hosted |
Online Web-version (hosted on GitHub pages) | https://zhukov.github.io/webogram | hosted |
Chrome Web Store | https://chrome.google.com/webstore/detail/telegram/ clhhggbfdinjmjhajaheehoeibfljjno | packed |
Firefox & FirefoxOS Marketplace | https://marketplace.firefox.com/app/telegram | packed |
Hosted version: the app is downloaded via HTTPS as a usual website. Will be available offline due to application cache.
Packed version: the app is downloaded at once in a package via HTTPS. The package is updated less frequently than the Web-version.
All of the apps above are submitted and maintained by @zhukov, so feel free to use them and report bugs here. Please do not report bugs which are only reproducible in different locations.
Technical details
The app is based on the AngularJS JavaScript framework, and written in pure JavaScript. jQuery is used for DOM manipulations, and Bootstrap as the CSS-framework.
Running locally
The project repository is based on angularjs-seed and includes gulp tasks, so it's easy to launch the app locally on your desktop. Install node.js.
Install dependencies with:
npm install
Optionally, run the following commands in the project directory to install gulp globally:
sudo npm install -g gulp
This will install all the needed dependencies.
Running web-server
Just run npm start
(gulp watch
) to start the web server and the livereload task.
Open http://localhost:8000/app/index.html in your browser.
Running as Chrome Packaged App
To run this application in Google Chrome as a packaged app, open this URL (in Chrome): chrome://extensions/
, then tick "Developer mode" and press "Load unpacked extension...". Select the downloaded app
folder and Webogram should appear in the list.
Run npm start
(gulp watch
) to watch for file changes and automatically rebuild the app.
Running as Firefox OS App
To run this application in Firefox as a packaged app, open "Menu" -> "Developer" -> "WebIDE" (or hit Shift + F8
). Choose "Open packaged app" from the Project menu and select the app
folder.
Run npm start
(gulp watch
) to watch for file changes and automatically rebuild the app.
Running in production
Run npm run clean
(gulp clean
), then npm run build
(gulp publish
) to build the minimized production version of the app. Copy dist
folder contents to your web server. Don't forget to set X-Frame-Options SAMEORIGIN
header (docs).
Third party libraries
Besides the frameworks mentioned above, other libraries are used for protocol and UI needs. Here is the short list:
Many thanks to all these libraries' authors and contributors. A detailed list with descriptions and licenses is available here.
Licensing
The source code is licensed under GPL v3. License is available here.
Contribute
Top Related Projects
Telegram Desktop messaging app
Telegram for Android source
Telegram-iOS
Cross-platform library for building Telegram clients
Experimental Telegram web client with tdlib, webassembly and react js under the hood
Telegram Web A, GPL v3
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot