Создание автономных веб-приложений с использованием сервисных работников и PouchDB

Теперь наш основной компонент приложения может использовать Store

 class ContactBook {

  constructor(storeClass) {
    // create store instance
    this.store = new storeClass('contacts');

    // init component internals
    this.init();

    // refresh the component
    this.refresh();
  }

  refresh() {
    // get all contacts from the store
    this.store.getAll().then(contacts => {
      // render retrieved contacts
      this.renderContactList(contacts);
    });
  }

    ...
}

Класс Store Как только магазин создан, он используется в методе refresh

Инициализация приложения выглядит следующим образом:

 new ContactBook(Store);

Другие методы приложения взаимодействуют с магазином:

 class ContactBook {
  ...

  showContact(event) {
    // get contact id from the clicked element attributes
    var contactId = event.currentTarget.getAttribute(CONTACT_ID_ATTR_NAME);

    // get contact by id
    this.store.get(contactId).then(contact => {
      // show contact details
      this.setContactDetails(contact);

      // turn off editing
      this.toggleContactFormEditing(false);
    })
  }

  editContact() {
    // get id of selected contact
    var contactId = this.getContactId();

    // get contact by id
    this.store.get(this.getContactId()).then(contact => {
      // show contact details
      this.setContactDetails(contact);

      // turn on editing
      this.toggleContactFormEditing(true);
    });
  }

  saveContact() {
    // get contact details from edit form
    var contact = this.getContactDetails();

    // save contact
    this.store.save(contact).then(() => {
      // clear contact details form
      this.setContactDetails({});

      // turn off editing
      this.toggleContactFormEditing(false);

      // refresh contact list
      this.refresh();
    });
  }

  removeContact() {
    // ask user to confirm deletion
    if (!window.confirm(CONTACT_REMOVE_CONFIRM))
      return;

    // get id of selected contact
    var contactId = this.getContactId();

    // remove contact by id
    this.store.remove(contactId).then(() => {
      // clear contact details form
      this.setContactDetails({});

      // turn off editing
      this.toggleContactFormEditing(false);

      // refresh contact list
      this.refresh();
    });
  }

Это основные операции с использованием методов CRUD магазина:

• showContact
• editContact
• saveContact
• removeContact

Теперь, если вы добавите контакты в автономном режиме и обновите страницу, данные не будут потеряны.

Но есть «но»…

Синхронизация данных

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

Нам нужно реализовать синхронизацию данных с сервером. Реализация двусторонней синхронизации данных не является тривиальной проблемой. К счастью, это обеспечивается PouchDB, если у нас есть CouchDB на бэкэнде.

Давайте немного изменим наш класс Store

 class Store {

  constructor(name, remote, onChange) {
    this.db = new PouchDB(name);

    // start sync in pull mode
    PouchDB.sync(name, `${remote}/${name}`, {
      live: true,
      retry: true
    }).on('change', info => {
      onChange(info);
    });
  }

Мы добавили два параметра в конструктор:

• remote
• onChange

Метод PouchDB.sync Параметр liveretry

Нам нужно соответствующим образом изменить класс приложения и передать необходимые параметры конструктору Store

 class ContactBook {

  constructor(storeClass, remote) {
    this.store = new storeClass('contacts', remote, () => {
      // refresh contact list when data changed
      this.refresh();
    });

    ...
  }

Конструктор класса главного приложения теперь принимает удаленный URL, который передается в хранилище. onChangerefresh

Инициализация приложения должна быть обновлена:

 new ContactBook(Store, 'http://localhost:5984');

Выполнено! Теперь наше приложение позволяет редактировать список контактов в автономном режиме. Когда приложение подключено к сети, данные синхронизируются с внутренним хранилищем.

Давайте проверим это:

1. запустить веб-сервер с $ npm run serve
2. откройте URL http://127.0.0.1:8080/ в двух разных браузерах
3. остановите веб-сервер, нажав Ctrl + C
4. редактировать список контактов в обоих браузерах
5. снова запустите веб-сервер с $ npm run serve
6. проверьте список контактов в обоих браузерах (он должен быть актуальным в соответствии с изменениями в обоих браузерах)

Замечательно, мы сделали это!

Проверьте полный исходный код приложения на GitHub.

Вывод

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

Для поддержки оффлайн нам нужно было позаботиться о:

• кэширование ресурсов приложения — используйте Service Workers с откатом до AppCache, пока первый не будет поддержан всеми современными браузерами
• хранение данных на стороне клиента — используйте автономное хранилище браузера, например IndexedDB, с одной из доступных библиотек

Мы только что посмотрели, как все это можно реализовать. Надеюсь, вам понравилось читать. Пожалуйста, поделитесь своими мыслями о теме в комментариях!

Эта статья была рецензирована Джеймсом Колсом и Крейгом Баклером . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!