Автономные веб-приложения: использование локального хранилища и сервис-воркеров.

Автономные веб-приложения: использование локального хранилища и сервис-воркеров.

В этой статье я объясню вам, как вы можете успешно запустить свой веб-сайт в автономном режиме почти как установленное приложение.

Чтобы создать автономный веб-сайт, вам необходимо знать две основные темы Интернета: сервисные работники (sw) и хранилище браузера. Начнем с хранилища браузера.

Сохранение данных в браузере.

Это своего рода обоюдоострый меч. У хранения данных в браузерах есть свои плюсы и минусы. Поскольку веб-хранилище было введено в HTML5, старые браузеры имеют ограниченную поддержку, хотя плагины могут быть установлены, чтобы сделать браузер совместимым с новой технологией. До HTML5 данные приложения должны были храниться в файлах cookie, которые должны были передаваться между клиентом и сервером и имели очень ограниченную емкость хранилища (4095 байт) в отличие от 5 МБ локального хранилища ( 5 875 280 байт).

Данные локального хранилища являются постоянными, в отличие от файлов cookie, срок действия которых истекает. Чтобы удалить данные из локального хранилища, вам придется вручную очистить данные на вкладке приложения в инструментах разработчика браузера. Однако ваш компьютер может автоматически (то есть без вашего согласия или разрешения) удалять данные из локального хранилища, когда на нем заканчивается файловое пространство, чтобы освободить место для других файлов.

Локальное хранилище - это самый простой способ хранить пары данных "ключ-значение" в браузере. Другие методы используют IndexedDB (учебное пособие по этому поводу в процессе создания), WebSQL (устарело, не рекомендуется изучать или использовать), Файловая система. API и Кеш приложения. В этом руководстве я покажу вам, как использовать локальное хранилище. Если вам нужна более сложная и мощная IndexedDB, оставайтесь на связи, и я напишу следующую статью по этой теме.

Работа с локальным хранилищем.

Чтобы проверить, поддерживает ли ваш браузер API локального хранилища, запустите этот код JavaScript для подтверждения.

(function() {
  if(window.localStorage)
    console.log("Local Storage Supported")
  else
    console.log("Local Storage Not Supported")
})();

Эта самовоспроизводящаяся функция должна выводить на консоль сообщение «Поддерживается локальное хранилище». Это означает, что теперь вы можете начать сохранять и извлекать данные из локального хранилища.

Поскольку локальное хранилище предназначено для работы с парами "ключ-значение", вам необходимо задать ключ данных перед их добавлением. Объект localStorage предоставляет несколько методов и свойств, которые помогают нам запускать его.

window.localStorage.setItem («ключ», «значение»): этот метод принимает два аргумента. Первый - это ключ, который вы хотите установить для своего значения, а второй - фактическое значение. Если вы хотите сохранить имя пользователя, вы можете использовать имя пользователя в качестве ключа и сохранять с ним любое значение аналогично тому, как вы назначаете данные переменных.

window.localStorage.getItem («key»): этот метод принимает один аргумент, который является ключом, прикрепленным к значению. Это возвращает значение используемого ключа. Например, если вы хотите узнать сохраненное имя пользователя, замените рабочий ключ на имя пользователя в приведенном выше утверждении, чтобы получить значение.

window.localStorage.removeItem («ключ»): этот метод удаляет значение ключа вместе с самим ключом. Он не оставляет никаких доказательств существования значения или ключа. Вы можете удалить информацию об имени пользователя, передав имя пользователя в качестве аргумента.

window.localStorage.clear (): этот метод не требует аргументов. Он удаляет весь контент, хранящийся в локальном хранилище, но ограничивается источником приложения. Следовательно, если теоретически Facebook и Twitter хранят некоторые данные в вашем браузере, когда вы используете этот метод на странице Facebook, ваши данные Twitter не пострадают, но все данные Facebook исчезнут (но действительно ли это ваш данные ??).

window.localStorage.key (n): этот метод принимает числовой аргумент, который возвращает n-й ключ в хранилище. Поскольку порядок ключей определяется пользовательским агентом (зависит от браузера), настоятельно не рекомендуется использовать его, так как результаты будут отличаться от браузера к браузеру и будут храниться с одними и теми же данными.

window.localStorage.length: это свойство работает аналогично массивам. Он просто возвращает количество объектов, хранящихся локально. Возвращаемое значение всегда будет иметь номер типа.

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

(function() {
  //check to see if local storage is supported
  if(window.localStorage)
    console.log("Local Storage Supported")
  else
    console.log("Local Storage not supported in browser")
  //prompt user for username and age  
  let username = prompt("Enter username:","")
  let age = prompt("Enter age:","")
  //add username and age to localstorage
  window.localStorage.setItem("username", username)
  window.localStorage.setItem("age", age)
  //show number of objects stored
  console.log(window.localStorage.length)
  //get items from local storage
  console.log(window.localStorage.getItem("username"))
  console.log(window.localStorage.getItem("age"))
})();

Чтобы просмотреть данные, хранящиеся в вашем браузере, запустите инструменты разработчика в своем любимом браузере с помощью F12 или щелкните правой кнопкой мыши и выберите Element Inspector или Inspector option. После запуска инструментов разработчика перейдите на вкладку «Приложение», чтобы просмотреть сведения о приложении.

Вы должны смотреть что-то подобное. Мое приложение размещено на localhost: 8081. Для инструмента, который я использую, требуется установленный NodeJS, но вы можете использовать любой инструмент, который вам нравится, например WAMPP, XAMPP… и т. Д. Чтобы проверить сохраняемость данных, вы можете закрыть браузер и перезапустить его. Черт! Выключите компьютер, если необходимо, данные останутся на месте. Даже через год.

Стоит отметить, что данные в локальном хранилище хранятся в виде строк, за исключением случаев, когда явно заданы числа. Массивы и объекты необходимо преобразовать из строк. Веб-хранилище (localStorage, sessionStorage, indexedDB) реализует тот же протокол безопасности источника. Это означает, что все страницы из одного источника могут получить доступ к данным, но не из другого происхождения. Чтобы объяснить это, давайте снова воспользуемся Facebook. По сути, https://facebook.com/users может хранить данные, которые могут быть использованы и обработаны https://facebook.com/page.com, но данные не могут быть доступны или обработаны https: // twitter. .com , потому что Twitter имеет другое происхождение от Facebook. Все страницы Facebook могут получить доступ к этим данным.

Почему мое приложение не работает, когда Интернет не работает?

Ну, в основном потому, что вы не пользуетесь сервис-воркерами. Основная функция сервис-воркера - перехватывать http-вызовы, выполняемые страницами, и возвращать кешированные файлы. Чтобы ваше приложение работало в автономном режиме, вам необходимо кэшировать ВСЕ URL-адреса, которые обслуживают файлы логики приложения. В нашем случае это только файлы .js и .html.

Сервисный работник работает отдельно от вашего сайта. Он полностью независим от страниц и может взаимодействовать с ними только после установки. Поскольку сервис-воркеры - это более сложная тема, давайте сосредоточимся на той части, которая кеширует приложение.

Работа с сервис-воркером.

Чтобы установить сервис-воркер, вы должны начать с регистрации сервис-воркера. Создайте файл sw.js рядом с файлом .js и вставьте следующий код.

if('serviceWorker' in navigator) {
 window.addEventListener('load', () => {
  navigator.serviceWorker.register('sw.js')
  .then((registration) => {
    console.log("Service Worker registration successful")
   }, (err) => {
    console.log("Registration failed")
   })
  })
}

Чтобы кэшировать наши данные, нам нужно указать версию, чтобы при обновлении сервис-воркера мы могли указать, какие новые вещи нужно кэшировать в новой версии, а что нужно сбросить. Вставьте следующий код.

let cache_name = 'mysite-v1'
let urls_to_cache = [
 '/',
 '/js/scripts.js'
]
self.addEventListener('install', (e) => {
 e.waitUntil(caches.open(cache_name).then((cache) => {
  return cache.addAll(urls_to_cache)
 }) )
})

Этот блок кода ожидает успешной установки сервис-воркера (self), чтобы затем начать кэширование файлов. После захвата события вы можете использовать его, создав переменную e и прикрепив к ней. Затем экземпляр предоставляет метод .waitUntil (), который принимает обещание и подтверждает, успешна установка или нет, затем кеши открываются с помощью функции caches.open (), которая принимает и аргумент имени кеша. Как только все файлы будут кэшированы, ваш сервис-воркер установит, но если хотя бы один из них выйдет из строя, сервис-воркер не сможет установить.

Теперь, когда вы установили Service worker, вы хотите вернуть кэшированные данные.

После установки сервис-воркера пользователь может начать перебирать страницы, и эти действия будут вызывать запросы на выборку. Как я объяснял ранее, сервис-воркеры прослушивают эти запросы и перехватывают / перехватывают их, прежде чем они будут проверять, доступны ли данные локально. Вот код, который это делает.

self.addEventListener('fetch', (e) => {
 e.respondWith(caches.match(e.request).then((response) => {
  if(response)
   return response
  else
   return fetch(e.request)
 }) )
})

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

Вуаля! Это офлайн-приложение!

Вы успешно сделали своего обслуживающего работника. Не забудьте включить его в свой html-файл при включении файлов сценария. Ваш сервисный работник будет обслуживать кэшированные файлы, когда приложение находится в автономном режиме, а данные, хранящиеся в приложении, являются постоянными, будь то онлайн или офлайн. Это гарантирует, что ваше приложение может работать без подключения к Интернету. Убедитесь, что ваш sw.js находится в той же папке, что и ваш index.html, чтобы предотвратить ошибку (404) ресурс не найден, когда работник службы перечисляет ресурсы для кеширования. Он автоматически предполагает, что папка, в которую он помещен, является корневой.

Это все, что вам нужно для создания простого автономного приложения. Обратите внимание, что мы не использовали какие-либо фреймворки или плагины, только чистый JavaScript. Если вы хотите просмотреть приложение (и другие примеры), вы можете создать запрос на перенос на GitHub, используя ссылку на репозиторий, указанную ниже.

https://github.com/onejohi/offline-webapp.git

Попробуйте одно из следующего. В инструментах разработчика откройте вкладку Сеть и установите флажок в автономном режиме, чтобы имитировать работу в автономном режиме. Вы также можете выключить Wi-Fi или отсоединить кабель Ethernet, чтобы убедиться в отсутствии Интернета. Обновите приложение, и вы увидите, что приложение обслуживается из кешированной версии. Выключите браузер, снова откройте его (находясь в автономном режиме) и проверьте URL-адрес, по которому было запущено ваше веб-приложение. Я на 100% уверен, что ваше приложение перезагрузится, как если бы вы все еще были подключены к Интернету.

Заключение.

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

Используя эти два мощных инструмента, вы можете создавать мощные и сложные веб-приложения. Спасибо, что прочитали эту статью, и я надеюсь, что она помогла вам немного понять сервис-воркеров и локальное хранилище. Больше информации о сервисных работниках будет среди моих работ в будущем, Ура!