I am looking for a solution on how to create an offline patible web app using html, JavaScript, and maybe jQuery. I looked into service workers, but they aren’t parable 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?

I am looking for a solution on how to create an offline patible web app using html, JavaScript, and maybe jQuery. I looked into service workers, but they aren’t parable 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?

• javascript
• html
• web
• offline

• try to google for phonegap, cordova – MysterX Commented Oct 24, 2018 at 14:07
• If you set the caching dates for every file you need far enough into the future, you might be able to just rely on the browser cache. Have a look at how caching works in the browsers you will support. – Shilly Commented Oct 24, 2018 at 14:10
• While creating an offline app is a perfectly valid goal, if all you're trying to do is access music offline, you could simply save the audio files and use a local player. After all, you'd need to include them in your offline app to be able to play them anyway. – DBS Commented Oct 24, 2018 at 14:10
• The thing is, I don’t really know how to cache things, when i try, it doesn’t work – Ridley Nelson Commented Oct 24, 2018 at 14:36

2 Answers 2

For future reference:

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

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/en-US/docs/Tools/Application/Service_workers

Source for more details

Manifest.json reference

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./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 !