如何使用 javascript 创建离线网络应用程序
how to create an offline web app using javascript
我正在寻找有关如何使用 html、JavaScript 甚至 jQuery 创建离线兼容 Web 应用程序的解决方案。我研究了 service workers,但它们还不能与所有移动设备相媲美。我还查看了清单文件,它有效但没有更新文件。所以现在我在这里寻求解决方案。我希望这个应用程序成为一个可以是网络应用程序的音乐网站。我喜欢音乐,我随身携带它,所以我想知道如何保存网站文件以供离线使用,这样即使我没有 WiFi,我也可以听我保存的音乐。 顺便说一句我要保存的文件是:
main.js
Main.css
Index.html
编辑 1
另外,如果您知道如何正确使用 Service Worker,可以举个例子吗?
如果您需要在用户离开后保存设置,则需要使用cookies。
如果您需要一些服务器数据(例如 ajax 请求),恐怕您无法离线完成。
对于其他一切(据我所知),如果你想让它离线工作,你必须让用户的浏览器下载它要使用的所有代码,包括 JQuery、Bootstrap,或您想要的任何插件代码。您必须将它们添加到您的网站资源并在内部 link :
<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/ 在应用 root 文件夹中创建一个 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/ 在应用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,页面应该有响应。
To switch off when developing, remove the onload event, and in Firefox
visit about:debugging#workers
to unregister the service.
最新版本的 Firefox 直接在调试器中显示 application
选项卡。 about:debugging#workers
不再有效。
https://developer.mozilla.org/en-US/docs/Tools/Application/Service_workers
我正在寻找有关如何使用 html、JavaScript 甚至 jQuery 创建离线兼容 Web 应用程序的解决方案。我研究了 service workers,但它们还不能与所有移动设备相媲美。我还查看了清单文件,它有效但没有更新文件。所以现在我在这里寻求解决方案。我希望这个应用程序成为一个可以是网络应用程序的音乐网站。我喜欢音乐,我随身携带它,所以我想知道如何保存网站文件以供离线使用,这样即使我没有 WiFi,我也可以听我保存的音乐。 顺便说一句我要保存的文件是:
main.js
Main.css
Index.html
编辑 1 另外,如果您知道如何正确使用 Service Worker,可以举个例子吗?
如果您需要在用户离开后保存设置,则需要使用cookies。
如果您需要一些服务器数据(例如 ajax 请求),恐怕您无法离线完成。
对于其他一切(据我所知),如果你想让它离线工作,你必须让用户的浏览器下载它要使用的所有代码,包括 JQuery、Bootstrap,或您想要的任何插件代码。您必须将它们添加到您的网站资源并在内部 link :
<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/ 在应用 root 文件夹中创建一个 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/ 在应用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,页面应该有响应。
To switch off when developing, remove the onload event, and in Firefox visit
about:debugging#workers
to unregister the service.
最新版本的 Firefox 直接在调试器中显示 application
选项卡。 about:debugging#workers
不再有效。
https://developer.mozilla.org/en-US/docs/Tools/Application/Service_workers