helloo xin chào toàn thể anh em cùng tất cả mọi người. Và trong bài viết ngày
hôm nay thì mình xin chia sẽ cho anh em cách mà chúng ta có thể tạo ứng dụng
web ngay trên chính website của chúng ta lun nhé ( Progressive Web App
).
Bước 25: lưu lại và tiến hành với những công việc ki-dev2, ki-dev3, ki-dev4 bằng những mã mà mình đã đề ra bên dưới.
Mã ki-dev2
Mã ki-dev3
|
| Tạo ứng dụng web tiến bộ cho blogger (Progressive Web App) |
thông thường thì chúng ta thường hay tạo một app riêng và sau đó tải về.
Nhưng đối với nhứng dụng web này thì nó sẽ hoạt động trên mọi trình duyệt
và bạn có thể tải nó về bất cứ lúc nào. Chúng tao sẽ không tải file app
apk mà là cài trực tiếp từ trình duyệt về.
1. Ứng dụng web tiến bộ là gì?
Ứng dụng web tiến bộ, thường được gọi là PWA, là một thuật ngữ do
Google tạo ra để mô tả các ứng dụng web có thể cài đặt và hoạt động
ngoại tuyến. PWA kết hợp các tính năng của các trang web thông thường và
các ứng dụng di động. Chúng có thể cài đặt trên các thiết bị, có thể
hoạt động ngoại tuyến và gửi thông báo cho người dùng. Nói cách khác,
PWA cung cấp những gì tốt nhất của cả hai thế giới. Người dùng có thể
truy cập chúng thông qua trình duyệt web và chúng sẽ hoạt động ngay cả
khi người dùng không kết nối với internet.
Ứng dụng web tiến bộ là trải nghiệm kết hợp những gì tốt nhất của web
và ứng dụng dành cho thiết bị di động. Chúng hữu ích, nhanh chóng và hấp
dẫn, với mức sử dụng dữ liệu thấp và hỗ trợ ngoại tuyến. PWA sử dụng các
khả năng web hiện đại để mang lại trải nghiệm giống như ứng dụng cho
người dùng.
2. Tính năng PWA là gì?
Các ứng dụng web tiến bộ cung cấp rất nhiều tính năng không có sẵn trên
các trang web truyền thống. Dưới đây là một số tính năng chính: - Hỗ trợ
ngoại tuyến: Khi bạn đã cài đặt một ứng dụng web tiến bộ, ứng dụng này
sẽ hoạt động ngay cả khi bạn không kết nối với Internet. - Tốc độ: Các
ứng dụng web tiến bộ được thiết kế để tải nhanh chóng, ngay cả trên các
mạng chậm. - Thông báo đẩy: PWA có thể gửi thông báo đẩy cho người dùng
của bạn, ngay cả khi họ không sử dụng ứng dụng. - Cài đặt trên màn hình
chính: Người dùng có thể "cài đặt" PWA trên màn hình chính của họ, giống
như các ứng dụng truyền thống. - Cập nhật dễ dàng: Các ứng dụng web tiến
bộ được cập nhật tự động, giống như các ứng dụng truyền thống.
3: cách tạo ứng dụng web tiến bộ. ( PWA )
Bước 1: - Đầu tiên tạo Favicon của bạn ở kích thước 512 × 512 với định
dạng Png.
Bước 2: - Sau đó mở
Công cụ tạo Favicon này
.
Bước 3: - Sau khi nhấp vào Chọn tệp và chọn hình ảnh Png yêu thích của
bạn.
Bước 4: - Sau đó Click vào Create Favicon.
Bước 5: - Sau đó Click vào "Download The Generated Favicon".
Bước 6: - Sau đó giải nén ngay Tải xuống tệp zip Favicon.
Bước 7: - Sau đó xóa tệp phần đã đánh dấu.
Bước 8: - Sau đó Đăng nhập Tài khoản Blogger của bạn.
Bước 9: - Sau đó Click vào Menu Theme> Chỉnh sửa Html.
Bước 10: - Sau đó đặt mã bên dưới dưới <head> thẻ.
Lưu ý: hãy đạt nó sát vào thẻ <head> và không có bất cứ mã nào khác nằm phía trên mã này. Nếu như không làm đúng yêu cầu thì sẽ không làm được
<meta content='#6200ee' name='theme-color' />
<meta content='#6200ee' name='msapplication-navbutton-color' />
<meta content='#6200ee' name='apple-mobile-web-app-status-bar-style' />
<meta content='true' name='apple-mobile-web-app-capable' />
<link href="/favicon.ico" rel='icon' type='image/x-icon' />
<link href="/favicon.ico" rel='shortcut icon' type='image/x-icon' />
<link href="/main/apple-icon-57x57.png" rel='apple-touch-icon' sizes='57x57' />
<link href="/main/apple-icon-60x60.png" rel='apple-touch-icon' sizes='60x60' />
<link href="/main/apple-icon-72x72.png" rel='apple-touch-icon' sizes='72x72' />
<link href="/main/apple-icon-76x76.png" rel='apple-touch-icon' sizes='76x76' />
<link href="/main/apple-icon-114x114.png" rel='apple-touch-icon' sizes='114x114' />
<link href="/main/apple-icon-120x120.png" rel='apple-touch-icon' sizes='120x120' />
<link href="/main/apple-icon-114x114.png" rel='apple-touch-icon' sizes='144x144' />
<link href="/main/apple-icon-152x152.png" rel='apple-touch-icon' sizes='152x152' />
<link href="/main/apple-icon-180x180.png" rel='apple-touch-icon' sizes='180x180' />
<link href="/main/android-icon-192x192.png" rel='icon' sizes='192x192' type='image/png' />
<link href="/main/favicon-32x32.png" rel='icon' sizes='32x32' type='image/png' />
<link href="/main/favicon-96x96.png" rel='icon' sizes='96x96' type='image/png' />
<link href="/main/favicon-16x16.png" rel='icon' sizes='16x16' type='image/png' />
<meta content='#007fa0' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<link href="/manifest.json" rel='manifest' />
Bước 11: - Bây giờ nhấp vào Lưu chủ đề.
Bước 12: - Sau khi Truy cập GitHub và Hoàn tất Quy trình Đăng nhập hoặc
Đăng ký.
Bước 13: - Sau đó nhấp vào Mục kho lưu trữ và nhấp vào New
Repository.
Bước 14: - Sau đó nhấp vào Add File> Upload Files.
Bước 15: - Sau đó chọn All Created Favicon và Upload Now
Bước 17: - Sau đó Đăng nhập Tài khoản Cloudflare của Bạn và
Chọn Trang web của Bạn.
Lưu ý: - Bắt buộc phải là trang web của bạn đã xác nhận trên
Cloudflare. Đây là Hướng dẫn Chỉ dành cho Người dùng Miền Tùy chỉnh,
Không phải Người dùng Miền Phụ của Blogspot.Com.
Bước 18: - Sau đó Click vào mục Workers
Bước 19: - Sau khi Click vào Manage Worker.
Bước 20: - Sau đó Click vào Create Service.
Bước 21: - Sau đó Thêm Tên Công nhân và Nhấp vào Tạo Dịch vụ.
Bước 22: - Sau đó tạo thêm 3 dịch vụ mới khác với cách làm tương tự,
thêm tên như sau:
đối với tên thì các bạn có thể tùy ý đặt. miễn là dễ quản lí là được
ha.
- ki-dev1
- ki-dev2
- ki-dev3
- ki-dev4
Bước 23: - Bây giờ mở Dịch vụ ki-dev1 và nhấp vào Chỉnh sửa
Quik Edit.
Bước 24: - Bây giờ xóa các mã cũ và dán mã ki-dev1 đầu tiên của chúng
tôi.
Mã Ki-dev1
const html = `<!DOCTYPE html>
<head>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
</head>
<body style=" background: #fff; ">
<div style=" margin: 0 auto; max-width: 1000px; text-align: center; padding-top: 100px; color: #111; ">
<div style=" font-family: Arial,Helvetica,sans-serif; font-size: 50px; ">Oops, You're Offline!</div>
<div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">It looks like your network connection isn't working right now.</div>
</div> </body>`
async function handleRequest(request) {
return new Response(html, {
headers: {
"content-type": "text/html;charset=UTF-8",
},
})
}
addEventListener("fetch", event => {
return event.respondWith(handleRequest(event.request))
})
Bước 25: lưu lại và tiến hành với những công việc ki-dev2, ki-dev3, ki-dev4 bằng những mã mà mình đã đề ra bên dưới.
Mã ki-dev2
const js = `
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
if (workbox) {
workbox.core.skipWaiting();
workbox.core.clientsClaim();
workbox.core.setCacheNameDetails({
prefix: 'thn-sw',
suffix: 'v22',
precache: 'install-time',
runtime: 'run-time'
});
const FALLBACK_HTML_URL = '/offline.html';
const version = workbox.core.cacheNames.suffix;
workbox.precaching.precacheAndRoute([{url: FALLBACK_HTML_URL, revision: null},{url: '/manifest.json', revision: null},{url: '/favicon.ico', revision: null}]);
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkOnly());
workbox.routing.registerRoute(
new RegExp('.(?:css|js|png|gif|jpg|svg|ico)$'),
new workbox.strategies.CacheFirst({
cacheName: 'images-js-css-' + version,
plugins: [
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 24 * 60 * 60,
maxEntries:200,
purgeOnQuotaError: true
})
],
}),'GET'
);
workbox.routing.setCatchHandler(({event}) => {
switch (event.request.destination) {
case 'document':
return caches.match(FALLBACK_HTML_URL);
break;
default:
return Response.error();
}
});
self.addEventListener('activate', function(event) {
event.waitUntil (
caches
.keys()
.then(keys => keys.filter(key => !key.endsWith(version)))
.then(keys => Promise.all(keys.map(key => caches.delete(key))))
);
});
}
else {
console.log('Boo! Workbox didnt load ');
}
`
async function handleRequest(request) {
return new Response(js, {
headers: {
"content-type": "application/javascript;charset=UTF-8",
},
})
}
addEventListener("fetch", event => {
return event.respondWith(handleRequest(event.request))
})
Mã ki-dev3
addEventListener("fetch", event => {
event.respondWith(handleRequest(event))
})
//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/vkhai2603/iconweb`
async function serveAsset(event) {
const url = new URL(event.request.url)
const cache = caches.default
let response = await cache.match(event.request)
if (!response) {
response = await fetch(`${BUCKET_URL}${url.pathname}`)
const headers = { "cache-control": "public, max-age=14400" }
response = new Response(response.body, { ...response, headers })
event.waitUntil(cache.put(event.request, response.clone()))
}
return response
}
async function handleRequest(event) {
if (event.request.method === "GET") {
let response = await serveAsset(event)
if (response.status > 399) {
response = new Response(response.statusText, { status: response.status })
}
return response
} else {
return new Response("Method not allowed", { status: 405 })
}
}
Đã đánh dấu "vkhai2603" Thay thế bằng Tên người dùng Github của bạn.
Đã đánh dấu "iconweb" Thay thế bằng tên kho lưu trữ được tạo gần đây của bạn cho Github
Mã ki-dev4
addEventListener("fetch", event => {
const data = {
name: "kimidev",
short_name: "kimidev",
display: "standalone",
prefer_related_applications: false,
start_url: ".",
scope: "\/",
background_color: "#fff",
theme_color: "#6200ee",
description: "kimidev is a site that provides the best widgets with a wide variety of styles for the Blogger platform, complete with very easy installation tutorials.",
icons:[
{
src: "\/main\/android-icon-36x36.png",
sizes: "36x36",
type: "image\/png",
density: "0.75",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-48x48.png",
sizes: "48x48",
type: "image\/png",
density: "1.0",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-72x72.png",
sizes: "72x72",
type: "image\/png",
density: "1.5",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-96x96.png",
sizes: "96x96",
type: "image\/png",
density: "2.0",
purpose: "any maskable"
},
{
src: "\/main\/apple-icon-144x144.png",
sizes: "144x144",
type: "image\/png",
density: "3.0",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-192x192.png",
sizes: "192x192",
type: "image\/png",
density: "4.0",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-512x512.png",
sizes: "512x512",
type: "image/png",
density: "4.0",
purpose: "any maskable"
},
],
"serviceworker": {
"src": "/sw.js"
}
}
const json = JSON.stringify(data, null, 2)
return event.respondWith(
new Response(json, {
headers: {
"content-type": "application/json;charset=UTF-8"
}
})
)
})
thay thế các phần mà mình đánh dấu theo ý của bạn.
Bước 27: - Bây giờ Quay lại và Một lần nữa Mở Phần
Workers Sau đó Nhấp vào
Add route
Bước 28: - Bây giờ Tạo Tuyến đường cho Thích Trang Ngoại tuyến. Đây là
công nhân hiện tại ki-dev1
Bước 29: - Sau đó sử dụng cùng một cách để thêm 3 tuyến còn lại: ki-dev2,
ki-dev3,ki-dev4
| No | Service | Environment | Route |
|---|---|---|---|
| 1 | ki-dev1 | production | www.example.com/offline.html |
| 2 | ki-dev2 | production | www.example.com/sw.js |
| 3 | ki-dev3 | production | www.example.com/main/* |
| 4 | ki-dev4 | production | www.example.com/manifest.json |
Bước 30: - Bây giờ hãy đóng Cloudflare và truy cập vào
Blogger.
Bước 31: - Cuối cùng, Đăng nhập lại Tài khoản Blogger của
bạn.
Bước 32: - Sau đó sao chép mã đã cho và đặt nó ở trên
</body>
<script type='text/javascript'>
//<![CDATA[
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
//]]>
</script>
Bước 33: bây giờ các bạn lưu lại và xem thành quả của mình
nhé.
Và phía trên thì mình vừa share cho các bạn cách mà chúng ta có thể tạo
ra một cái app pwa ( Progressive Web App ). Nếu như có thắc mắc gì
mọi người có thể comment bên dưới mình sẽ giải đáp cho mọi người nhé. Chúc
mọi người thành công nhe.
Design by @KiMiDev
ok cho 5 sao