如何使用 javascript 创建离线 Web 应用程序 [英] how to create an offline web app using javascript
问题描述
我正在寻找有关如何使用 html、JavaScript 和 jQuery 创建离线兼容 Web 应用程序的解决方案.我研究了服务工作者,但他们还不能与所有移动设备相提并论.我还查看了清单文件,它可以工作,但没有更新文件.所以现在我在这里寻求解决方案.我打算将此应用程序变成一个音乐网站,也可以是一个网络应用程序.我喜欢音乐,而且随时随地都可以听,所以我想知道如何保存网站文件以供离线使用,这样即使我没有 WiFi,也可以收听我保存的音乐.顺便说一下我想保存的文件是:
I am looking for a solution on how to create an offline compatible web app using html, JavaScript, and maybe jQuery. I looked into service workers, but they aren’t comparable with all mobile devices yet. I also looked at the manifest file thing, it worked but it didn’t update the files. So now I’m here asking for a solution. I intend this application to be a music website that can be a web app. I like music and i take it everywhere so I’m trying to find out how i can save the website files for offline use so even if I don’t have WiFi, i can listen to my saved music. btw the files I’d like to save are:
main.js
Main.css
Index.html
编辑 1另外,如果你知道如何正确使用 Service Worker,你能举个例子吗?
EDIT 1 Also, if you know how to properly use service workers, can you show an example?
推荐答案
未来参考:
1/在应用 root 文件夹中创建一个 Service Worker 文件.
1/ Create a service worker file in the app root folder.
示例 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文件.
3/ Create a manifest.json file in the app root folder.
{
"name": "APP",
"short_name": "App",
"lang": "en-US",
"start_url": "/index.html",
"display": "standalone"
}
4/测试示例.从 root 文件夹启动 Web 服务器:
4/ Test example. Start a web server from the root folder:
php -S localhost:8090
访问 http://localhost:8090 一次.
使用 Ctrl + c 停止 Web 服务器.
Stop the web server with Ctrl + c.
刷新http://localhost:8090,页面应该有响应.
Refresh http://localhost:8090, the page should respond.
开发时要关掉,去掉 onload 事件,在 Firefox 中访问 about:debugging#workers
取消注册服务.
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
Newest versions of Firefox are showing an application
tab directly in the debugger instead. about:debugging#workers
is not valid any more.
https://developer.mozilla.org/en-US/docs/Tools/Application/Service_workers
这篇关于如何使用 javascript 创建离线 Web 应用程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!