如何使用 javascript 創建離線 Web 應用程序

Question

我正在尋找有關如何使用 html、JavaScript 和 jQuery 創建離線兼容 Web 應用程序的解決方案。 我研究了服務工作者，但他們還不能與所有移動設備相提並論。 我還查看了清單文件，它工作正常，但沒有更新文件。 所以現在我在這里尋求解決方案。 我打算將此應用程序變成一個音樂網站，也可以是一個網絡應用程序。 我喜歡音樂，而且隨時隨地都可以聽，所以我想知道如何保存網站文件以供離線使用，這樣即使沒有 WiFi，我也可以收聽保存的音樂。 順便說一句，我想保存的文件是：

main.js
Main.css
Index.html

編輯 1另外，如果您知道如何正確使用服務工作者，您能舉個例子嗎？

Answer 1

供以后參考：

---

1/在應用程序根文件夾中創建一個 Service Worker 文件。

示例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/在應用根文件夾中創建一個manifest.json文件。

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

---

4/測試示例。 從根文件夾啟動 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

來源了解更多詳情

Manifest.json 參考

Answer 2

如果用戶離開后需要保存設置，則需要使用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 -->

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

希望對你有幫助！