如何使用 javascript 创建离线网络应用程序

Question

我正在寻找有关如何使用 html、JavaScript 和 jQuery 创建离线兼容 Web 应用程序的解决方案。我调查了服务人员，但他们还不能与所有移动设备相媲美。我还查看了清单文件，它有效，但没有更新文件。所以现在我在这里寻求解决方案。我希望这个应用程序成为一个可以成为网络应用程序的音乐网站。我喜欢音乐，我把它带到任何地方，所以我想知道如何保存网站文件以供离线使用，这样即使我没有 WiFi，我也可以听我保存的音乐。 btw 我要保存的文件是：

main.js
Main.css
Index.html

编辑 1 另外，如果你知道如何正确使用 Service Worker，你能举个例子吗？

Answer 1

对于未来的参考：

---

1/ 在应用根文件夹中创建一个服务工作者文件。

示例 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/ 在应用的任意位置添加onload事件：

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

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

---

3/ 在应用root文件夹中创建一个ma​​nifest.json文件。

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

---

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

php -S localhost:8090

访问http://localhost:8090 一次。

使用 Ctrl + c 停止 Web 服务器。

刷新http://localhost:8090，页面应该会响应。

开发时要关闭，去掉onload事件，在Firefox中 访问about:debugging#workers取消注册服务。

---

最新版本的 Firefox 直接在调试器中显示 application 选项卡。 about:debugging#workers 不再有效。

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

Source for more details

Manifest.json reference

Answer 2

如果您需要在用户离开后保存设置，则需要使用 cookie。
如果您需要一些服务器数据（例如 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 -->

小心插件依赖！例如 Bootstrap 3.3.6 JS 插件需要 JQuery 1.12.4

希望对你有帮助！