Cách tạo trang web PWA(Progress Web App) đơn giản dễ hiểu

Công nghệ

Progressive Web App hay PWA là một công nghệ mới phát triển trong vài năm gần đây,là một ựng dạng web chỉ sử dụng html,css,js nhưng có thể cài đặt trên điện thoại và truy cập online.Nếu bạn đang tìm hiểu Progressive Web App và muốn thực hành dễ hiểu nhất,tải code về xem thì có thể cùng CSTSoft tạo 1 web đơn giản PWA chạy trực tiếp trên internet

Progress Web App cơ bản gồm những gì?

PWAs cơ bản nhất là một web app được tạo từ HTML, CSS và JS đơn giản nhất.
PWA gồm một manifest.json chứa những thông tin cho ứng dụng của bạn, bao gồm icons, background, màu,tên App…
PWA gồm 1 file đăng ký Service Worker xử lý dữ liệu qua mạng online , offline
PWA có thể cài đặt như 1 ứng dụng app thông thường với 1 icon ngoài màn hình chính

Để tạo 1 PWA đơn giản bạn làm theo các bước đơn giản sau đây

Bước 1: Tạo 1 trang html bắt đầu ứng dụng, link tới file manifest.json.Đây là một file quan trọng sẽ được tạo trong bước tiếp theo. Có thể đặt index.html

Code:

<!DOCTYPE html>

<html>

<head>

content="width=device-width,

initial-scale=1">

content="ie=edge">

<title>PWA SonWeb</title>

<!-- Meta Tags required for

Progressive Web App -->

<meta name=

"apple-mobile-web-app-status-bar"

content="#aa7700">

content="blue">

href="manifest.json">

</head>

<body>

SonWeb App</h1>

<p>

This is a simple tutorial for

creating a PWA application.

</p>

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>

</body>

</html>

Bước 2: Tạo 1 file manifest.json cùng thư mục,File này về cơ bản chứa thông tin về ứng dụng web.Một số thông tin cơ bản bao gồm tên ứng dụng, URL bắt đầu, màu chủ đề và biểu tượng.Tất cả thông tin cần thiết được viết ở định dạng JSON
Code mẫu file maifest.json

{

"name":"PWA SonWeb",

"short_name":"PWA",

"start_url":"index.html",

"display":"standalone",

"background_color":"#5900b3",

"theme_color":"black",

"scope": ".",

"description":"This is a PWA simple.",

"icons":[

{

"src":"images/icon-192x192.png",

"sizes":"192x192",

"type":"image/png"

{

"src":"images/icon-512x512.png",

"sizes":"512x512",

"type":"image/png"

}

]

}

Bước 3: Tạo một thư mục mới là images và chứa icon cài đặt ứng dụng trong thư mục đó.Bạn nên có kích thước của các biểu tượng ít nhất là 192 x 192 pixel và 512 x 512 pixel.Tên image and kích thước nên khớp với khai báo trong manifest.json
Bước 4: Mở file index.html trong trình chuyệt Chorme dùng Chrome Developer Tools.Mở Mở manifest từ danh sách

Bước 5: Chúng tôi sẽ cần tạo một file serviceworker.js cho PWA cùng thư mục.File này xử lý cấu hình của dịch vụ, hoạt động của ứng dụng
Code serviceworker.js mẫu:

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);

})

);

});

bước 6: Bước cuối cùng là liên kết file service worker tới index.html,Thêm code script tag trong file index.html.