pspdfkit web example pwa

Pspdfkit для веб -примера - pwa

В этом примере показано, как интегрировать PSPDFKIT для Web и создать PWA (прогрессивное веб -приложение).

Вы можете проверить живой предварительный просмотр здесь: pspdfkit.com/pwa.

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

В этом примере мы используем Workbox, популярную структуру PWA от Google.

Предварительные условия

• Node.js
• PSPDFKIT для веб -лицензии. Если у вас еще нет, вы можете запросить бесплатную пробную версию здесь.

Поддержка, проблемы и лицензионные вопросы

PSPDFKIT предлагает поддержку клиентов с активной лицензией SDK через https://pspdfkit.com/support/request/

Вы оцениваете наш SDK? Это здорово, мы рады помочь! Чтобы это быстро, используйте рабочую электронную почту и попросите кого -нибудь из вашей компании заполнить нашу форму продаж: https://pspdfkit.com/sales/

Начиная

Клонировать репо:

git clone https://github.com/PSPDFKit/pspdfkit-web-example-pwa.git
cd pspdfkit-web-example-pwa

Установите зависимости проекта с помощью npm :

npm install

Теперь, когда все установлено, нам нужно настроить приложение для использования нашего PSPDFKIT для ключа веб -лицензии.

Редактировать ./config/license-key и замените строку YOUR_LICENSE_KEY_GOES_HERE на лицензионный ключ, который вы получили по электронной почте.

Запуск примера

Мы готовы запустить приложение! ?

Чтобы запустить приложение в режиме разработки:

npm run start

Строите производственные артефакты

Чтобы создать производственную версию, просто следуйте вышеуказанному руководству, но вместо start :

npm run build

Затем сценарий сборки создаст файл с именем ./dist , который вы можете скопировать в свой веб-сервер AS-IS.

Как это работает

Под ./src вы можете найти простую оболочку приложения, которая загружает PSPDFKIT для Интернета.

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

Чтобы уменьшить количество шаблонов, мы используем Workbox - библиотеку из Google, которая устраняет часть сложности, связанной с созданием и конфигурацией работника службы.

Мы также используем Workbox-Cli, еще одну библиотеку из Google, для автоматического генерации манифестного файла для нашего предварительного кеша ServiceRoder, когда мы npm start . Вы можете найти этот файл конфигурации в ./src/workbox-config.js .

Чтобы позволить PDF -файлам сохраняться локально, чтобы их не нужно снова загружать, мы создали библиотеку PSPDFKitFileStore . Он использует легкую обертку и на основе Promise вокруг API IndexedDB, называемого idb под капотом. Код предназначен для работы независимо от примера PWA, а также может использоваться в Internet Explorer 11.

Мобильная поддержка

Если вы попытаетесь удаленно подключиться к локальному серверу разработки, вы быстро увидите, что PWA не работает, как и ожидалось. Это связано с тем, что API PWA требуют действительного сертификата SSL/TLS для правильной функции, и вы, вероятно, не будете иметь эту настройку локально.

Для лучшего опыта мы предлагаем вам проверить пример размещенного PWA или развернуть производственную сборку на свой собственный сервер.

Лицензия

Это программное обеспечение лицензировано по измененной лицензии BSD.

Внося

Пожалуйста, убедитесь, что вы подписали наш CLA, чтобы мы могли принять ваш вклад.