วันนี้จะลองทำอะไรง่ายๆดูหน่อย ขอเวลา 5 นาที แวะไปมาสร้าง PWA อย่างง่ายกันProgressive Web Apps (PWA) เป็นแอปพลิเคชันประเภทหนึ่งที่พัฒนาโดยใช้เทคโนโลยีเว็บและสามารถติดตั้งบนอุปกรณ์สมาร์ทโฟนหรือแทปเล็ตได้ เช่นเดียวกันกับแอปพลิเคชันทั่วไป การสร้าง PWA นั้นทำได้ง่ายมากแค่ต้องเพิ่มไฟล์สำคัญสองไฟล์ลงไปในโครงการ หลังจากนั้น PWA ก็จะพร้อมให้นำไปเผยแพร่ทันที ไม่พูดมากละเจ็บคอ (55+) ขั้นตอนมีดังนี้ครับ
1) สร้างไฟล์ HTML ตามที่คุณต้องการแสดงเป็นหน้าเว็บไซต์ โดยมีจุดสำคัญคือ แทค <link rel ... > ที่จะเชื่อมไปหาไฟล์ชื่อ manifest.json ซึ่งไฟล์นี้เราจะสร้างขึ้นในขั้นตอนที่ 2
<!DOCTYPE html>
<html>
<head>
<!-- Responsive -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<!-- Title -->
<title>PWA Tutorial</title>
<!-- Meta Tags requred for
Progressive Web App -->
<meta name=
"apple-mobile-web-app-status-bar"
content="#aa7700">
<meta name="theme-color"
content="black">
<!-- Manifest File link -->
<link rel="manifest"
href="manifest.json">
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks</h1>
<p>
This is a simple tutorial for
creating a PWA application.
</p>
<script>
// Script for Service Worker
</script>
</body>
</html>
2) สร้างไฟล์ manifest.json ขึ้นไว้ในไดเร็กทอรีเดียวกัน (ตามที่ <link rel=...> บอกไว้นั่นแหละ) ไฟล์นี้จะเป็นรูปแบบ JSON ซึ่งหลักๆก็ใช้บรรจุข้อมูลเกี่ยวกับเว็บแอปพลิเคชันที่เราจะสร้าง เช่น ชื่อแอปพลิเคชัน , URL เริ่มต้น , สีของธีมและไอคอน เป็นต้น
{
"name":"PWA Tutorial",
"short_name":"PWA",
"start_url":"index.html",
"display":"standalone",
"background_color":"#5900b3",
"theme_color":"black",
"scope": ".",
"description":"This is a PWA tutorial.",
"icons":[
{
"src":"images/icon-192x192.png",
"sizes":"192x192",
"type":"image/png"
},
{
"src":"images/icon-512x512.png",
"sizes":"512x512",
"type":"image/png"
}
]
}
3) สร้างโฟลเดอร์ใหม่ชื่อ images และวางไอคอนทั้งหมดที่เกี่ยวข้องกับแอปพลิเคชันในโฟลเดอร์นั้น ขอแนะนำให้มีขนาดของไอคอนอย่างน้อย 192 x 192 พิกเซลและ 512 x 512 พิกเซล โดยชื่อไฟล์ภาพและขนาดจะตรงกันกับที่ระบุไว้ใน manifest.json นั่นเอง
4) ตรวจดูความเรียบร้อย เช่น files และ folder นั้นสามารถเข้าถึงได้จริง
5) เปิดไฟล์ index.html ใน Chrome แล้วกด Ctrl+Shift+I เพื่อเข้าสู่ Chrome Developer Tools แล้วเลือกหัวข้อ manifest จากรายการเมนูที่ปรากฏขึ้นทางด้านซ้าย
6) ในแท็บ manifest หัวข้อ Installability จะแสดงว่า no service worker is detected. ดังนั้นเราจะต้องสร้างไฟล์ serviceworker.js ในไดเร็กทอรีเดียวกันนี้ ไฟล์นี้จะกำหนดค่าการปฏิบัติงานหรือบริการที่มีในแอปพลิเคชันของเรา
var staticCacheName = "pwa";
self.addEventListener("install", function (e) {
e.waitUntil(
caches.open(staticCacheName).then(function (cache) {
return cache.addAll(["/"]);
})
);
});
self.addEventListener("fetch", function (event) {
console.log(event.request.url);
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request);
})
);
});
7) ขั้นตอนสุดท้ายคือการเชื่อมโยงไฟล์ serviceworker.js เข้ากับ index.html โดยการเพิ่มสคริปต์ JavaScript ลงไปในไฟล์ index.html ของเรานั่นเอง
<script>
window.addEventListener('load', () => {
registerSW();
});
// Register the Service Worker
async function registerSW() {
if ('serviceWorker' in navigator) {
try {
await navigator
.serviceWorker
.register('serviceworker.js');
}
catch (e) {
console.log('SW registration failed');
}
}
}
</script>
หลังจากขั้นตอนที่ 7 เรียบร้อยแล้วก็ถือว่า PWA ของเราก็เสร็จสิ้นลงเรียบร้อยครับ ลองใช้ลองติดตั้งและลองเล่นกันได้เลย
ก็จบลงตรงนี้เลยละกันนะครับ เจอกันใหม่เมื่อมีอะไรสนุกๆ บายครับ
0 ความคิดเห็น