Phản hồi email
Nhập Thông Tin
Giới Tính
Send

bật ứng dụng web tiến bộ (pwa) trên blogger



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


tạo biểu tượng logo đã được tạo trước đó vào favicon-generator.org, sau đó tải xuống tệp .zip của biểu tượng.cara mengaktifkan progressive web app ( pwa ) di blogger
  1. cara mengaktifkan progressive web app ( pwa ) di blogger
  2. 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.

    cara mengaktifkan progressive web app ( pwa ) di blogger

Tahap Kedua Upload Icon Ke Repo Github

  1. silakan masuk ke github.com, buat yang belum punya akun silakan daftar terlebih dulu.

  2. 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.

    cara mengaktifkan progressive web app ( pwa ) di blogger

    sau đó nhấp vào thêm tệp> tải tệp lên

    cara mengaktifkan progressive web app ( pwa ) di blogger

    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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

Giai đoạn thứ ba Tạo nhân viên trong Cloudflare

  1. vui lòng truy cập cloudflare.com và nhấp vào trình đơn worker.

    cara mengaktifkan progressive web app ( pwa ) di blogger

    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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

    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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
  2. 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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
  3. 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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

    dan rename menjadi serviceworker-namabloganda contoh serviceworker-wendycode dan klik rename and deploy kemudian klik kembali ke workers

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    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))
    })
  4. 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

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger
    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ủ

    cara mengaktifkan progressive web app ( pwa ) di blogger
    cara mengaktifkan progressive web app ( pwa ) di blogger

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

cara mengaktifkan progressive web app ( pwa ) di blogger
  1. blog.choipanwendy.com/main/* cho worker main-yourblognamecara mengaktifkan progressive web app ( pwa ) di blogger
  2. blog.choipanwendy.com/manifest.json untuk worker manifest-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger
  3. blog.choipanwendy.com/serviceworker.js untuk worker serviceworker-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger
  4. blog.choipanwendy.com/offline.html untuk worker offline-namabloganda
    cara mengaktifkan progressive web app ( pwa ) di blogger

    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>
See Also :
ModMobile

Subscribe YouTube ModMobile