Статьи

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

Март 25, 2019

автономное веб-приложение Большинство поставщиков браузеров внедряют функциональность автономных веб-приложений в HTML5. Это позволяет онлайн-приложению работать, даже если пользователь теряет или отключает интернет-соединение. Например, вы сможете составить сообщение в своем клиенте веб-почты, даже если вы не можете найти точку доступа Wi-Fi.

Пример, приведенный в этом посте, работает в Firefox 3.x. Это работает до некоторой степени в других браузерах — включая IE8. Однако реализации и наборы функций различаются. Оффлайн-технологии постоянно меняются, поэтому я не могу рекомендовать использовать этот код в производственной среде.

Существует три аспекта создания приложения с поддержкой автономного режима: указание необходимых файлов, определение времени отключения браузера и локальное сохранение данных.

Манифест с кешем

Ваш браузер не может получить доступ к файлам в автономном режиме, поэтому вам нужно указать, какие ресурсы требуются, чтобы их можно было кэшировать. Это достигается в манифесте кэша — это простой список необходимых файлов, например 


CACHE MANIFEST
styles.css
jquery-1.4.min.js
offline.js
index.html

Сохраните этот файл как «offline.manifest» и укажите ссылку на него в html 

 
<html manifest="offline.manifest">

Обратите внимание, что offline.manifest должен обслуживаться с MIME-типом text / cache-manifest.

Когда вы загружаете файл, браузер спросит, разрешаете ли вы хранить данные на вашем ПК.

Как определить, когда браузер переходит в автономный режим

Код JavaScript может определять, когда браузер подключен к сети или отключен с помощью navigator.onLine Это свойство поддерживается большинством браузеров и возвращает значение true в режиме онлайн или значение false в автономном режиме.

Firefox также позволяет вам прикреплять обработчики к onlineoffline 

 
// standard event listeners
window.addEventListener("online", function() { ... });
window.addEventListener("offline", function() { ... });

// or jQuery alternative
$(window).bind("online offline", function() { ... });

Сохранение данных локально

Хранение DOM — один из самых простых способов сохранения данных в автономном режиме. Вы можете использовать либо:

  • window.sessionStorage
  • window.localStorage

Оба объекта предлагают одинаковые методы:

  • setItem(string name, string value)
  • getItem(string name)
  • removeItem(string name)
  • length
  • key(long index)
  • clear()

Пример: 

 
// set a session value
window.sessionStorage.setItem("key", "my data");

// get a session value - returns "my data"
window.sessionStorage.getItem("key");

Собираем все вместе

Посмотреть страницу примера …

Это не очень интересно, пока вы не выберите File> Work Offline в Firefox. Статус немедленно изменится на «OFFLINE». Затем вы можете ввести некоторые данные и нажать кнопку «Сохранить данные». Данные будут храниться локально, а не размещаться на сервере. Обновите страницу, и введенные вами значения появятся снова.

Пожалуйста, загрузите файлы, если вы хотите поближе взглянуть на код.

42
Share: