how to create an offline web app using javascript

Question

I am looking for a solution on how to create an offline compatible web app using html, JavaScript, and maybe jQuery. I looked into service workers, but they aren't comparable with all mobile devices yet. I also looked at the manifest file thing, it worked but it didn't update the files. So now I'm here asking for a solution. I intend this application to be a music website that can be a web app. I like music and i take it everywhere so I'm trying to find out how i can save the website files for offline use so even if I don't have WiFi, i can listen to my saved music. btw the files I'd like to save are:

main.js
Main.css
Index.html

EDIT 1 Also, if you know how to properly use service workers, can you show an example?

Answer 1

For future references:

---

1/ Create a service worker file in the app root folder.

Example sw.js :

let cacheName = "core" // Whatever name
// Pass all assets here
// This example use a folder named «/core» in the root folder
// It is mandatory to add an icon (Important for mobile users)
let filesToCache = [
  "/",
  "/index.html",
  "/core/app.css",
  "/core/main.js",
  "/core/otherlib.js",
  "/core/favicon.ico"
]

self.addEventListener("install", function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache)
    })
  )
})

self.addEventListener("fetch", function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request)
    })
  )
})

---

2/ Add an onload event anywhere in the app:

window.onload = () => {
  "use strict";

  if ("serviceWorker" in navigator && document.URL.split(":")[0] !== "file") {
    navigator.serviceWorker.register("./sw.js");
  }
}

---

3/ Create a manifest.json file in the app root folder.

{
    "name": "APP",
    "short_name": "App",
    "lang": "en-US",
    "start_url": "/index.html",
    "display": "standalone"
  }

---

4/ Test example. Start a web server from the root folder:

php -S localhost:8090

Visit http://localhost:8090 one time.

Stop the web server with Ctrl + c.

Refresh http://localhost:8090 , the page should respond.

To switch off when developing, remove the onload event, and in Firefox visit about:debugging#workers to unregister the service.

---

Newest versions of Firefox are showing an application tab directly in the debugger instead. about:debugging#workers is not valid any more.

https://developer.mozilla.org/en-US/docs/Tools/Application/Service_workers

Source for more details

Manifest.json reference

Answer 2

If you need to save settings after the user left, you need to use cookies.
If you need some server data (and ajax requests for example), I'm afraid you can't do that offline.

For everything else (as far as I know), if you want it to work offline, you have to make the user's browser download all code it's going to use, including JQuery, Bootstrap, or any plugin code you want. You have to add them to your website sources and link them internally :

<script src="http://code.jquery.com/jquery-3-3-0-min.js"></script> <!-- Won't work offline.-->

<script src="./js/jquery-3-3-0-min.js"></script> <!-- Will work offline -->

Be careful about plugin dependencies ! For example Bootstrap 3.3.6 JS plugin needs JQuery 1.12.4

Hope it helps you !