Angular 7 PWA для веб-хранилищ - PullRequest
Новая
       47

Angular 7 PWA для веб-хранилищ

3 голосов
/ 08 марта 2019

Я создаю приложение PWA, используя Angular 7. Я решаю, как сохранить некоторые данные локально, и у меня есть два варианта:

  1. LocalStorage
  2. IndexedDB

Преимущества локального хранилища:

  1. Синхронный
  2. Возвращает строку

Несоответствия локальных хранилищ

  1. ServiceWorker не может получить доступ к localalstorage
  2. Не защищен

Преимущества IndexedDB:

  1. Больше места для хранения, чем localalstorage
  2. Может хранить и извлекатьобъекты
  3. на основе обещаний

Недостатки IndexedDB

  1. Недоступно в закрытых сеансах Firefox

Теперь для хранения данных, еслиЯ использую IndexedDB, пользователи из частных сеансов Firefox не смогут использовать мой веб-сайт, и если я использую localstorage, я не могу использовать ServiceWorker.

Как вы преодолеваете вышеуказанные проблемы с IndexedDB и LocalStorage?

Ответы [ 2 ]

1 голос
/ 09 марта 2019

Во-первых, следует понимать, что PWA или P rogressive W eb A pp по определению должны поддерживать все браузеры и должны быть прогрессивными в характер, т. е. в зависимости от возможностей браузера, приложение должно адаптироваться и выбирать, какие функции использовать, чтобы подбодрить пользователя.

Краткая аналогия:

Акула в аквариуме вырастет 7 дюймов но в океане она вырастет 7 + Футы .

  • Ваше приложение похоже на акулу!

  • Аквариум / Океан как ваш браузер !!

  • Ресурсы Fish tank / Ocean - ваш браузер

Будь то аквариум или океан, акула все еще остается акулой (похоже, это добыча). Отличается масштаб / размер / емкость / производительность (например, Акулы в океане имеют большие зубы и охотятся на крупную рыбу).

Применяя аналогию, дизайн вашего приложения не ДОЛЖЕН зависеть от базы данных / хранилища (или любой другой функции браузера) для визуализации самого себя, но в то же время он должен иметь возможность использовать их, если он поддерживается браузером для того, чтобы обеспечить лучший пользовательский опыт. (Это означает, что PWA должны работать, даже если говорят, что localStorage не поддерживается каким-то странным браузером - слишком много, чтобы спрашивать!)

Если продолжить, ваше приложение может попытаться использовать IndexedDB в браузере, если нет, предоставить соответствующий механизм отката (откат вообще не обязательно должен быть локальным хранилищем !, но, возможно, простой визуализацией ). IndexedDB используется для хранения больших объемов данных, которые требуют широких возможностей запросов, тогда как localStorage похож на sessionStorage, который сохраняется даже после закрытия окна, обычно предназначен для хранения некоторого набора пар ключ / значение. Попытка использовать один поверх другого была бы неправильной - они предназначены для разных типов наборов данных / вариантов использования.

Короче , в контексте PWA, НЕПРАВИЛЬНО думать "IndexedDB или Local Хранилище? ", но подумайте, какой опыт вы хотите предоставить своему пользователи на основе ограниченных возможностей браузера в вашем распоряжении.

Удачи вам в вашем PWA !!!

Интересно прочитать о доступных опциях хранения в разных браузерах https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/#comparison

0 голосов
/ 09 марта 2019

Просто предложение в таком случае, почему вы можете проверить, находится ли пользователь в приватном просмотре или нет, и использует ли он тогда локальное хранилище.
проверить PB Как это ->

var db = indexedDB.open ("test");
db.onerror = function () {/ Firefox PB включен /};
db.onsuccess = function () {/ Не включено /};

Подробнее *> 1014 * Определение, использует ли браузер режим приватного просмотра

...