如何创建离线工作的网络应用程序？ （例如，bulkresizephoto）

Question

I have to create an app that is pretty much standalone - kind of? My goal is to create a web based app that people can access through web browser. The user should be able to open a file from their machine (IOS, Windows, Android etc..) without uploading to a server, everything should run from within the device. The app then extracts some data by parsing the content. In this example i am using MSGREADER (wl-msg-reader).

I can make it work if i create an API with js and express and html. However that requires uploading a file, or does it..??

A while ago i remember using a site that had similar functionality and since then i've always wanted to know how they do it? (see https://bulkresizephotos.com/en ), this open the possibility of creating many types of apps that can work "offline". In the future i want to be able to create an electron app that is also stand alone, meaning, no external server connection should be required, but that's another question for another time.

Can anyone shine some light into this question?

I am known to sometimes not being super clear on my questions, if you need me to provide more info, let me know.

Answer 1

I can make it work if i create an API with js and express and html. However that requires uploading a file, or does it..??

Yes, it does require that you have an internet connection and that you upload the file. The only way that these apps can work offline has to abide with the following:

1. That the website was cached during a previous load when you had a connection. (assuming that you want to actually access the site w/oa connection)
2. All the work is done client-side with no server interaction whatsoever (in JavaScript/WASM), which is entirely possible and could be decently fast with modern devices and optimization.

There's no going around it, that's just the way internet works. A huge cluster of interconnected servers and client devices which communicate through a system of networks and corresponding hardware infrastructure.