ขอแนวทางเขียนโค๊ด เพิ่มเว็ปไซร์ลงหน้าจอหลักแบบนี้หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอแนวทางเขียนโค๊ด เพิ่มเว็ปไซร์ลงหน้าจอหลักแบบนี้หน่อยครับ

ขอแนวทางเขียนโค๊ด เพิ่มเว็ปไซร์ลงหน้าจอหลักแบบนี้หน่อยครับ

TingNong Tawatchai 26-03-2021 11:32:51

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองดูตามลิ้งค์นี้ Add to Home screen เป็นแนวทาง
หรือดูเกี่ยวกับ Progressive Web Apps ก็ได้

>>> อัพเดท >>> 26-03-2021
------------------------------------------

แนวทางอย่างง่าย

สร้างไฟล์ serviceWorker เช่นใช้ชื่อเป็น service-worker.js

โค้ดไฟล์ service-worker.js

self.addEventListener('fetch', function(event){
});

สร้างไฟล์ Web app Manifests

ไฟล์ manifest.json

{
	"name": "Ninenik.com",
	"short_name": "Ninenik",
	"start_url": "/?app",
	"display": "standalone",
	"background_color": "#f08b86",
	"Theme_color": "#D60000",								
	"icons": [
		{
		"src": "/images/logo-2-512x512.png",
		"sizes": "512x512",
		"type": "image/png",
		"density": "4.0"
		}
	]
}

กำหนดแท็กค่าต่างในไฟล์หลัก หรือ index ประมาณนี้

<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Document</title>
	<link rel="icon" href="https://example.com/images/logo-32x32.png" sizes="32x32" />
	<link rel="icon" href="https://example.com/images/logo-192x192.png" sizes="192x192" />
	<link rel="apple-touch-icon" href="https://example.com/images/logo-180x180.png" />
	<link rel="manifest" href="/manifest.json">	
	<meta name="msapplication-TileImage" content="https://example.com/images/logo-2-270x270.png" />	
	<meta name="theme-color" data-theme="color"  content="#D60000" />
	<meta name="msapplication-TileColor" content="#D60000">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="Ninenik.com" />
	<meta name="apple-mobile-web-app-status-bar-style" content="#D60000" /> 	
	</head>
<body>
	

	
	
<!--กำหนดการใช้งาน service worker-->
 <script type="text/javascript">	
if ('serviceWorker' in navigator) {
//    console.log("Will the service worker register?");
navigator.serviceWorker.register('https://example.com/service-worker.js')
  .then(function(reg){
//      console.log("Yes, it did.");
  }).catch(function(err) {
//        console.log("No it didn't. This happened: ", err)
  });
}
</script>  
</body>
</html>

Ninenik 26-03-2021

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน