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.
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)