3

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?

Ridley Nelson
  • 43
  • 1
  • 7
  • try to google for `phonegap`, `cordova` – MysterX Oct 24 '18 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 Oct 24 '18 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 Oct 24 '18 at 14:10
  • The thing is, I don’t really know how to cache things, when i try, it doesn’t work – Ridley Nelson Oct 24 '18 at 14:36

2 Answers2

6

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

Source for more details

Manifest.json reference

NVRM
  • 11,480
  • 1
  • 88
  • 87
-1

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 !

Jean-Marc Zimmer
  • 537
  • 6
  • 20
  • Can you give an example using cookies? – Ridley Nelson Oct 24 '18 at 14:35
  • Sorry, I don't know how to use them. I just know they exist to store data on the user's computer. Here is [some documentation](https://www.w3schools.com/js/js_cookies.asp) Also cookies are refused by many users because it is unclear for most people what it is. They are dangerous to use (the user can edit them) and should always be checked before used. – Jean-Marc Zimmer Oct 24 '18 at 14:40
  • Just realized the documentation I brought is not correct. [This question](https://stackoverflow.com/questions/4825683) should help you more. – Jean-Marc Zimmer Oct 25 '18 at 06:21
  • 1
    OMG thank you! That really helped! Now my web app is almost ready to release – Ridley Nelson Oct 26 '18 at 00:52