It's 2022 and still don't know about PWA? Teach your VuePress blog how to quickly compatible with PWA

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

In this article, we will talk about how to be compatible with PWA.

PWA

PWA, English full name: Progressive Web Apps , Chinese translation: Progressive Web Application .

Quoting the introduction of MDN :

PWAs refer to web applications that are developed using specified technologies and standard patterns, which give them both web application and native application characteristics.

For example, on the one hand, web applications are more discoverable: it is significantly easier and faster to visit a website than to install an application. You can also share web applications via links.

On the other hand, native applications and operating systems can be more perfectly integrated, thus providing users with a seamless user experience. You can install an app to make it work offline; users also prefer to access their favorite apps by clicking icons on the home page rather than using a browser.

PWAs give us the ability to create applications that have both of these benefits.

experience

If you haven't learned about PWA before, you probably don't understand what effect this is. It doesn't matter. Let's look at a PWA application example. Let's open https://m.weibo.cn/ , here is on the computer opened:

We can see that there is also an installation icon in the address bar, click it, and the option box to install the application will pop up:

After we click install, the page will automatically close, and then open an application window:

At the same time, open the Mac's launchpad, we will see the icon of Weibo has been added:

Clicking it will directly open the application window above.

To put it simply, we are compatible with PWA, and we want to realize the function of such a desktop icon. Of course, PWA also has other functions such as offline caching and push notifications, so I won't talk about it here.

Enable PWA

To turn on PWA, you need to pay attention to three points:

1. Provide a manifest.json file that describes the name, icon and other information of the application
2. Turn on Service Worker, which is implemented by the existing PWA plugin
3. Enable HTTPS

practice

1. Installation

Plugin address: https://v1.vuepress.vuejs.org/zh/plugin/official/plugin-pwa.html

yarn add -D @vuepress/plugin-pwa
# OR npm install -D @vuepress/plugin-pwa

2. Modify config.js

module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }],
    ['link', { rel: 'manifest', href: '/manifest.json' }],
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
    ['link', { rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png' }],
    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
    ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
    ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
  ],
  plugins: [
    [
      '@vuepress/pwa',
      {
        serviceWorker: true,
        updatePopup: {
            message: "发现新内容可用",
            buttonText: "刷新"
        }
     }
    ]
  ]
}

3. Add resources such as manifest.json

Next, we add the required resources, create the public folder in the .vuepress directory, and then add the required files such as the manifest.json file:

{
    "name": "TypeScript中文文档",
    "short_name": "TypeScriptDocs",
    "display": "standalone",
    "background_color": "#fff",
    "start_url": "/learn-typescript-test/",
    "scope": "/learn-typescript-test/",
    "description": "TypeScript 中文文档 进阶教程",
    "icons": [{
      "src": "logo52.png",
      "sizes": "52x52",
      "type": "image/png"
    },{
       "src": "logo288.png",
       "sizes": "288x288",
       "type": "image/png"
    }]
  }

For the specific meaning of the fields, you can check the Manifest introduction of MDN.

Pay attention to start_url and scope . If you are using the Pages service of GitHub or Gitee repository, and the address has the repository name, you need to replace learn-typescript-test with your repository name. If it is a direct domain name, start_url is written as \ and scope written as . or not written directly.

Then fill in the required icon images:

4. Deploy the production environment test

Although we talked about how to enable HTTPS locally in the last article "How to Enable Local HTTPS Access on VuePress Blog" , but because of the plugin we use, will only enable Service Worker in the production environment:

So, let's deploy it online to see the effect. If it goes well, you will see the installation icon also appear on the address bar:

common problem

But if the icon is not displayed, we can check the "Apps" - "Manifest" in the developer tools, which will show the error:

Check according to the error reported here.

If the installability is present:

for any matching service worker detected. You may need to reload the page, or check if the current page's service worker also controls the start URL in the manifest error.

It is also possible that there is something wrong with your start_url and scope settings.

After normal installation, if you open the application and find that the background color is Vue green, such as this:

This is because you forgot to change the background color in config.js:

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 23rd article, the address of the whole series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.