이 예제는 웹에 pspdfkit을 통합하고 PWA (Progressive Web App)를 만드는 방법을 보여줍니다.
PSPDFKIT.com/pwa를 여기에서는 라이브 미리보기를 확인할 수 있습니다.
이 샘플 애플리케이션에는 매니페스트 및 서비스 작업자를 포함한 기본 PWA 설정이있어 앱이 오프라인으로 기능 할 수 있으며 PDFS 용 인덱스 edB 스토리지가 있습니다. 이렇게하면 브라우저를 닫은 후에도 파일이 지속됩니다.
이 예에서는 Google에서 인기있는 PWA 프레임 워크 인 WorkBox를 사용합니다.
PSPDFKIT는 https://pspdfkit.com/support/request/를 통해 활성 SDK 라이센스를 가진 고객을 지원합니다.
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을로드하는 간단한 응용 프로그램 쉘을 찾을 수 있습니다.
이 응용 프로그램은 서비스 작업자를 사용하여 대부분의 자산에 대한 오프라인 지원 및 사전 캐칭을 제공합니다.
보일러 플레이트의 양을 줄이기 위해, 우리는 서비스 작업자 생성 및 구성과 관련된 일부 구동성을 추상화하는 Google의 라이브러리 인 WorkBox를 사용합니다.
또한 Google의 다른 라이브러리 인 Workbox-Cli를 사용하여 npm start 실행할 때 ServiceWorker Pre-Cache에 대한 매니페스트 파일을 자동으로 생성합니다. 이 구성 파일은 ./src/workbox-config.js 에서 찾을 수 있습니다.
PDF를 로컬로 유지할 수 있도록 다시 다운로드 할 필요가 없도록 PSPDFKitFileStore 라이브러리를 만들었습니다. 후드 아래에서 idb 라는 INDEXEDDB API 주변의 가볍고 Promise 기반 래퍼를 사용합니다. 이 코드는 PWA 예제와 독립적으로 작동하도록 설계되었으며 Internet Explorer 11에서도 사용할 수 있습니다.
로컬 개발 서버에 원격으로 연결하려고하면 PWA가 예상대로 작동하지 않는다는 것을 빨리 알 수 있습니다. 이는 PWA API가 올바르게 작동하기 위해 유효한 SSL/TLS 인증서가 필요 하며이 설정이 로컬로 있지 않기 때문입니다.
더 나은 경험을 보려면 호스팅 된 PWA 예제를 확인하거나 프로덕션 빌드를 자신의 서버에 배포하는 것이 좋습니다.
이 소프트웨어는 수정 된 BSD 라이센스에 따라 라이센스가 부여됩니다.
귀하의 기부금을 수락 할 수 있도록 CLA에 서명했는지 확인하십시오.