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

时间:2018-10-24 14:06:16

标签: javascript html web offline

我正在寻找有关如何使用html,JavaScript以及jQuery创建离线兼容的Web应用程序的解决方案。我调查了服务人员,但还不能与所有移动设备相提并论。我还查看了清单文件,它可以工作,但是没有更新文件。所以现在我在这里寻求解决方案。我打算将此应用程序作为一个音乐网站,可以将其作为网络应用程序。我喜欢音乐,无处不在,所以我试图找出如何保存网站文件以供离线使用的方法,因此即使没有WiFi,我也可以收听保存的音乐。我要保存的 btw 文件是:

main.js
Main.css
Index.html

编辑1 另外,如果您知道如何正确使用服务人员,可以举个例子吗?

2 个答案:

答案 0 :(得分:0)

如果用户离开后需要保存设置,则需要使用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

希望它对您有帮助!

答案 1 :(得分:0)

对于未来参考:

1 /在应用程序的 root 文件夹中创建服务工作者文件。

示例 sw.js

let cacheName = "core" // Whatever name
// Pass all assets here, this example use the root folder «core»
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");
  }
}

3 /在应用程序 root 文件夹中创建 manifest.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取消注册服务。

Source for more details

Manifest.json reference