把博客变成一个 PWA

PWA

A PWA is a website that behaves like a native mobile app once visited on a mobile device.
A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too.
A progressive web app can be a blog, an online shop, a collection of… dog memes, you name it.
They’re platform-independent.
Must be serve via HTTPS

How

1. Add manifest.json

A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name…

<link rel="manifest" href="/manifest.json" />
<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
  }
</script>

{
  "name": "观海听涛",
  "short_name": "weaming - blog",
  "start_url": "index.html",
  "scope": "./",
  "icons": [
    {
      "src": "https://bitsflow.org/favicon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://bitsflow.org/favicon.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ff0000",
  "background_color": "#F5F5D4",
  "display": "standalone"
}

2. pre-cache sites

npm install --global sw-precache
# generate blog html using hugo, then pre-cache it, then upload to surge.sh
hugo && cd public && sw-precache && cd - && surge public