pspdfkit web example pwa การดาวน์โหลด

pspdfkit web example pwa

ข้อมูลเว็บไซต์

1.0.0

ดาวน์โหลด

PSPDFKIT สำหรับตัวอย่างเว็บ - PWA

ตัวอย่างนี้แสดงวิธีการรวม PSPDFKIT สำหรับเว็บและสร้าง PWA (แอปพลิเคชันเว็บแบบก้าวหน้า)

คุณสามารถตรวจสอบตัวอย่างสดได้ที่นี่: pspdfkit.com/pwa

แอปพลิเคชั่นตัวอย่างนี้มีการตั้งค่า PWA พื้นฐานรวมถึงรายการและผู้ปฏิบัติงานบริการเพื่อให้แอปของคุณทำงานออฟไลน์รวมถึงที่เก็บข้อมูล DENDINEDDB สำหรับ PDFS ด้วยวิธีนี้ไฟล์ของคุณจะคงอยู่แม้หลังจากที่คุณปิดเบราว์เซอร์

ในตัวอย่างนี้เราใช้ Workbox ซึ่งเป็นเฟรมเวิร์ก PWA ยอดนิยมของ Google

ข้อกำหนดเบื้องต้น

node.js
PSPDFKIT สำหรับใบอนุญาตเว็บ หากคุณยังไม่มีคุณสามารถขอทดลองใช้ฟรีได้ที่นี่

การสนับสนุนปัญหาและคำถามใบอนุญาต

PSPDFKIT ให้การสนับสนุนลูกค้าด้วยใบอนุญาต SDK ที่ใช้งานอยู่ผ่าน https://pspdfkit.com/support/request/

คุณกำลังประเมิน SDK ของเราหรือไม่? เยี่ยมมากเรายินดีที่จะช่วยเหลือ! เพื่อให้แน่ใจว่านี่เป็นสิ่งที่รวดเร็วโปรดใช้อีเมลที่ทำงานและมีใครบางคนจาก บริษัท ของคุณกรอกแบบฟอร์มการขายของเรา: https://pspdfkit.com/sales/

เริ่มต้น

โคลน repo:

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 DIST ซึ่งคุณสามารถคัดลอกไปยังเว็บเซิร์ฟเวอร์ของคุณได้

มันทำงานอย่างไร

ภายใต้ ./src คุณสามารถค้นหาเชลล์แอปพลิเคชันง่าย ๆ ที่โหลด PSPDFKIT สำหรับเว็บ

แอปพลิเคชันใช้ผู้ปฏิบัติงานบริการเพื่อให้การสนับสนุนแบบออฟไลน์และการแคชล่วงหน้าสำหรับสินทรัพย์ส่วนใหญ่

เพื่อลดปริมาณของหม้อไอน้ำเราใช้ Workbox - ไลบรารีจาก Google ที่เป็นบทสรุปคำฟากบางอย่างที่เกี่ยวข้องกับการสร้างและการกำหนดค่าผู้ปฏิบัติงานบริการ

นอกจากนี้เรายังใช้ Workbox-CLI ซึ่งเป็นไลบรารีอื่นจาก Google เพื่อสร้างไฟล์รายการสำหรับผู้ให้บริการล่วงหน้าโดยอัตโนมัติเมื่อเราเรียกใช้ npm start คุณสามารถค้นหาไฟล์กำหนดค่านี้ได้ใน ./src/workbox-config.js

เพื่อให้ PDF ยังคงอยู่ในพื้นที่ดังนั้นพวกเขาจึงไม่จำเป็นต้องดาวน์โหลดอีกครั้งเราได้สร้างไลบรารี PSPDFKitFileStore มันใช้ wrapper ที่มีน้ำหนักเบาและ Promise รอบ ๆ indexedDB API ที่เรียกว่า idb ภายใต้ฮูด รหัสได้รับการออกแบบมาเพื่อทำงานอย่างอิสระจากตัวอย่าง PWA และยังสามารถใช้ใน Internet Explorer 11

ฝ่ายสนับสนุนมือถือ

หากคุณพยายามเชื่อมต่อกับเซิร์ฟเวอร์การพัฒนาท้องถิ่นจากระยะไกลคุณจะเห็นได้อย่างรวดเร็วว่า PWA ไม่ทำงานตามที่คาดไว้ นี่เป็นเพราะความจริงที่ว่า PWA API นั้นต้องการใบรับรอง SSL/TLS ที่ถูกต้องเพื่อใช้งานได้อย่างเหมาะสมและคุณอาจไม่มีการตั้งค่านี้ในเครื่อง

สำหรับประสบการณ์ที่ดีกว่าเราขอแนะนำให้คุณตรวจสอบตัวอย่าง PWA ที่โฮสต์หรือปรับใช้งานสร้างการผลิตไปยังเซิร์ฟเวอร์ของคุณเอง