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

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

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

 



TingNong Tawatchai 223.207.231.xxx 26-03-2021 11:32:51

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

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


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


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

 ความคิดเห็นที่ 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 58.11.6.xxx 26-03-2021






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ