Saltar al contenido principal

Actualización automática más fácil para aplicaciones de código abierto

· 3 lectura mínima

Hoy estamos lanzando gratis de código abierto, webservice de actualizaciones y compañero del paquete npm para habilitar actualizaciones automáticas fáciles para aplicaciones de código abierto de Electron. Este es un paso hacia empoderar a los desarrolladores de aplicaciones para pensar menos sobre despliegue y más sobre el desarrollo de experiencias de alta calidad para sus usuarios.


El nuevo módulo de actualización en acción

Facilitar la vida

Electron tiene una API de autoUpdater que le da a las aplicaciones la capacidad de consumir metadatos desde un endpoint remoto para comprobar actualizaciones, descargarlos en segundo plano e instalarlos automáticamente.

Habilitando estas actualizaciones ha sido un paso engorroso en el proceso de despliegue para muchos desarrolladores de aplicaciones Electron porque requiere que un servidor web sea desplegado y mantenido sólo para servir metadatos del historial de versiones de aplicaciones.

Hoy estamos anunciando una nueva solución para actualizaciones automáticas de aplicaciones. Si su aplicación Electron está en un repositorio público de GitHub y está usando GitHub Releases para publicar compilaciones, puedes usar este servicio para entregar actualizaciones continuas de aplicaciones a tus usuarios.

Usando el nuevo módulo

Para minimizar la configuración de tu parte, hemos creado update-electron-app, un módulo npm que se integra con el nuevo webservice update.electronjs.org.

Instala el módulo:

npm install update-electron-app

Llámala desde cualquier lugar en el proceso principal de tu aplicación:

require('update-electron-app')();

¡Listo! El módulo comprobará si hay actualizaciones al iniciar la aplicación, cada diez minutos. Cuando se encuentra una actualización, se descargará automáticamente en segundo plano, y se mostrará un diálogo cuando la actualización esté lista.

Migrando aplicaciones existentes

Las aplicaciones que ya usan la API autoUpdater de Electron también pueden usar este servicio. Para ello, puede personalizar el módulo update-electron-app o integrar directamente con update.electronjs.org.

Alternativas

Si estás usando electron-builder para empaquetar tu aplicación, puedes usar su actualizador integrado. Para más detalles, vea electron.build/auto-update.

Si tu aplicación es privada, puede que necesites ejecutar tu propio servidor de actualizaciones. Hay un número de herramientas de código abierto para esto, incluyendo Zeit's Hazel y Atlassian Nucleus. Vea el tutorial Desplegando un servidor de actualización para más información.

Thanks

Gracias a Julian Gruber por ayudar a diseñar y construir este servicio web simple y escalable. Gracias a la gente de Zeit por su servicio de código abierto Hazel, de la que dibujamos inspiración en el diseño. Gracias a Samuel Attard por las revisiones del código. Gracias a la comunidad Electron por ayudar a probar este servicio.

🌲 ¡Aquí hay un futuro perenne para las aplicaciones de Electrón!

Nuevo en Electron 2: Compras dentro de la aplicación

· 2 lectura mínima

La nueva línea de lanzamiento Electron 2.0 es empaquetada con nuevas características y arreglos. Uno de los puntos destacados de esta nueva versión principal es una nueva API inAppPurchase para el Mac App Store de Apple.


Las compras dentro de la aplicación permite que el contenido o las suscripciones se compren directamente desde las aplicaciones. Esto le proporciona a los desarrolladores una manera sencilla de adherirse al modelo de negocio freemium, donde los usuarios no deben pagar para descargar una aplicación y se les ofrecen compras opcionales dentro de la aplicación para obtener características premium, contenido adicional o suscripciones.

Esta nueva API fue agregada a Electron por el colaborador comunitario Adrien Fery para habilitar las compras dentro de la aplicación en Amanote, una aplicación de Electron para tomar notas de lecturas y conferencias. La descarga de Amanote es gratuita y permite que agregar notas claras y estructuradas en archivos PDF, con características como fórmulas matemáticas, dibujos, grabación de audios y más.

¡Desde la implementación del soporte para las compras dentro de la aplicación en la versión para Mac de Amanote, Adrien ha notado un aumento del 40% en las ventas!

Empezar

La nueva API inAppPurchase ha llegado en la última beta de Electron:

npm i -D electron@beta

La documentación para el API se puede encontrar en GitHub y Adrien ha tenido la amabilidad de escribir un tutorial sobre cómo utilizar el API. Para iniciar con la implementación de las compras dentro de la aplicación a tu proyecto, vea el tutorial.

Más mejoras en la API se encuentran en proceso y pronto llegarán en la próxima beta de Electron.

Windows podría ser el siguiente

Próximamente, Adrien espera abrir un nuevo canal de ingresos para Amanote, al agregar el soporte para las compras dentro de la aplicación con la Tienda de Microsoft en Electron. ¡Continúe en sintonía para actualizaciones sobre eso!

Webview Vulnerability Fix

· 2 lectura mínima

A vulnerability has been discovered which allows Node.js integration to be re-enabled in some Electron applications that disable it. La vulnerabilidad ha sido asignada al identificador CVE CVE-2018-1000136.


Affected Applications

An application is affected if all of the following are true:

  1. Runs on Electron 1.7, 1.8, or a 2.0.0-beta
  2. Allows execution of arbitrary remote code
  3. Disables Node.js integration
  4. Does not explicitly declare webviewTag: false in its webPreferences
  5. Does not enable the nativeWindowOption option
  6. Does not intercept new-window events and manually override event.newGuest without using the supplied options tag

Although this appears to be a minority of Electron applicatons, we encourage all applications to be upgraded as a precaution.

Mitigación

This vulnerability is fixed in today's 1.7.13, 1.8.4, and 2.0.0-beta.5 releases.

Developers who are unable to upgrade their application's Electron version can mitigate the vulnerability with the following code:

app.on('web-contents-created', (event, win) => {
win.on(
'new-window',
(event, newURL, frameName, disposition, options, additionalFeatures) => {
if (!options.webPreferences) options.webPreferences = {};
options.webPreferences.nodeIntegration = false;
options.webPreferences.nodeIntegrationInWorker = false;
options.webPreferences.webviewTag = false;
delete options.webPreferences.preload;
},
);
});

// and *IF* you don't use WebViews at all,
// you might also want
app.on('web-contents-created', (event, win) => {
win.on('will-attach-webview', (event, webPreferences, params) => {
event.preventDefault();
});
});

Más información

This vulnerability was found and reported responsibly to the Electron project by Brendan Scarvell of Trustwave SpiderLabs.

Para aprender más sobre las buenas prácticas para mantener tus aplicaciones Electron seguras, ve nuestro tutorial de seguridad.

To report a vulnerability in Electron, please email security@electronjs.org.

Please join our email list to receive updates about releases and security updates.

Website Hiccups

· 2 lectura mínima

Last week the electronjs.org site had a few minutes of downtime. If you were affected by these brief outages, we're sorry for the inconvenience. After a bit of investigation today, we've diagnosed the root cause and have deployed a fix.


To prevent this kind of downtime in the future, we've enabled Heroku threshold alerts on our app. Any time our web server accumulates failed requests or slow responses beyond a certain threshold, our team will be notified so we can address the problem quickly.

Offline Docs in Every Language

The next time you're developing an Electron app on a plane or in a subterranean coffee shop, you might want to have a copy of the docs for offline reference. Fortunately, Electron's docs are available as Markdown files in over 20 languages.

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

Offline Docs with a GUI

devdocs.io/electron is a handy website that stores docs for offline use, not just for Electron but many other projects like JavaScript, TypeScript, Node.js, React, Angular, and many others. And of course there's an Electron app for that, too. Check out devdocs-app on the Electron site.

devdocs-app

If you like to install apps without using your mouse or trackpad, give Electron Forge's install command a try:

npx electron-forge install egoist/devdocs-app

Protocol Handler Vulnerability Fix

· 2 lectura mínima

A remote code execution vulnerability has been discovered affecting Electron apps that use custom protocol handlers. This vulnerability has been assigned the CVE identifier CVE-2018-1000006.


Plataformas afectadas

Electron apps designed to run on Windows that register themselves as the default handler for a protocol, like myapp://, are vulnerable.

Such apps can be affected regardless of how the protocol is registered, e.g. using native code, the Windows registry, or Electron's app.setAsDefaultProtocolClient API.

macOS and Linux are not vulnerable to this issue.

Mitigación

We've published new versions of Electron which include fixes for this vulnerability: 1.8.2-beta.5, 1.7.12, and 1.6.17. We urge all Electron developers to update their apps to the latest stable version immediately.

Si por alguna razón no puede actualizar su versión de Electron puedes añadir -- como último argumento al llamar a aplicación. etAsDefaultProtocolClient, que evita que Chromium analice más opciones. The double dash -- signifies the end of command options, after which only positional parameters are accepted.

app.setAsDefaultProtocolClient(protocol, process.execPath, [
'--your-switches-here',
'--',
]);

Vea la app.setAsDefaultProtocolent API para más detalles.

Para obtener más información sobre las mejores prácticas para mantener sus aplicaciones Electron seguras, vea nuestro tutorial de seguridad.

If you wish to report a vulnerability in Electron, email security@electronjs.org.

Electron 2.0 y más allá - Versionado semántico

· 2 lectura mínima

Una nueva versión mayor de Electron está en desarrollo, y con ella algunos cambios en nuestra estrategia de versiones. A partir de la versión 2.0.0, Electron se adhiere estrictamente a la versión semántica.


Este cambio significa que verás el salto de la versión principal con más frecuencia, y normalmente será una actualización importante de Chromium. Las versiones de parches también serán más estables, ya que ahora sólo contendrán correcciones de errores sin características nuevas.

Incrementos de versiones major

  • Actualización de versiones de Chromium
  • Actualizaciones en la version major de Node.js
  • Cambios incompatibles con la API de Electron

Incrementos de version minor

  • Actualizaciones en la version minor de Node.js
  • Cambios compatibles de la API de Electron

Incrementos en la versión patch

  • Actualizaciones en la version patch de Node.js
  • parches de chromium relacionados con soluciones de problemas
  • Solución a fallos de Electron

Debido a los intervalos de SemVer de Electron ahora serán más significativos, recomendamos instalar Electron usando la opción de npm --save-dev, que prefijará su versión con ^, manteniéndote de forma segura con las actualizaciones espejo y parche:

npm install --save-dev electron

Para desarrolladores que solo estén interesados en la corrección de errores, debería usar el prefijo semver de tilde p. ej. ~2.0.0, que nunca introducirá nuevas características, solo corrige para mejorar la estabilidad.

Para más detalles consulte, electronjs.org/docs/tutorial/electron-versioning.

Electron's New Internationalized Website

· 7 lectura mínima

Electron has a new website at electronjs.org! We've replaced our static Jekyll site with a Node.js webserver, giving us flexibility to internationalize the site and paving the way for more exciting new features.


🌍 Translations

We've begun the process of internationalizing the website with the goal of making Electron app development accessible to a global audience of developers. We're using a localization platform called Crowdin that integrates with GitHub, opening and updating pull requests automatically as content is translated into different languages.

Electron Nav in Simplified Chinese

Though we've been working quietly on this effort so far, over 75 Electron community members have already discovered the project organically and joined in the effort to internationalize the website and translate Electron's docs into over 20 languages. We are seeing daily contributions from people all over the world, with translations for languages like French, Vietnamese, Indonesian, and Chinese leading the way.

To choose your language and view translation progress, visit electronjs.org/languages

Translations in progress on Crowdin

If you're multilingual and interested in helping translate Electron's docs and website, visit the electron/electron-i18n repo, or jump right into translating on Crowdin, where you can sign in using your GitHub account.

There are currently 21 languages enabled for the Electron project on Crowdin. Adding support for more languages is easy, so if you're interested in helping translate but you don't see your language listed, let us know and we'll enable it.

Raw Translated Docs

If you prefer to read documentation in raw markdown files, you can now do that in any language:

git clone https://github.com/electron/electron-i18n
ls electron-i18n/content

App Pages

As of today, any Electron app can easily have its own page on the Electron site. For a few examples, check out Etcher, 1Clipboard, or GraphQL Playground, pictured here on the Japanese version of the site:

GraphQL Playground

There are some incredible Electron apps out there, but they're not always easy to find, and not every developer has the time or resources to build a proper website to market and distribute their app.

Using just a PNG icon file and a small amount of app metadata, we're able to collect a lot of information about a given app. Using data collected from GitHub, app pages can now display screenshots, download links, versions, release notes, and READMEs for every app that has a public repository. Using a color palette extracted from each app's icon, we can produce bold and accessible colors to give each app page some visual distinction.

The apps index page now also has categories and a keyword filter to find interesting apps like GraphQL GUIs and p2p tools.

If you've got an Electron app that you'd like featured on the site, open a pull request on the electron/electron-apps repository.

One-line Installation with Homebrew

The Homebrew package manager for macOS has a subcommand called cask that makes it easy to install desktop apps using a single command in your terminal, like brew cask install atom.

We've begun collecting Homebrew cask names for popular Electron apps and are now displaying the installation command (for macOS visitors) on every app page that has a cask:

Installation options tailored for your platform: macOS, Windows, Linux

To view all the apps that have homebrew cask names, visit electronjs.org/apps?q=homebrew. If you know of other apps with casks that we haven't indexed yet, please add them!

🌐 A New Domain

We've moved the site from electron.atom.io to a new domain: electronjs.org.

The Electron project was born inside Atom, GitHub's open-source text editor built on web technologies. Electron was originally called atom-shell. Atom was the first app to use it, but it didn't take long for folks to realize that this magical Chromium + Node runtime could be used for all kinds of different applications. When companies like Microsoft and Slack started to make use of atom-shell, it became clear that the project needed a new name.

And so "Electron" was born. In early 2016, GitHub assembled a new team to focus specifically on Electron development and maintenance, apart from Atom. In the time since, Electron has been adopted by thousands of app developers, and is now depended on by many large companies, many of which have Electron teams of their own.

Supporting GitHub's Electron projects like Atom and GitHub Desktop is still a priority for our team, but by moving to a new domain we hope to help clarify the technical distinction between Atom and Electron.

🐢🚀 Node.js Everywhere

The previous Electron website was built with Jekyll, the popular Ruby-based static site generator. Jekyll is a great tool for building static websites, but the website had started to outgrow it. We wanted more dynamic capabilities like proper redirects and dynamic content rendering, so a Node.js server was the obvious choice.

The Electron ecosystem includes projects with components written in many different programming languages, from Python to C++ to Bash. But JavaScript is foundational to Electron, and it's the language used most in our community.

By migrating the website from Ruby to Node.js, we aim to lower the barrier to entry for people wishing to contribute to the website.

⚡️ Easier Open-Source Participation

If you've got Node.js (8 or higher) and git installed on your system, you can easily get the site running locally:

git clone https://github.com/electron/electronjs.org
cd electronjs.org
npm install
npm run dev

The new website is hosted on Heroku. We use deployment pipelines and the Review Apps feature, which automatically creates a running copy of the app for every pull request. This makes it easy for reviewers to view the actual effects of a pull request on a live copy of the site.

🙏 Thanks to Contributors

We'd like to give special thanks to all the folks around the world who have contributed their own time and energy to help improve Electron. The passion of the open-source community has helped immeasurably in making Electron a success. Thank you!

Thumbs up!

Corrección de la vulnerabilidad RCE de Chromium

· Lectura de un minuto

Se ha descubierto una vulnerabilidad de ejecución de código remoto en Google Chromium que afecta a todas las versiones recientes de Electron. Cualquier aplicación Electron que acceda a contenido remoto es vulnerable a este exploit, independientemente de si la opción sandbox está activada.

Hemos publicado dos nuevas versiones de electrón 1.7.8 y 1.6.14, las cuales incluyen una corrección para esta vulnerabilidad. Le pedimos a todos los desarrolladores de Electron a que actualicen sus aplicaciones a la versión más reciente estable ahora mismo:

npm i electron@latest --save-dev

Para obtener más información sobre las mejores prácticas para mantener sus aplicaciones Electron seguras, vea nuestro tutorial de seguridad.

Póngase en contacto con security@electronjs.org si desea reportar una vulnerabilidad en Electron.

Announcing TypeScript support in Electron

· 5 lectura mínima

The electron npm package now includes a TypeScript definition file that provides detailed annotations of the entire Electron API. These annotations can improve your Electron development experience even if you're writing vanilla JavaScript. Just npm install electron to get up-to-date Electron typings in your project.


TypeScript is an open-source programming language created by Microsoft. It's a superset of JavaScript that extends the language by adding support for static types. The TypeScript community has grown quickly in recent years, and TypeScript was ranked among the most loved programming languages in a recent Stack Overflow developer survey. TypeScript is described as "JavaScript that scales", and teams at GitHub, Slack, and Microsoft are all using it to write scalable Electron apps that are used by millions of people.

TypeScript supports many of the newer language features in JavaScript like classes, object destructuring, and async/await, but its real differentiating feature is type annotations. Declaring the input and output datatypes expected by your program can reduce bugs by helping you find errors at compile time, and the annotations can also serve as a formal declaration of how your program works.

When libraries are written in vanilla Javascript, the types are often vaguely defined as an afterthought when writing documentation. Functions can often accept more types than what was documented, or a function can have invisible constraints that are not documented, which can lead to runtime errors.

TypeScript solves this problem with definition files. A TypeScript definition file describes all the functions of a library and its expected input and output types. When library authors bundle a TypeScript definition file with their published library, consumers of that library can explore its API right inside their editor and start using it right away, often without needing to consult the library's documentation.

Many popular projects like Angular, Vue.js, node-github (and now Electron!) compile their own definition file and bundle it with their published npm package. For projects that don't bundle their own definition file, there is DefinitelyTyped, a third-party ecosystem of community-maintained definition files.

Instalación

Starting at version 1.6.10, every release of Electron includes its own TypeScript definition file. When you install the electron package from npm, the electron.d.ts file is bundled automatically with the installed package.

The safest way to install Electron is using an exact version number:

npm install electron --save-dev --save-exact

Or if you're using yarn:

yarn add electron --dev --exact

If you were already using third-party definitions like @types/electron and @types/node, you should remove them from your Electron project to prevent any collisions.

The definition file is derived from our structured API documentation, so it will always be consistent with Electron's API documentation. Just install electron and you'll always get TypeScript definitions that are up to date with the version of Electron you're using.

Uso

For a summary of how to install and use Electron's new TypeScript annotations, watch this short demo screencast:

If you're using Visual Studio Code, you've already got TypeScript support built in. There are also community-maintained plugins for Atom, Sublime, vim, and other editors.

Once your editor is configured for TypeScript, you'll start to see more context-aware behavior like autocomplete suggestions, inline method reference, argument checking, and more.

Method autocompletion

Method reference

Argument checking

Getting started with TypeScript

Si eres nuevo en TypeScript y quieres obtener más información, este vídeo introductorio de Microsoft ofrece una descripción general de la razón por la que se creó el lenguaje, cómo funciona, cómo usarlo y hacia dónde se dirige.

There's also a handbook and a playground on the official TypeScript website.

Because TypeScript is a superset of JavaScript, your existing JavaScript code is already valid TypeScript. Esto significa que puedes hacer una transición gradual de un proyecto de JavaScript de existente a TypeScript, rociando en las nuevas características del lenguaje según sea necesario.

Thanks

This project would not have been possible without the help of Electron's community of open-source maintainers. Thanks to Samuel Attard, Felix Rieseberg, Birunthan Mohanathas, Milan Burda, Brendan Forster, and many others for their bug fixes, documentation improvements, and technical guidance.

Asistencia

If you encounter any issues using Electron's new TypeScript definition files, please file an issue on the electron-typescript-definitions repository.

Happy TypeScripting!

Proyecto de la semana: Jasper

· 6 lectura mínima

Esta semana hemos entrevistado al creador de Jasper, una herramienta basada en Electron para administrar las notificaciones de GitHub.


¡Hola! ¿Quién eres?

I'm Ryo Maruyama, a software developer in Japan. I am developing Jasper and ESDoc.

¿Qué es Jasper?

Jasper es un lector de problemas flexible y potente para GitHub. It supports issues and pull requests on github.com and GitHub Enterprise.

Jasper App Screenshot

Why did you make it?

When people use GitHub in their job or OSS activities, they tend to receive many notifications on a daily basis. As a way to subscribe to the notifications, GitHub provides email and web notifications. I used these for a couple of years, but I faced the following problems:

  • It's easy to overlook issues where I was mentioned, I commented, or I am watching.
  • I put some issues in a corner of my head to check later, but I sometimes forget about them.
  • To not forget issues, I keep many tabs open in my browser.
  • It's hard to check all issues that are related to me.
  • It's hard to grasp all of my team's activity.

I was spending a lot of time and energy trying to prevent those problems, so I decided to make an issue reader for GitHub to solve these problems efficiently, and started developing Jasper.

Who's using Jasper?

Jasper is used by developers, designers, and managers in several companies that are using GitHub. Of course, some OSS developers also are using it. And it is also used by some people at GitHub!

How does Jasper work?

Once Jasper is configured, the following screen appears. From left to right, you can see "streams list", "issues list" and "issue body".

Jasper Start Screen

This "stream" is the core feature of Jasper. For example, if you want to see "issues that are assigned to @zeke in the electron/electron repository", you create the following stream:

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.

Jasper Start Screen 3

What can we do with streams?

I will introduce what kind of conditions can be used for stream.

Users and Teams

StreamProblemas
mentions:cat mentions:dogIssues that mention user cat or dog
author:cat author:dogIssues created by user cat or dog
assignee:cat assignee:dogIssues assigned to cat or dog
commenter:cat commenter:dogIssues that cat or dog commented on
involves:cat involves:dogIssues that "involve" cat or bob
team:animal/white-cat team:animal/black-dogIssues that animal/white-cat or animal/black-dog are mentioned in

involves means mention, author, assignee or commenter

Repositories and Organizations

StreamProblemas
repo:cat/jump repo:dog/runIssues in cat/jump or dog/run
org:electron user:cat user:dogIssues in electron, cat or dog

org is same as user

Atributos

StreamProblemas
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1Issues that are attached to v1.0.0 or v1.0.1 in cat/jump
repo:cat/jump label:bug label:blockerIssues that are attached bug and blocker in cat/jump
electron OR atomshellIssues that include electron or atomshell

Review Status

StreamProblemas
is:pr review:requiredIssues that are required review in cat/jump
is:pr review-requested:catIssues that are requested review by cat.
But these are not reviewed yet.
is:pr reviewed-by:catIssues that are reviewed by cat

As you may have noticed by looking at these, streams can use GitHub's search queries. For details on how to use streams and search queries, see the following URLs.

Jasper also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.

Is Jasper a paid product? How much does it cost?

Jasper is $12. However you can use the free trial edition for 30 days.

Why did you choose to build Jasper on Electron?

I like the following aspects of Electron:

  • Apps can be developed with JavaScript/CSS/HTML.
  • Apps can be built for Windows, Mac, and Linux platforms.
  • Electron is actively developed and has a large community.

These features enable rapid and simple desktop application development. It is awesome! If you have any product idea, you should consider using Electron by all means.

What are some challenges you've faced while developing Jasper?

I had a hard time figuring out the "stream" concept. Al principio consideré usar la API de Notificaciones de GitHub. However I noticed that it does not support certain use cases. Después de eso consideré usar la API de problemas y API de Pull Requests, además de la API de Notificación. But it never became what I wanted. Entonces mientras pensaba en varios métodos, me di cuenta de que el sondeo de la API de búsqueda de GitHub ofrecería la mayor flexibilidad. It took about a month of experimentation to get to this point, then I implemented a prototype of Jasper with the stream concept in two days.

Note: The polling is limited to once every 10 seconds at most. This is acceptable enough for the restriction of GitHub API.

What's coming next?

I have a plan to develop the following features:

  • A filtered stream: A stream has some filtered stream that filter issues in the stream. It is like as view of SQL.
  • Multiple accounts: you will be able to use both github.com and GHE
  • Improve performance: For now the loading a issue in WebView is low speed than normal browser.

Follow @jasperappio on Twitter for updates.