Как создать автономное веб-приложение с помощью JavaScript - PullRequest
Новая
       38

Как создать автономное веб-приложение с помощью JavaScript

0 голосов
/ 24 октября 2018

Я ищу решение о том, как создать автономное совместимое веб-приложение с использованием HTML, JavaScript и, возможно, JQuery.Я посмотрел на работников сферы обслуживания, но они пока не сопоставимы со всеми мобильными устройствами.Я также посмотрел на файл манифеста, он работал, но не обновлял файлы.Так что теперь я здесь, чтобы найти решение.Я намерен сделать это приложение музыкальным веб-сайтом, который может быть веб-приложением.Мне нравится музыка, и я беру ее повсюду, поэтому я пытаюсь выяснить, как я могу сохранить файлы сайта для автономного использования, поэтому даже если у меня нет Wi-Fi, я могу слушать мою сохраненную музыку. кстати файлы, которые я хотел бы сохранить: 

main.js
Main.css
Index.html

РЕДАКТИРОВАТЬ 1 Кроме того, если вы знаете, как правильно использовать работников сферы обслуживания, можете ли вы показатьпример

Ответы [ 2 ]

0 голосов
/ 25 июля 2019

Для future ссылки:

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 / Добавить событие onload в любом месте приложения: 

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

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

3 / Создать manifest.json файл в папке приложения root . 

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

4 / Тестовый пример.Запустите веб-сервер из папки root : 

php -S localhost:8090

Посетите http://localhost:8090 один раз.

Остановите веб-сервер с помощью Ctrl + c.

Обновить http://localhost:8090, страница должна ответить.

Чтобы отключить при разработке, удалите событие onload,и в Firefox посетите about:debugging#workers, чтобы отменить регистрацию службы.

Источник для получения более подробной информации

Manifest.json ссылка

0 голосов
/ 24 октября 2018

Если вам нужно сохранить настройки после того, как пользователь ушел, вам нужно использовать куки.Если вам нужны некоторые данные сервера (например, 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

Надеюсь, он вам поможет!

...