static pwa boilerplate

เทมเพลต HTML พื้นฐานสำหรับเว็บแอพพลิเคชั่นโปรเกรสซีฟแบบคงที่ที่ทันสมัย

พร้อมที่จะสร้างแอปพลิเคชันแบบโปรเกรสซีฟแบบคงที่ด้วยรายการและผู้ให้บริการสามารถปรับใช้ได้อย่างง่ายดายด้วยหน้า GitHub

รวมถึง:

• ภาพขนาดย่อ
• Skeleton CSS + Normalize
• เว็บแอพประจักษ์
• พนักงานบริการพื้นฐาน + สหายลงทะเบียน
• การสนับสนุนการแจ้งเตือนการกดเว็บครั้งแรก (คุณจะต้องมีเซิร์ฟเวอร์ภายนอก)

การสาธิต: https://gallaoro.github.io/static_pwa_boilerplate/ หรือเยี่ยมชมสาขา GH-PAGES ของที่เก็บนี้

การติดตั้ง

• ติดตั้ง git sudo apt-get install git
• โคลน repo: git clone https://github.com/lellefood/static_pwa_boilerplate.git
• Rename Directory: mv static_pwa_boilerplate <new_project_name>
• เปลี่ยนไดเรกทอรี: cd <new_project_name>
• แก้ไข manifest.json ด้วยข้อมูลของคุณ
• เริ่มเขียนเว็บไซต์ของคุณ

การพัฒนา

โครงสร้างโฟลเดอร์โครงการ

 root
├── css
│   └── skeleton.css
│   └── normalize.css
│   └── index.css
│
├── js
│   └── index.js
│
├── img
│   └── thumb
│       └── 64.png
│       └── 144.png
│       └── 192.png
│       └── 512.png
│       └── 1366x768.png
│
├── index.html
├── manifest.json
├── README.md
└── serviceworker.js

คำถามที่พบบ่อย

• ฉันจะเพิ่มหน้าใหม่ได้อย่างไร เพิ่มไฟล์ใหม่ <new_page_name>.html ในรูทของโครงการ
  ลิงก์ไปยังมันด้วย /<new_page_name>.html

• ฉันจะเพิ่มการแจ้งเตือนแบบพุชเว็บได้อย่างไร รหัสเริ่มต้นเพื่อรับ pushsubscription ได้รับแล้วในสคริปต์ index.js ให้ทำตามบทช่วยสอนนี้เพื่อทราบว่าเว็บพุชทำงานอย่างไร

ปรับใช้

ทำตามคำแนะนำง่ายๆบนเว็บไซต์ GitHub Pages เพื่อทราบวิธีการปรับใช้ PWA ของคุณฟรี