Cách tạo PWA (Ứng dụng web App) cho Blogger

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 đang ở đúng nơi.

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 App) cho trang web của bạn một cách dễ dàng.

Vì vậy, trước khi bạn bắt đầu quá trình thiết lập PWA cho 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.

Cách tạo PWA (Ứng dụng web App) cho Blogger

PWA (Ứng dụng web App) là gì?

Ứng dụng web App là một cách mới để tạo trải nghiệm giống như bản địa 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 trang web và ứng dụng tốt nhất.

Ứng dụng web App 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 ứng dụng này đượ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.

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

Ứng dụng web App 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, đáp ứng các thiết bị khác nhau và có thể được truy cập bất kỳ lúc nào mà không cần tải xuống bất kỳ thứ gì.

Ứng dụng web App 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 thấy trong các ứng dụng gốc như thông báo đẩy, hỗ trợ ngoại tuyến và các biểu tượng trên 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 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 xây dựng PWA cho Blogger

Để xây dựng Ứng dụng web App, 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 thực hiện đúng tất cả các bướ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 nhân viên dịch vụ.

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:

Biểu tượng Blog ở .png phần mở rộng có kích thước 512×512.
5 Ảnh chụp màn hình Trang web của bạn trong .png (Có thể dùng tiện ích mở rộng).
Phải có tài khoản GitHub.
Quản lý DNS: Têm miền blog của bạn đang sử dụng Cloudflare.

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

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

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

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

Tạo Workers trong Cloudflare

Đăng nhập vào Tài khoản Cloudflare của bạn.
Chuyển đến phần Workers và nhấn vào Manage Workers.
Bấm vào Create a Service và đổi tên dịch vụ thành main-blogname, tức là main-giahuy.
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/huyntgia/icon-giahuy`

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

* Thay thế các phần được đánh dấu, tức là huyntgia bằng tên người dùng GitHub của bạn icon-giahuy bằng tên Repository của bạn.
Nhấn vào Save and Deploy.

Manifest.json

Theo cách tương tự, hãy tạo một Dịch vụ và đổi tên thành manifest-blogname, tức là manifest-giahuy.
Thay thế tập lệnh hiện có bằng tập lệnh sau:

addEventListener('fetch', event => {
  const data = {
    name: 'Gia Huy',
    short_name: 'Gia Huy',
    description: 'Install Now Gia Huy - 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: 'Gia Huy',
      short_name: 'Gia Huy',
      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: 'Gia Huy - Blog',
      short_name: 'Gia Huy - Blog',
      description: 'Explore Gia Huy 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'
      }
    })
  )
})

* 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.
Nhấn vào Save and Deploy.

ServiceWorker

Như trên, hãy tạo một Service và đổi tên thành serviceworker-blogname, tức là serviceworker-giahuy.
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))
})

Chúng tôi đã sử dụng Workbox, vì vậy chúng tôi có thể lưu trữ HTML, CSS, JS và bất kỳ tệp tĩnh nào.
Nhấn vào Save and Deploy.

Offline

Như trên, hãy tạo một Service và đổi tên thành offline-blogname, tức là offline-giahuy.
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))
})

* Thay thế các bộ phận được đánh dấu theo mong muốn của bạn.
Nhấn vào Save and Deploy.

Tạo Routes

Bây giờ hãy quay lại phần Workers và sau đó nhấp vào Add Route.
Nhập các thông tin như bảng sau:

Route	Service	Environment
www.giahuy.net/main/*	main-giahuy	production
www.giahuy.net/manifest.json	manifest-giahuy	production
www.giahuy.net/sw.js	serviceworker-giahuy	production
www.giahuy.net/offline.html	offline-giahuy	production

* 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.giahuy.net/main/android-icon-512x512.png
www.giahuy.net/manifest.json
www.giahuy.net/sw.js
www.giahuy.net/offline.html
Nếu bạn có thể mở các URL này có nghĩa là không có vấn đề gì, thì bạn đã hoàn thành việ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 blogger

Bây giờ, hãy truy cập Trang tổng quan Blogger. Chuyển đến phần Chủ đề.
Nhấp vào Chỉnh sửa HTML.
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 thành <head>. 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ụng trongmanifest.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 đang sử dụng Mẫu AMP, bạn phải làm theo các bước dưới đây:

Thêm AMP Serviceworker JS bên dưới vào <head> hoặc bên trên vào </head>.

<script async='async' custom-element='amp-install-serviceworker' src='https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js'/>

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 đang sử dụng Mẫu không phải AMP, bạn phải thực hiện theo các bước bên dưới:

Thêm đoạn mã Javascript sau 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 một nút để cài đặt Ứng dụng web App của mình.

Xóa bộ nhớ cache JsDelivr

Nhiều bạn đã hỏi về việc xóa bộ đệm của các tệp JsDelivr.

Đối với điều đó, chỉ cần mở url trong trình duyệt của bạn:

https://purge.jsdelivr.net/gh/ <GITUSERNAME> / <REPO> @ <BRANCH> / <PATH>

Kết luận

Trên đây là hướng dẫn xây dựng PWA (Ứng dụng web App) 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, hãy hỏi chúng tôi trong hộp bình luận. Cảm ơn!

Đi tới liên kết

Gia Huy

Cách tạo PWA (Ứng dụng web App) cho Blogger

PWA (Ứng dụng web App) là gì?

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

Cách xây dựng PWA cho Blogger

Yêu cầu

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

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

Tạo Workers trong Cloudflare

Manifest.json

ServiceWorker

Offline

Tạo Routes

Chỉnh sửa blogger

Mẫu AMP

Mẫu không phải AMP

Xóa bộ nhớ cache JsDelivr

Kết luận

Về tác giả

Đăng nhận xét

Bảng Excel tính thép sàn BTCT theo TCVN 5574-2018

Thêm tiện ích like bài viết trên blogger

Bảng Excel tính thép dầm BTCT theo TCVN 5574-2018

Tạo khung chứa code có nút copy và download trên Blogger

Tiêu chuẩn Việt Nam TCVN 2737:2020 về tải trọng và tác động

Gia Huy