pspdfkit web example pwa

PSPDFKIT für Webbeispiele - PWA

Dieses Beispiel zeigt, wie PSPDFKit für Web integriert und eine PWA (Progressive Web App) erstellt wird.

Sie können sich hier eine Live -Vorschau ansehen: PSPDFKit.com/pwa.

Diese Beispielanwendung verfügt über ein grundlegendes PWA -Setup, einschließlich eines Manifest und eines Serviceleisters, damit Ihre App offline und ein indiziertesDB -Speicher für PDFs funktionieren kann. Auf diese Weise werden Ihre Dateien auch nach dem Schließen des Browsers bestehen.

In diesem Beispiel verwenden wir Workbox, ein beliebtes PWA -Framework von Google.

Voraussetzungen

• Node.js
• Ein PSPDFKIT für Weblizenz. Wenn Sie noch keine haben, können Sie hier eine kostenlose Testversion anfordern.

Support, Fragen und Lizenzfragen

PSPDFKIT bietet Kunden mit einer aktiven SDK -Lizenz über https://pspdfkit.com/support/request/ Unterstützung

Bewerten Sie unseren SDK? Das ist großartig, wir helfen gerne! Um sicherzustellen, dass dies schnell ist, verwenden Sie bitte eine Arbeits -E -Mail und lassen Sie jemanden von Ihrem Unternehmen unser Verkaufsformular ausfüllen: https://pspdfkit.com/sales/

Erste Schritte

Klonen Sie das Repo:

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

Installieren Sie die Projektabhängigkeiten mit npm :

npm install

Nachdem alles installiert ist, müssen wir die App so konfigurieren, dass sie unseren PSPDFKit für den Weblizenzschlüssel verwenden.

Bearbeiten ./config/license-key und ersetzen Sie die Zeichenfolge YOUR_LICENSE_KEY_GOES_HERE durch den Lizenzschlüssel, den Sie per E-Mail erhalten haben.

Ausführen des Beispiels

Wir sind bereit, die App zu starten! ?

So führen Sie die App im Entwicklungsmodus aus:

npm run start

Produktionsartefakte bauen

Um eine Produktionsversion zu erstellen, folgen Sie einfach dem oben genannten Leitfaden, aber anstatt zu start :

npm run build

Das Build-Skript erstellt dann eine Datei namens ./dist , die Sie in Ihren Webserver als IS kopieren können.

Wie es funktioniert

Unter ./src

Die Bewerbung verwendet einen Servicearbeiter, um den Großteil der Vermögenswerte Offline-Support und Vorabbildung zu bieten.

Um die Menge an Kesselplatten zu verringern, verwenden wir Workbox - eine Bibliothek von Google, die einen Teil der Ausführlichkeiten abstrahiert, die der Erstellung und Konfiguration der Servicearbeiter verbunden ist.

Wir verwenden auch Workbox-Cli, eine andere Bibliothek von Google, um automatisch eine Manifestdatei für unseren Serviceworker Pre-Cache zu generieren, wenn wir npm start ausführen. Sie finden diese Konfigurationsdatei in ./src/workbox-config.js .

Damit PDFs vor Ort bestehen bleiben können, müssen sie nicht erneut heruntergeladen werden, wir haben die PSPDFKitFileStore -Bibliothek erstellt. Es verwendet eine leichte und Promise Wrapper um die indexeddb -API, die als idb unter der Haube namens Kapuze namens ist. Der Code ist so konzipiert, dass er unabhängig vom PWA -Beispiel funktioniert, und kann auch im Internet Explorer 11 verwendet werden.

Mobiler Support

Wenn Sie versuchen, eine Verbindung zum lokalen Entwicklungsserver aus der Ferne herzustellen, erkennen Sie schnell, dass die PWA nicht wie erwartet funktioniert. Dies liegt an der Tatsache, dass die PWA -APIs ein gültiges SSL/TLS -Zertifikat erfordern, um ordnungsgemäß zu funktionieren, und Sie werden dieses Setup wahrscheinlich nicht vor Ort haben.

Für eine bessere Erfahrung empfehlen wir Ihnen, das gehostete PWA -Beispiel zu lesen oder einen Produktionsaufbau auf Ihrem eigenen Server bereitzustellen.

Lizenz

Diese Software ist unter einer modifizierten BSD -Lizenz lizenziert.

Beitragen

Bitte stellen Sie sicher, dass Sie unsere CLA unterschrieben haben, damit wir Ihre Beiträge akzeptieren können.