How can I develop a web app that's as good as a native mobile app? [closed]

Question

I am preparing to begin work on a project that will let you listen to your music collection from any device. My plan is to build it as a responsive website, so I can target pretty much every device with just one frontend.

The problem is that I want the app to work offline. I want users on both mobile and desktop to be able to save songs for offline play and I don't want the app to be strictly dependent on the presence of an internet connection.

Is this a feasible idea? I think I could probably make this work on the desktop end by adding a Chrome extension or app (I'm okay with my website being limited to just one browser), but I have no clue if this is doable on mobile. I only really care about Android; is there any way I can make this work on Android as a web app?

aside: Yes, I know that a web app will never be quite as user-friendly as a native app. I'm planning to do this project solo, so I care more about reducing development man-hours than about having the perfect UX.

TLDR: I'm making a responsive web app, but I want it to work offline on Android and on Chrome for desktop. It needs to be able to store lots of large files permanently and work without an internet connection. Are there any libraries/APIs/software that would allow me to do this?

Answer 1

Hmm, actually I think I've figured out a pretty good solution to this. Android allows you to make an app that is just a WebView for looking at a website, and you can bind JavaScript methods to methods in your Android app. There are a whole lot of APIs available to Chrome extensions that can do stuff like access the filesystem.

So basically, when my web app loads, it checks if Android or the Chrome extension is available. If one of those things is indeed available, then it uses the appropriate methods to access the filesystem and whatever else. If neither is available, then the app runs in a "lite" mode with some features unavailable.

As for caching the pages to make sure they work offline: I think I'm going to need to keep some sort of index of what files need to always be available and cached, and download those files locally as soon as possible. On Android, I can use shouldOverrideUrlLoading() to make sure all requests to these cached files are intercepted, and the local copy is loaded instead. Haven't figured out the exact details yet, but I know a similar thing is feasible in Chrome (actually, it looks like Chrome apps can be made to run on Android/iOS, so maybe I just develop a Chrome app...)