Bạn có các câu hỏi ? Liên hệ với chúng tôi Messenger !

Cách tạo PWA (Ứng dụng web tiến bộ) cho Blogger

Xây dựng Ứng dụng web tiến bộ cho Trang web Blogger của bạn để nâng cao trải nghiệm của khách truy cập một cách dễ dàng.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Xây dựng Ứng dụng web tiến bộ cho Trang web Blogger của bạn để nâng cao trải nghiệm của du khách một cách dễ dàng.

Xin chào! Chào mừng bạn đến với Trang Web Mai Nhật Lâm ☭

Bạn đã bao giờ nhận thấy trên một số trang web khi bạn truy cập, nó hiển thị lời nhắc "Thêm vào màn hình chính"? Nếu có và bạn cũng muốn tạo cho trang web của mình thì bạn đã đến đúng nơi.

Kích hoạt ứng dụng web tiến bộ trong Blogger
© Mai Nhật Lâm ☭ Thiết kế | Ứng dụng web tiến bộ dành cho Blogger

Trong bài viết này, tôi sẽ hướng dẫn bạn xây dựng PWA ( Ứng dụng web tiến bộ ) cho trang web của bạn một cách dễ dàng.

Vì vậy, trước khi bắt đầu quá trình thiết lập PWA Đối với trang web của mình, bạn phải biết PWA là gì và tại sao nó lại quan trọng đối với trang web của bạn.

PWA (Ứng dụng web tiến bộ) là gì

Ứng dụng web tiến bộ là một cách mới để tạo trải nghiệm giống như bản gốc trên web. Họ kết hợp những gì tốt nhất của cả hai thế giới, cung cấp cho người dùng những gì tốt nhất của một trang web và một ứng dụng.

Ứng dụng web tiến bộ là một ứng dụng webview có thể được cài đặt trên điện thoại hoặc máy tính bảng của bạn giống như một ứng dụng nhưng được xây dựng bằng công nghệ web. Điều này có nghĩa là bạn có thể thêm các tính năng như thông báo đẩy và hỗ trợ ngoại tuyến mà không cần phải tạo một ứng dụng gốc riêng biệt.

Tại sao PWA lại quan trọng?

Ứng dụng web tiến bộ là một trang web hoạt động giống như một ứng dụng trên thiết bị của người dùng. Nó tải nhanh chóng, đáp ứng với các thiết bị khác nhau và có thể được truy cập bất cứ lúc nào mà không cần tải xuống bất cứ thứ gì.

Ứng dụng web tiến bộ mang lại trải nghiệm tốt hơn so với trang web truyền thống cho cả người dùng và nhà phát triển. Nó có các tính năng thường được tìm thấy trong các ứng dụng gốc như thông báo đẩy, hỗ trợ ngoại tuyến và biểu tượng màn hình chính. Điều này có nghĩa là nó sẽ tải nhanh hơn, trông đẹp hơn trên tất cả các loại màn hình, có nhiều chức năng hơn so với một trang web thông thường và sẽ khả dụng ngay cả khi thiết bị ngoại tuyến.

Cách tạo PWA cho Blogger

Để xây dựng Ứng dụng web tiến bộ, bạn sẽ cần thêm một số tính năng vào trang web của mình. Các tính năng này bao gồm nhân viên dịch vụ, cho phép trang web của bạn hoạt động ngoại tuyến và thông báo đẩy khi người dùng quay lại trang web của bạn. Bạn cũng có thể cài đặt lời nhắc Thêm vào màn hình chính trên trang web của mình để nhắc người dùng thêm trang web hoặc ứng dụng của bạn vào màn hình chính trên thiết bị di động hoặc máy tính để bàn của họ.

Hướng dẫn này có thể hơi khó hiểu, nhưng nếu bạn làm theo tất cả các bước một cách chính xác, chắc chắn bạn sẽ có thể xây dựng PWA cho Trang web Blogger của mình.

Quá trình này yêu cầu Miền tùy chỉnh có tích hợp Cloudflare và không thể thực hiện trên miền phụ .blogspot với quy trình này. Với .blogspot, bạn không thể thiết lập service worker.

Yêu cầu

Trước khi chúng tôi bắt đầu, có một số điều phải được yêu cầu để Kích hoạt PWA:

  1. Biểu tượng Blog ở .pngphần mở rộng có kích thước 512 × 512
  2. 5 Ảnh chụp màn hình của các Trang web của bạn trong .pngphần mở rộng
  3. Phải có Tài khoản GitHub
  4. Quản lý DNS: Blog phải vượt qua Cloudflare

Tải lên các biểu tượng

  1. Chuẩn bị một biểu tượng cho blog của bạn
  2. mở .pngrộng với kích thước 512 × 512.
    * Đổi tên tệp thànhandroid-icon-512x512.png
  3. Truy cập favicon-generator.org và tải lên Biểu tượng Blog.
  4. Tải xuống biểu tượng yêu thích đã tạo và giải nén các tệp.
  5. * Xóa các tệp không cần thiết như:
    browserconfig.xml
    manifest.json
  6. Tạo Kho lưu trữ , tức là icon-fineshoptrên GitHub và tải lên tất cả các tệp biểu tượng trong mainnhánh.
    * Tải lên tệp gốc, tức là android-icon-512x512.png.
    Tổng số biểu tượng sẽ là khoảng 26.

Tải lên ảnh chụp màn hình

  1. Chuẩn bị 5 ảnh chụp màn hình của các Trang Web của bạn trong .pngphần mở rộng sẽ xuất hiện khi nó hiển thị nút cài đặt.
  2. Đặt tên cho các ảnh chụp màn hình trong chuỗi:
    scr1.png
    scr2.png
    scr3.png
    scr4.png
    scr5.png
  3. Tải lên các ảnh chụp màn hình này trong mainnhánh của cùng một Kho lưu trữ GitHub.

Creating Workers in Cloudflare

Chúng ta sẽ tạo 4 Worker trong Cloudflare, để dễ dàng hơn trong việc tạo ROUTE sau này, mình sẽ gợi ý các bạn lưu nó với tên worker và tên blog, ví dụ: main-fineshop manifest-fineshop serviceworker-fineshop offline-fineshop



Main Worker

  1. Đăng nhập vào tài khoản Cloudflare của bạn.
  2. Chuyển đến phần Công nhân và nhấp vào Quản lý công nhân.
  3. Nhấp vào Tạo dịch vụ và đổi tên dịch vụ thành main-blogname, tức là main-fineshop.
  4. Xóa tập lệnh hiện có, thay thế bằng tập lệnh sau:
addEventListener("fetch", event => {
event.respondWith(handleRequest(event))
})

//const BUCKET_NAME = "main"
const BUCKET_URL = `https://cdn.statically.io/gh/kumardeo080/icon-fineshop`

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 })
}
}
  1. * Thay thế các phần được đánh dấu, tức là
    kumardeo080bằng tên người dùng GitHub
    icon-fineshopbằng tên Kho lưu trữ của bạn
  2. Nhấp vào Lưu và Triển khai.

Manifest.json

  1. Theo cách tương tự, hãy tạo một Dịch vụ và đổi tên manifest-blogname, tức là manifest-fineshop.
  2. Thay thế tập lệnh hiện có bằng tập lệnh sau:
addEventListener("fetch", event => {
const data = {
name: "Fineshop Design",
short_name: "Fineshop Design",
description: "Install Now Fineshop Design - Let's fuel creativity",
display: "standalone",
prefer_related_applications: false,
start_url: "\/?utm_source=homescreen",
scope: "\/",
background_color: "#2196f3",
theme_color: "#2196f3",
icons: [
{
src: "\/main\/android-icon-512x512.png",
sizes: "512x512",
type: "image\/png",
density: "4.0",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-192x192.png",
sizes: "192x192",
type: "image\/png",
density: "4.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-96x96.png",
sizes: "96x96",
type: "image\/png",
density: "2.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-48x48.png",
sizes: "48x48",
type: "image\/png",
density: "1.0",
purpose: "any maskable"
},
{
src: "\/main\/android-icon-36x36.png",
sizes: "36x36",
type: "image\/png",
density: "0.75",
purpose: "any maskable"
}
],
shortcuts: [
{
name: "Fineshop Design",
short_name: "Fineshop Design",
description: "The Best Website where you can find Blogger Widgets, Tech News, Tech Reviews, Coding related Tutorials and many more.",
url: "\/?utm_source=homescreen",
icons: [
{
src: "\/main\/android-icon-192x192.png",
sizes: "192x192"
}
]
},
{
name: "Fineshop Design - Blog",
short_name: "Fineshop Design - Blog",
description: "Explore Fineshop Design Blog.",
url: "\/search?utm_source=homescreen",
icons: [
{
src: "\/main\/android-icon-192x192.png",
sizes: "192x192"
}
]
},
{
name: "Blogger Widgets",
short_name: "Blogger Widgets",
description: "Useful Widgets for your Blog.",
url: "\/search\/label\/Widgets?utm_source=homescreen",
icons: [
{
src: "\/main\/android-icon-192x192.png",
sizes: "192x192"
}
]
}
],
screenshots: [
{
src: "\/main\/scr1.png",
type: "image\/png",
sizes: "540x720"
},
{
src: "\/main\/scr2.png",
type: "image\/png",
sizes: "540x720"
},
{
src: "\/main\/scr3.png",
type: "image\/png",
sizes: "540x720"
},
{
src: "\/main\/scr4.png",
type: "image\/png",
sizes: "540x720"
},
{
src: "\/main\/scr5.png",
type: "image\/png",
sizes: "540x720"
}
],
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"
}
})
)
})
  1. * Thay thế các bộ phận được đánh dấu theo nhu cầu của bạn.
    Cũng ghi lại mã màu.
  2. Nhấp vào Lưu và Triển khai.

ServiceWorker

  1. Như trên, hãy tạo một Dịch vụ và đổi tên serviceworker-blogname, tức là serviceworker-fineshop.
  2. Thay thế tập lệnh hiện có bằng tập lệnh sau:
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: '/main/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('Oops! Workbox did not 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))
})
  1. Chúng tôi đã sử dụng Workbox, vì vậy chúng tôi có thể lưu vào bộ đệm HTML, CSS, JS và bất kỳ tệp tĩnh nào.
  2. Nhấp vào Lưu và Triển khai.

Ngoại tuyến

  1. Như trên, hãy tạo một Dịch vụ và đổi tên offline-blogname, tức là offline-fineshop.
  2. Thay thế tập lệnh hiện có bằng tập lệnh sau:
const html = `<!DOCTYPE html>
<html>

<head>
<!--[ Meta Tags ]-->
<title>Oops, You're Offline!</title>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

<!--[ Theme Color ]-->
<meta content='#2196f3' name='theme-color'/>
<meta content='#2196f3' name='msapplication-navbutton-color'/>
<meta content='#2196f3' name='apple-mobile-web-app-status-bar-style'/>
<meta content='true' name='apple-mobile-web-app-capable'/>

<!--[ Favicon ]-->
<link href='/main/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120'/>
<link href='/main/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152'/>
<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'/>
<link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='/main/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

<!--[ Stylesheet ]-->
<style>/*<![CDATA[*/
/* Merriweather - Font */ @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 300; font-display: swap; src: local('Merriweather-LightItalic'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXff4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7lXcf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR71Wsf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: italic; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWPf4jvw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4l0qyriQwlOrhSvowK_l5-eR7NWMf8.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 300; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l521wRpXA.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 700; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52xwNpXA.woff) format('woff')} @font-face{font-family: 'Merriweather'; font-style: normal; font-weight: 900; font-display: swap; src: url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52_wFZWMf6.woff2) format('woff2'), url(https://fonts.gstatic.com/s/merriweather/v22/u-4n0qyriQwlOrhSvowK_l52_wFpXA.woff) format('woff')}
/* Content */ body{background:#f1f3f6;color:#1f1f1f;font-family:'Merriweather',serif;font-weight:400;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body:focus{outline:none !important} .mainCont{margin:0 auto;position:fixed;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:15px} .noIntPop{position:relative;overflow:hidden;text-align:center;padding:15px;border-radius:30px;background:#f1f3f6;box-shadow:inset 0 0 15px rgba(55, 84, 170, 0), inset 0 0 20px rgba(255, 255, 255, 0), 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 0px 0px 4px rgba(255, 255, 255, 0.2)} .circle.t{top:-150px;right:-150px} .circle.b{bottom:-150px;left:-150px} .noIntCont{position:relative;z-index:1} .noIntIcon{padding:30px} .noConHead{font-weight:700;font-size:1.3rem} .noConDesc{font-size:16px;line-height:1.4em;padding-top:20px;font-weight:400;opacity:.8} .cta,.relCont{display:flex;justify-content:center;align-items:center} .relCont{padding:30px} .cta{width:66px;height:66px;background:#f1f3f6;outline:none;border:none;border-radius:690px;box-shadow:inset 0 0 15px rgba(55, 84, 170, 0), inset 0 0 20px rgba(255, 255, 255, 0), 7px 7px 15px rgba(55, 84, 170, 0.15), -7px -7px 20px white, inset 0px 0px 4px rgba(255, 255, 255, 0.2);transition:box-shadow 399ms ease-in-out} .cta:hover{box-shadow:inset 7px 7px 15px rgba(55, 84, 170, 0.15), inset -7px -7px 20px white, 0px 0px 4px rgba(255, 255, 255, 0.2)} .icon{content:'';width:25px;height:25px;display:inline-block} .iconB{content:'';width:50px;height:50px;display:inline-block} .icon.reload{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dabc0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg>") center / 25px no-repeat} .iconB.wifiOff{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='1' x2='23' y2='23'/><path d='M16.72 11.06A10.94 10.94 0 0 1 19 12.55'/><path d='M5 12.55a10.94 10.94 0 0 1 5.17-2.39'/><path d='M10.71 5.05A16 16 0 0 1 22.58 9'/><path d='M1.42 9a15.91 15.91 0 0 1 4.7-2.88'/><path d='M8.53 16.11a6 6 0 0 1 6.95 0'/><line x1='12' y1='20' x2='12.01' y2='20'/></svg>") center / 50px no-repeat} .circle{position:absolute;z-index:1;width:280px;height:280px;border-radius:50%;background-color:#f1f3f6;box-shadow:inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9}
/*]]>*/</style>
</head>

<body>
<div class='mainCont notranslate'>
<div class='noIntPop'>
<div class='circle t'></div>
<div class='circle b'></div>
<div class='noIntCont'>
<div class='noIntIcon'>
<i class='iconB wifiOff'></i>
</div>
<div class='noConHead'>Oops, You're Offline!</div>
<div class='noConDesc'>It looks like your network connection isn't working right now.</div>

<div class='relCont'>
<button class='cta' onclick='window.location.reload()'>
<i class='icon reload'></i>
</button>
</div>
</div>
</div>
</div>
</body>

</html>`

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))
})
  1. * Thay thế các bộ phận được đánh dấu theo ý muốn của bạn.
  2. Nhấp vào Lưu và Triển khai.

Tạo các tuyến đường

  1. Bây giờ quay lại phần Công nhân và sau đó nhấp vào Thêm tuyến.
  2. Nhập các trường như được hiển thị trong bảng đã cho:
Tuyến đường Dịch vụ Môi trường
www.fineshopdesign.com/main/* main-fineshop sản xuất
www.fineshopdesign.com/manifest.json Tệp kê khai tiền phạt sản xuất
www.fineshopdesign.com/sw.js serviceworker-fineshop sản xuất
www.fineshopdesign.com/offline.html offline-fineshop sản xuất
  1. * Nhập các trường theo url blog và tên blog của bạn.

Bây giờ hãy thử mở từng URL một, tức là
www.fineshopdesign.com/main/android-icon-512x512.png
www.fineshopdesign.com/manifest.json
www.fineshopdesign.com/sw.js
www.fineshopdesign.com/offline.html
Nếu bạn có thể mở những URL này có nghĩa là không có vấn đề gì, bạn đã thực hiện xong các thiết lập Cloudflare.
Bây giờ là lúc để thực hiện các thay đổi trong blog.

Chỉnh sửa Blog

  1. Bây giờ, hãy truy cập Trang tổng quan Blogger . Chuyển đến phần Chủ đề.
  2. Nhấp vào Chỉnh sửa HTML.
  3. Dán các mã sau vào bên dưới <head>, nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;head&gt;. Xóa các mã tương tự hiện có.
<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'/>
<link href='/main/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='#2196f3' name='msapplication-TileColor'/>
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage'/>
<meta content='#2196f3' name='theme-color'/>
<link href='/manifest.json' rel='manifest'/>
  • Thay thế mã màu bằng mã bạn đã sử dụngmanifest.json

Bây giờ, hãy làm theo các bước theo mẫu của bạn, tức là Mẫu AMP hoặc Mẫu không phải AMP.

Mẫu AMP

Nếu bạn đang sử dụng Mẫu AMP, bạn phải làm theo các bước sau:

  1. Thêm JS AMP Serviceworker sau vào bên dưới <head>hoặc cao hơn vào </head>.
<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>
  1. Dán các mã sau ở trên vào </body>.
<amp-install-serviceworker data-iframe-src='/offline.html' layout='nodisplay' src='/sw.js'/>

Mẫu không phải AMP

Nếu bạn đang sử dụng Mẫu không phải AMP, bạn phải làm theo các bước sau:

  1. Thêm mã Javascript sau ở trên vào </body>.
<script>/*<![CDATA[*/ /* Service Worker */ if('serviceWorker' in navigator){window.addEventListener('load',()=>{navigator.serviceWorker.register('/sw.js').then(registration=>{console.log('ServiceWorker registeration successful')}).catch(registrationError=>{console.log('ServiceWorker registration failed: ', registrationError)})})}; /*]]>*/</script>

Cuối cùng, lưu các thay đổi và truy cập blog của bạn trên điện thoại di động, tức là Android, bạn sẽ có thể thấy nút để cài đặt Ứng dụng web tiến bộ của mình.

Sự kết luận

Đây là tất cả về việc xây dựng PWA (Ứng dụng web tiến bộ) cho Trang web Blogger của bạn. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong . Cảm ơn bạn!

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Thêm chi tiết
Ối!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
Đã phát hiện ra trình chặn quảng cáo!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng trình chặn quảng cáo trong trình duyệt của mình.
Doanh thu chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.