Sometimes, a web frontend developer want to build a desktop app but don’t want to try Qt or platform native ui framework or don’t want to waste time on long term of learning new programming language. He just want to transform his web app to desktop version. In this situation, Electron become the best choose.
Electron make website “go offline”. How Electron-packager basically work:
You can build desktop app like build a website. And also Electron offer some awesome api help us to take advantage of native platform features.
But something seem to be redundant. Chrome build on chromium and Chrome have a full functional chromium. Every time users download this standalone app, also download a copy of chromium so that one user may have multi copy of the same stuff while app using electron-package to bundle stuff together. App become huge because chromium need a big space that handle render html/css and run V8 engine for JavaScript. It will waste user’s hard drive space. (There are somethings hard to handle to share the same Electron core between apps, learn more)
And you will wonder: why not just take advantage of users’ Chrome. Almost every Windows Users have a Chrome or must have an Edge (new Edge build on chromium too).
There is no soluetion in the market until PWA standard become a thing in 2015. And this feature just build into chromium core nowadays. If a web app offer PWA feature, you can use it offline (most of the cases). And Apple do it in own way, the “Apple Clips” from 2020.
But how to make it work?
First of all, you need to add a manifest reference inside your web html head. (You can search “manifest.json” in Google to get manifest generator that don’t need to write this manually)
So that chromium can create a shortcut on native platform. What’s your app icon? Where’s the address for first open? There are also some other settings for your app basic actions declared in manifest (sounded like Android).
But only these are not enough. When you added the app but disconnected from internet, you still can’t open the app. You just create a website shortcut for users.
So you also need a “fake” website server like electron does so that user can still access your website when he go offline. JS worker is here.
Chromium have a specific place for a specific JS worker, it’s the serviceWorker. If you register serviceWorker with a JS source code, this worker will be treated differently. Any network requests will be sent via this worker globally and it will be cached by chromium automatically and run at first every time you visit this website. This worker also can access the local storage that chromium offer for every website. Now, you need to take advantage of this worker to cache your website resource. If user’s device go offline, use this worker need to return cached website resource that make the website work offline.
In many modern framework, you do not need to know how to implement serviceWorker that framework will generate it for you, like React, Angular or Flutter. The serviceWorker behavior only depend on the JS code that register in serviceWorker. If you are not using framework and there are also some tool that help you build serviceWorker like workbox. And you still can modify “fetch” event handler to custom your sw behaviors. (https://blog.bitsrc.io/5-service-worker-caching-strategies-for-your-next-pwa-app-58539f156f52)
Before you transform your Electron project, you need to be aware of PWA still isn’t a full replacement of Electron. PWA have limit access features especially native platform features. Make sure your app features’ implements is available in web (You can try url or web assembly to replace features’ implements. JavaScript ability maybe beyond you think). Also many users may not know this technique exists or don’t come to agree with it. “I just browser some stuff on internet, why I need to install website in my computer” or “Why not just give me an executable file let me double click it”. So sometimes you also need to explain the website usage to your customers.
