Installing PWA for Hexo Blog

With the popularity of mobile devices, more and more people are using mobile devices to browse websites. In order to improve the user experience, many websites have implemented Progressive Web App (PWA) functionality.

Installing hexo-pwa plugin#

In Hexo blog, we can use the hexo-pwa plugin to implement PWA functionality. First, we need to enter the following command in the command line to install:

npm install hexo-pwa --save

Note: My blog encountered an error after installing this step, so I uninstalled it in the end, but many tutorials include this step.

Installing hexo-service-worker plugin#

Enter the following code in the terminal:

npm install hexo-service-worker --save

Configuring the manifest.json file#

The core of PWA functionality is the manifest.json file. This file contains information such as the application's name, icon, theme color, etc., which the browser can use to display the application's icon and create application shortcuts.

In this file, we need to specify various information about the application. We can create a new folder source/ in the root directory of the Hexo blog and create a file named manifest.json in it. You can also generate it directly using a tool, and I recommend this website: Need help building your headless eCommerce storefront?.

Here is an example (my example):

{

"theme_color": "#f69435",
"background_color": "#f69435",
"display": "fullscreen",
 "scope": "/",
"start_url": "/",
"name": "长街短梦",
"short_name": "长街短梦",
"description": "此路山高路远，我只剩口袋薄一篇",
"icons": [
 {
"src": "/img/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
 },
{
 "src": "/img/icon-256x256.png",
 "sizes": "256x256",
 "type": "image/png"
},
{
"src": "/img/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
 },
{

            "src": "/img/icon-512x512.png",

            "sizes": "512x512",

            "type": "image/png"

        }

    ]

}

In this example, name specifies the name of the application, short_name specifies the short name of the application, icons specifies the icons of the application, start_url specifies the homepage address of the application, theme_color specifies the theme color of the application, background_color specifies the background color of the application, and display specifies the display mode of the application.

Configuring the sw.js file#

PWA functionality also requires the use of Service Worker to implement features such as offline caching. We can create a new folder source/sw.js in the root directory of the Hexo blog and create a file named sw.js in it. In this file, we need to write some code to implement features such as offline caching. Here is an example:

const cacheName = 'my-cache';
self.addEventListener('install', event => {

    event.waitUntil(

        caches.open(cacheName).then(cache => {

            return cache.addAll([

                '/',

                '/index.html',

                '/css/style.css',

                '/js/script.js',

                '/images/logo.png'

            ]);

        })

    );

});

  

self.addEventListener('fetch', event => {

    event.respondWith(

    caches.match(event.request).then(response => {

    return response || fetch(event.request);

    })

    );

    });

In this example, cacheName specifies the name of the cache. In the install event, we can add the resources that need to be cached to the cache. In the fetch event, we can read resources from the cache. If the desired resource is not in the cache, we can fetch it from the network.

Deploying the blog and testing#

After the configuration is complete, we can deploy the blog to the server and test if the PWA functionality is working properly. First, enter the following command in the command line to generate static pages:

# Clean cache / Generate static pages / Local preview
$ hexo clean && hexo g && hexo s

王云子