Xin chào các bạn, nhân dịp này mình sẽ chia sẻ cách kích hoạt ứng dụng web lũy tiến (pwa) trên blogger hoặc blogspot.
PWA là viết tắt của Progressive Web App, một ứng dụng được xây dựng bằng cách tối ưu hóa một trang web có thể cung cấp trải nghiệm như sử dụng một ứng dụng di động. bên cạnh đó chúng ta cũng không cần tốn tiền để tạo một ứng dụng riêng.
PWA này có thể nói là hơi giống với ứng dụng webview vì cả hai đều hiển thị một ứng dụng web, nếu ứng dụng webview trước tiên phải tải lên playstore hoặc appstore để người dùng tải xuống, trong khi PWA có thể được cài đặt trực tiếp thông qua trình duyệt.
Trước đây tôi đã đọc hướng dẫn này trên blog www.kang-ismet.com và blog www.kompiajaib.com và nguồn chính là trên blog www.marwanto606.com và tôi đã tặng backlinks dofollow cho 3 blog này như một lời cảm ơn. .
trước khi bắt đầu, hãy đảm bảo rằng bạn có miền tld, ý bạn là .com .id .co.id, v.v. không phải .blogspot.com, đồng thời đảm bảo miền của bạn trỏ đến máy chủ định danh từ cloudflare và kích hoạt proxy đám mây.
Bài hướng dẫn này có thể nói là hơi phức tạp nên các bạn đọc kỹ và thực hiện tốt các bước nhé, ở đây mình cũng nhúng khá nhiều ảnh chụp màn hình vào cho dễ hiểu. ok cho những bạn muốn thử nó, chúng ta hãy xem làm thế nào bên dưới.
Giai đoạn đầu tiên của việc tạo biểu tượng ứng dụng
chuẩn bị một biểu tượng logo dạng .png với kích thước 512 x 512 và đặt tên là android-icon-512x512.png (tên biểu tượng phải giống nhau để sau này đọc được).
-
extrak file yang sudah di dwonload tadi dan hapus file browserconfig.xml dan manifest.json karena itu tidak di butuhkan, dan pindahkan icon android-icon-512x512.png yang di buat awal tadi ke dalam 1 file dengan icon yang di dapatkan dari favicon-generator.org.
Tahap Kedua Upload Icon Ke Repo Github
silakan masuk ke github.com, buat yang belum punya akun silakan daftar terlebih dulu.
kemudian buat repository baru dengan cara klik icon + pojok kanan atas > new repository > repository name (bebas apa aja) selebihnya silakan atur seperti gambar di bawah ini, dan create repository.
sau đó nhấp vào thêm tệp> tải tệp lên
nhấp vào chọn tệp của bạn sau đó chọn biểu tượng tệp mà bạn đã tạo trong giai đoạn đầu sử dụng ctrl + a để chọn tất cả các biểu tượng và nhấp vào mở, sau khi quá trình tải lên hoàn tất, hãy nhấp vào cam kết thay đổi
Giai đoạn thứ ba Tạo nhân viên trong Cloudflare
vui lòng truy cập cloudflare.com và nhấp vào trình đơn worker.
nếu đây là lần đầu tiên bạn tạo công nhân thì bạn sẽ được yêu cầu tạo miền phụ (miễn phí, điều quan trọng là vẫn có sẵn), sau đó bạn sẽ được yêu cầu chọn gói, chỉ cần chọn tiếp tục với miễn phí
LƯU Ý
ở đây chúng ta sẽ tạo ra 4 công nhân, vì vậy ở giai đoạn này chúng tôi sẽ tiếp tục lặp lại việc tạo công nhân 4 lần
1. chơi
2. biểu hiện
3. công nhân dịch vụ
4. ngoại tuyến
sau đó nhấp vào nút tạo công nhân> xóa tất cả các tập lệnh hiện có và thay thế chúng bằng tập lệnh bên dưới> lưu và triển khai rồi nhấp vào nút quay lại
addEventListener("fetch", event => {
event.respondWith(handleRequest(event))
})
//const BUCKET_NAME = "main"
const BUCKET_URL = `https://raw.githubusercontent.com/choipanwendy/icon-wendycode`
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 })
}
}bagian yang saya tandai choipanwendy/icon-wendycode silakan di ganti dengan username dan nama repo kalian, jika bingung silakan kembali ke tahap kedua upload icon ke repo github
dan rename menjadi main-namabloganda contoh main-wendycode dan klik rename and deploy kemudian klik kembali ke workers
nhấp lại vào tạo công nhân như bước trước, xóa tất cả các tập lệnh hiện có và thay thế bằng tập lệnh bên dưới> lưu và triển khai sau đó nhấp vào nút quay lại
addEventListener("fetch", event => {
const data = {
name: "Wendy Code",
short_name: "Wendy Code",
display: "standalone",
prefer_related_applications: false,
start_url: ".",
scope: "\/",
background_color: "#fff",
theme_color: "#f89000",
description: "Membahas tutorial seputar blogging, blogger tutorial, blogspot tutorial, dan tools gratis.",
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"
},
]
}
const json = JSON.stringify(data, null, 2)
return event.respondWith(
new Response(json, {
headers: {
"content-type": "application/json;charset=UTF-8"
}
})
)
})phần mà tôi đã đánh dấu, vui lòng điều chỉnh nó với blog của bạn
và đổi tên nó thành tệp kê khai-yourblogname ví dụ tệp kê khai-wendycode và nhấp vào đổi tên và triển khai sau đó nhấp lại cho công nhân
nhấp lại vào tạo công nhân như bước trước, xóa tất cả các tập lệnh hiện có và thay thế bằng tập lệnh bên dưới> lưu và triển khai sau đó nhấp vào nút quay lại
dan rename menjadi serviceworker-namabloganda contoh serviceworker-wendycode dan klik rename and deploy kemudian klik kembali ke workers
const js = `
'use strict';
const CACHE_VERSION=1;
let CURRENT_CACHES={offline:"offline-v1"};
const OFFLINE_URL="/offline.html";
function createCacheBustedRequest(a){let b=new Request(a,{cache:"reload"});if("cache"in b)return b;let c=new URL(a,self.location.href);return c.search+=(c.search?"&":"")+"cachebust="+Date.now(),new Request(c)}self.addEventListener("install",a=>{a.waitUntil(fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(a){return caches.open(CURRENT_CACHES.offline).then(function(b){return b.put(OFFLINE_URL,a)})}))}),self.addEventListener("activate",a=>{let b=Object.keys(CURRENT_CACHES).map(function(a){return CURRENT_CACHES[a]});a.waitUntil(caches.keys().then(a=>Promise.all(a.map(a=>{if(-1===b.indexOf(a))return console.log("Deleting out of date cache:",a),caches.delete(a)}))))}),self.addEventListener("fetch",a=>{("navigate"===a.request.mode||"GET"===a.request.method&&a.request.headers.get("accept").includes("text/html"))&&(console.log("Handling fetch event for",a.request.url),a.respondWith(fetch(a.request).catch(a=>(console.log("Fetch failed; returning offline page instead.",a),caches.match(OFFLINE_URL)))))});
`
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))
})klik create a worker lagi seperti langkah sebelumnya hapus semua script yang ada dan ganti dengan script di bawah ini > save and deploy kemudian klik tombol kembali
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, Anda Sedang Offline!</div>
<div style=" font-family: Georgia,'Times New Roman',serif; font-size: 20px; padding-top: 40px; ">Cek Koneksi Internet Anda Dan Coba Kembali.</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))
})phần mình đánh dấu tin nhắn từ offline các bạn điều chỉnh theo sở thích hoặc có thể để nguyên
và đổi tên nó thành offline-yourblogname example offline-wendycode và nhấp vào đổi tên và triển khai sau đó nhấp vào miền của bạn để quay lại trang chủ
Giai đoạn thứ tư tạo các tuyến đường
nhấp vào menu công nhân> thêm tuyến đường trên blog.choipanwendy.com, vui lòng thay thế nó bằng miền của bạn, nếu bạn sử dụng miền chính bạn phải bắt đầu bằng www, ví dụ www.choipanwendy.com vì tôi sử dụng miền phụ nên nó không bắt đầu với www
- blog.choipanwendy.com/main/* cho worker main-yourblogname
- blog.choipanwendy.com/manifest.json untuk worker manifest-namabloganda
- blog.choipanwendy.com/serviceworker.js untuk worker serviceworker-namabloganda
- blog.choipanwendy.com/offline.html untuk worker offline-namabloganda
nếu có, vui lòng mở lần lượt các liên kết trên để đảm bảo không có lỗi, nếu mọi thứ mở ra nghĩa là không có vấn đề gì
Tahap Kelima Edit Template Blogger
vui lòng truy cập blogger> chủ đề> chỉnh sửa html, sau đó sao chép và đặt mã bên dưới vào vùng thẻ <head> hoặc bạn có thể nhóm nó với các thẻ meta trong mẫu của mình.
nếu mẫu có mã tương tự vui lòng xóa đi, phần mình đánh dấu # f89000 vui lòng chỉnh màu cho blog của mình.
<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='#f89000' name='msapplication-TileColor' />
<meta content='/main/ms-icon-144x144.png' name='msapplication-TileImage' />
<meta content='#f89000' name='theme-color' />
<link href='/manifest.json' rel='manifest' />và cuối cùng sao chép mã bên dưới và đặt nó bên trên mã </body> hoặc & lt;! - </body> - & gt; & lt; / body & gt; nếu nó là xin vui lòng nhấp vào lưu xong.
<script>
//<![CDATA[
if ('serviceWorker' in navigator){window.addEventListener('load',() =>{navigator.serviceWorker.register('/serviceworker.js').then(registration =>{;}).catch(registrationError =>{console.log('SW registration failed:',registrationError);});});}
//]]>
</script>
Đăng nhận xét