Chris Griffith and

Leif Wells

Electron: From Beginner to Pro

Learn to Build Cross Platform Desktop Applications using Github’s Electron

Chris Griffith

San Diego, California, USA

Leif Wells

Atlanta, Georgia, USA

Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub via the book’s product page, located at www.apress.com/9781484228258 . For more detailed information, please visit http://www.apress.com/source-code .

ISBN 978-1-4842-2825-8

e-ISBN 978-1-4842-2826-5

https://doi.org/10.1007/978-1-4842-2826-5

Library of Congress Control Number: 2017959877

© Chris Griffith, Leif Wells 2017

This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed.

Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.

While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.

Printed on acid-free paper

Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

Contents

  1. Chapter 1:​ Welcome to Electron
    1. What Is Electron?​
      1. What Is Node?​
      2. What Is Chromium?​
    2. Who Is Using Electron?​
    3. What Do I Need to Know?​
    4. Why Should I Choose Electron?​
      1. Electron’s Advantages
      2. Beyond the Sandbox
      3. Offline First Design
    5. How Does Electron Work?​
      1. The Main Process
      2. The Render Process
      3. Other Solutions
    6. Summary
  2. Chapter 2:​ Installing Electron
    1. Before Installing
    2. Installing Node
      1. Installing Node for macOS
      2. Installing Node on Windows
    3. Installing Git on macOS
      1. Installing Node on Windows
      2. Installing Git on Windows
    4. Installing Electron
    5. Summary
  3. Chapter 3:​ The Electron Quick Start
    1. Getting the Quick Start Code
    2. Updating the Project to Make It Yours
    3. The Main Process File
    4. The Quick Start’s Renderer Process
    5. Summary
  4. Chapter 4:​ BrowserWindow Basics
    1. Getting Started
      1. Disabling Chrome DevTools
    2. Update Code to Use the ready-to-show Event
    3. BrowserWindow Options Argument
      1. Basic Window Properties (width, height, minWidth, minHeight, maxWidth, maxHeight)
      2. The center, x and y Properties
      3. The resizable and movable Properties
      4. The title Property
    4. Other Window Types
      1. Frameless Windows
      2. Transparent Windows
    5. Summary
  5. Chapter 5:​ Adding Custom Menus
    1. Getting Started
    2. Menu Templates
    3. macOS’s Application Menu
    4. Defining Keyboard Shortcuts and Menu Item Roles
    5. Creating Submenus and Checkmarks
    6. Completing the macOS’s Application Menu
      1. macOS’s Window Menu Modifications
    7. Contextual Menus
    8. Summary
  6. Chapter 6:​ Understanding the IPC Module
    1. Getting Started
    2. Synchronous IPC Messaging
    3. Asynchronous IPC Messaging
    4. Managing Event Listeners
    5. Summary
  7. Chapter 7:​ Working with the Dialog Module
    1. Getting Started
    2. The File Open Dialog
      1. Additional Open Dialog Properties
      2. Selecting a File
      3. The BrowserWindow Parameter
      4. A Brief Look at Node’s FS Module
      5. Working Directories
    3. The File Save Dialog
    4. The Message Dialog
      1. Custom Icons
      2. Handling the Response
    5. Error Dialogs
    6. Summary
  8. Chapter 8:​ WebContents, Screens, and Locales
    1. Getting Started
    2. Discovering Electron’s WebContents
    3. A Little Setup Before We Begin
    4. WebContents Events
    5. The “did-start-loading” Event
    6. The capturePage Method
    7. The printToPDF Method
    8. Getting Information about Screens
    9. Finding Locales
    10. Summary
  9. Chapter 9:​ The Dock Icon on macOS
    1. Getting Started
    2. The Application’s Dock Icon
    3. Making the Dock Icon Bounce
    4. Changing the Dock Icon
    5. Dock Icon Badges
    6. Summary
  10. Chapter 10:​ Shell
    1. Getting Started
    2. Making the System Alert Sound
    3. Showing Files in the Operating System
    4. Opening Files with the Operating System
    5. Opening HTML Files with the Operating System
    6. Summary
  11. Chapter 11:​ Online/​Offline Detection
    1. Getting Started
    2. Using the Renderer Process to Detect Online Status
    3. Pros and Cons of the Renderer-Only Solution
    4. The Main Process-Only Solution
    5. Pros and Cons of a Main Process-Only Approach
    6. The Combined Approach
    7. Summary
  12. Chapter 12:​ Advanced BrowserWindow
    1. Loading an Application
    2. Splash Window
    3. Installing the Quick Start
    4. Setting Up a Splash Window
    5. Creating the Splash Window File
    6. Showing the Version in Our Splash Window
    7. Loading the Main Window
    8. Setting Up the Main Window
    9. Summary
  13. Chapter 13:​ Debugging Your Electron Application
    1. Chromium’s Dev Tools
    2. Debugging the Main Process
      1. Debugging the Main Process in VS Code
      2. Debugging the Main Process in node-inspector
    3. Chrome DevTools Extensions
    4. Devtron
      1. Require Graph
      2. Event Listeners
      3. IPC Monitor
      4. Linter
      5. Accessibility
    5. Spectron
    6. Summary
  14. Chapter 14:​ Testing with Spectron
    1. Getting Started
    2. Adding a Test File
    3. Using Spectron’s browserWindow API
    4. Testing the Size of the browserWindow
    5. Testing Interactions in the Renderer Process
    6. Make the Example Interactive
    7. Summary
  15. Chapter 15:​ Building Your Application
    1. Installing Electron Builder
      1. Adjusting your Build Directories
      2. Updating the package.​json file
      3. Building for Windows on macOS
      4. Building for Linux on macOS
    2. Configuration Options
    3. Testing Our First Build
    4. Configuring the App Icon
      1. Configuring the macOS DMG
      2. Configuring the Windows Installer
    5. Summary
  16. Chapter 16:​ Auto Updating Your Application
    1. Auto Updating macOS
      1. Auto Update Server Options
      2. Testing Our Auto Update
      3. Signing Your Application
      4. Building the Application - macOS
      5. Generating an Update
    2. Auto Updating Windows Applications
      1. Signing Your Windows Application
      2. Customizing the Squirrel Installer
      3. Generating Our First Build
      4. Generating an Update
      5. Alternative Solutions
    3. Summary
  17. Chapter 17:​ Additional Resources
    1. Additional Electron APIs
      1. desktopCapturer
      2. crashReporter
      3. ClientRequest
      4. net
      5. DownloadItem
    2. Electron Forge
    3. Community Resources
    4. Summary
  18. Index

About the Authors and About the Technical Reviewer

About the Authors

A437153_1_En_BookFrontmatter_Figb_HTML.jpg

Chris Griffith is a User Experience Lead at a home automation and security company and is also an instructor at the University of California, San Diego Extension, teaching mobile application development. He is also an Adobe Community Professional specializing in PhoneGap/Cordova and Experience Design. Chris is regularly invited to speak at conferences such as Fluent, Adobe MAX, and ngConf. He has developed several mobile applications, a variety of code-hinters, and ConfiGAP for PhoneGap Build. In addition, he has served as a technical reviewer for several publications and written for uxmag.com. In his spare time, Chris spends time with his family, sea kayaking, hiking, and drinking craft beer with friends. You can follow him on Twitter @chrisgriffith or at chrisgriffith.wordpress.com.

A437153_1_En_BookFrontmatter_Figc_HTML.jpg

Leif Wells is a Web and Mobile Application Developer working as a contractor from his home in Atlanta, Georgia. He currently enjoys working with Electron, the Ionic and Angular stack, and has recently become obsessed with automated testing.

His experiences working as a team member on large Enterprise-level projects as well as a single developer on small products have matured him into a seasoned professional. Leif has organized and supported technical communities both online and in Atlanta, and often speaks at conferences and user groups.

Leif enjoys good movies, great sushi, and hanging out with his canine companion, Miss Bonnie. He has been known to blog irregularly at https://leifwells.github.io/ and can be found on Twitter as @leifwells.

About the Technical Reviewer

A437153_1_En_BookFrontmatter_Figd_HTML.jpg

Lily Madar is a Creative Technologist from London, UK, who, for the last decade, has worked with various web technologies and frameworks for a range of digital creative and media agencies. Some of her work includes interactive displays powered by web technologies and can be seen in the British Museum or the Serpentine Gallery (both in London).

Outside of work, she is an active hackathon participant with recent wins at TADHack and GeoHack.

She also writes tutorials exploring the latest web and digital trends and runs hardware workshops for beginners.

When not coding, she is experimenting with Arduino circuits, crochet, and other crafts, making her a full-stack developer in hardware, software, and yarn-ware!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.131.25