Search code examples
javascripthtmlweboffline

how to create an offline web app using javascript

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?

Solution

  • 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