Electron Wrapper to create Desktop Apps from offline-capable Progressive Web Apps
A sample wrapper app to package your Progressive Web App into a Desktop Application using Electron, Electon-Builder and Photon.
Drafted for the Desktop-version of my Leasing Calculator Web App using React, Redux, Materialize.css and a lot of Offline-First love over at leasingrechnen.at.
Check out my other projects:
npm install
to get the dependenciesnpm run electron
to start the appsrc/assets
.app/app_menu_template.js
to use your own Menu Items.app/constants.js
for localizing your Strings (this project is German by default).
app/constants.js
, check the settings
and mainWindow
sections too.src/offline.html
and src/loader.html
, their corresponding images and styles in src/res
.You can create a custom shell for your WebApp for each OS, to give it a more native look and feel or add functionality you can't supply from your WebApp, using Photon.
src
directory and find shellMacOS.html
, shellWindows.html
or shellLinux.html
to see a sample implementation of the shell.
src/shellMacOS-withMenu.html
./index.js
.constants.json -> settings
:
usePhotonKitShell
(macOS), useWindowsShell
or useLinuxShell
and enable accordingly.nodeIntegrationEnabled
to true.frame
to false for macOS. For other OS', it depends on how you create your shell. I wouldn't recommend disabling the frame on Windows, as this hides your native Menu completely.Electron-PWA-Wrapper comes with electron-builder preconfigured for macOS (dmg, mas), Linux (AppImage) and Windows (Appx + Portable).
package.json
and put your App's values in the build sectionbuild
directory.npm run build
or ./node_modules/.bin/electron-builder build
to start the build. Your app files will be located in the dist
folder.embedded.provisionprofile
.package.json
->build
-> appId, productName, copyright and mac->category
build
->icon.iconset, replace all the icons in the folder. Sizes and namings are important!build
and run the following command to create your icon.icns
from the iconset you've just populated.
iconutil -c icns icon.iconset
build/Info.plist
and build/entitlements.mas.plist
and replace YourTeamId and YourPackageId.
npm run build
from the terminal.
sudo ./node_modules/.bin/electron-builder build
instead.windows-build-tools
installed.package.json
->build
->win
-> legalTrademarks and publisherName, and all the attributes in build
->appx
.build
: icon.ico
build/appx
: replace all the icons in the folder. Sizes and namings are important!npm run build
from the command line (preferably from PowerShell).sudo apt install -y icnsutils graphicsmagick
build/icon.icns
like described in Build for macOS App Store. Also, don't forget to place your Tray- and App-Icons into src/assets
.package.json
->build
->linux
and ->appImage
.npm run build
and find your .AppImage in the dist
folder.chmod a+x *.AppImage
or to change permissions via GUI to make the file executable.GNU General Public License v3.0 - if you use it, we wanna see it! Other licensing options are available on inquiry.