如何使用javascript创建脱机web应用程序

我正在寻找一个解决方案，介绍如何使用html、JavaScript甚至jQuery创建一个离线兼容的web应用程序。我调查了服务人员，但他们还不能与所有移动设备相比。我还查看了清单文件，它工作了，但没有更新文件。所以现在我在这里要求一个解决方案。我打算这个应用程序是一个音乐网站，可以是一个网络应用程序。我喜欢音乐，我把它带到任何地方，所以我试图找出如何保存网站文件供脱机使用，这样即使我没有WiFi，我也可以听我保存的音乐顺便说一句我要保存的文件有：

main.js
Main.css
Index.html

编辑1

---

另外，如果你知道如何正确使用服务人员，你能举个例子吗？

如果你需要在用户离开后保存设置，你需要使用cookies。
如果您需要一些服务器数据（例如ajax请求），恐怕您不能离线完成

就我所知，如果你想让它离线工作，你必须让用户的浏览器下载它将要使用的所有代码，包括JQuery、Bootstrap或任何你想要的插件代码。您必须将它们添加到您的网站资源中，并在内部链接它们：

<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 -->

小心插件依赖关系！例如，Bootstrap3.3.6JS插件需要jQuery1.12.4

希望它能帮助你

供将来参考：

---

1/在应用程序根文件夹中创建服务人员文件。

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

示例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/在应用程序中的任意位置添加一个加载事件：

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

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

php -S localhost:8090

---

3/在approot文件夹中创建一个manifest.json文件。

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

---

4/测试示例。从根文件夹启动web服务器：

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

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

php -S localhost:8090

参观一次

使用Ctrl+c停止web服务器

刷新时，页面应响应

要在开发时关闭，请删除onload事件，然后在Firefox中 访问

about:debugging#workers

以注销服务

---

最新版本的Firefox将直接在调试器中显示

应用程序

选项卡<代码>关于：调试#工作人员不再有效。

---

尝试在谷歌上搜索

phonegap

，

cordova

如果您为将来需要的每个文件设置缓存日期，您可能只需要依赖浏览器缓存即可。看看缓存在您将支持的浏览器中是如何工作的。虽然创建脱机应用程序是一个非常有效的目标，但如果您只想脱机访问音乐，您只需保存音频文件并使用本地播放器即可。毕竟，你需要将它们包含在你的离线应用程序中才能播放它们。问题是，我真的不知道如何缓存东西，当我尝试时，它不起作用。你能举一个使用cookies的例子吗？对不起，我不知道如何使用它们。我只知道它们的存在是为了在用户的计算机上存储数据。此外，许多用户拒绝使用cookies，因为大多数人不清楚它是什么。它们使用起来很危险（用户可以编辑它们），在使用之前应该检查。我刚刚意识到我带来的文档是不正确的。我应该帮你更多。天哪，谢谢你！这真的很有帮助！现在，我的web应用程序几乎准备发布了。很抱歉，我已经有一段时间没有使用StackOverflow了