pwa ? What’s this? The first time I heard pWA was when the big guy at the next table said in front of the communication, “This is the hot technology in front of the front, with good user experience, simple and convenient… …” . It sounded like I wanted to have a try, and I finished my first PWA project with the help of the big guy. Strong Amway, let’s have a good look at the so-called PWA

What is pWA?

Progressive Web App, or PWA, is a new way to improve the experience of Web apps by giving users the experience of native apps.

PWA can achieve the experience of Native application not by referring to a particular technology, but through the application of some new technologies, which has been greatly improved in the three aspects of security, performance and experience. PWA is a Web App in essence, and has some features of Native App with the help of some new technologies. It has advantages of both Web App and Native App.

The main features of PWA include the following three points:

  • Reliable – Loads and displays instantly, even in an unstable network environment
  • Experience – Fast response and smooth animation in response to user actions
  • Engagement – Like native apps on devices, with an immersive user experience that users can add to the desktop

The PWA itself emphasizes gradual progress and does not require all requirements on safety, performance and experience to be met at one time. Developers can check the existing characteristics through the PWA Checklist.

To put it simply, PWA can be made into a small app similar to app. You can set your own name and icon, and just click install at the end of the address bar of the browser to install it on your desktop (light weight, maybe hundreds of KB of cached data). It can be used immediately, without having to go to the app store to install it. You can have the experience of a native app without having to put it on an app store.

Below is a partial snapshot of what we see from the user’s perspective, from the page reminders to install, to the user’s desktop generated icon installation, and finally to the soft view opening.


  • Remind users to install



  • Generate ICONS on the desktop (ICONS and names are customizable)




  • Click the icon to see the view



We can install small ICONS on the MAC without going through the App Store. Whether we are excited or happy, the next step is to witness a small miracle.

How to develop with PWA

When we first learned about PWA, it was hard to do it. Even though we knew it was great to be an architect, we didn’t do it, not because we didn’t want to, but because we couldn’t. Let’s talk about how to use PWA in real life. Don’t ask about the underlying principles, because I don’t know.

First of all, we’re going to prepare onion, ginger, garlic, sorry, again, first of all we need to have a project vue UI project

1. The pWA plug-in must be installed at the beginning. To install the PWA plug-in, type vue add@vue/pWA on the command line. After the PWA plug-in is successfully installed, the generated files include some vue logo images, manifest.json, registerServiceworker.js. The generated vue logo image is a sample image, configured in manifest.json by default. Registerserviceworker.js is the registry used to register service workers, although it is possible not to use this generated registry

  vue add @vue/pwa
Copy the code

2. Configure pWA in the vue.config.js file

  pwa: {
    workboxOptions: {
      // https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin
      skipWaiting: true,
      clientsClaim: true,
      importWorkboxFrom: 'local',
      importsDirectory: 'js',
      navigateFallback: '/',
      navigateFallbackBlacklist: [/\/api\//]
    }
  }Copy the code

3. Register service workers. When the PWA plug-in is installed, a registerServiceworker.js file (under SRC) is generated and the import is added to main.js, which automatically generates the code to register the service worker. The default generated service worker name is service-worker.js, which can be modified to a customized service worker, such as sw.js. The code for registerServiceworker.js is as follows.

import { register } from 'register-service-worker'import { Message, MessageBox } from 'element-ui'if (process.env.NODE_ENV === 'production') {  register(`${process.env.BASE_URL}service-worker.js`, {    ready() {      console.log(        'App is being served from cache by a service worker.\n' +          'For more details, visit https://goo.gl/AFskqB')},registered() {      console.log('Service worker has been registered.')},cached() {      console.log('Content has been cached for offline use.')},updatefound() {      Message({        message: 'New version detected, downloading'.type: 'info'      })      console.log('New content is downloading.')},updated() {      MessageBox({        title: 'update',        message: 'New version content is downloaded, click ok to use the new version now',        confirmButtonText: 'sure',        showClose: false,        showCancelButton: false,        closeOnClickModal: false,        closeOnPressEscape: false.type: 'success'.callback() {          location.reload()        }      })      console.log('New content is available; please refresh.')},offline() {      console.log(        'No internet connection found. App is running in offline mode.'      )    },    error(error) {      console.error('Error during service worker registration:', error)    }  })}Copy the code

Then we import registerServiceworker.js in main.js

import './registerServiceWorker'Copy the code

4. Configure the public/manifest.json file, which pWA’s add-on to the desktop relies on

{
    "short_name": "Short name"."name": "That's a full name."."icon": [{"src": "./img/icons/icon-192x192.png", // Can be customized icon"sizes": "192x192"// Make sure the size is the same as the actual size"type": "image/png"        },
        {
         "src": "./img/icons/android-chrome-512x512.png"."sizes": "512x512"."type": "image/png"}]."start_url": "index.html"// Launch the url"display": "standalone"// Splash screen"background_color": "# 002140"// Start the background color"theme_color": "# 002140"// (also set in index.html file) theme color, strongly recommended to keep the same as the UI theme color, look more native app feel}Copy the code

Behind the manifest. Json file some configuration can be changed the user experience, can in this website have a look at lavas.baidu.com/pwa/engage-…

5. Wow, now for the last step, set our theme color in public/index.html

<meta name="theme-color" content="#00142A"< div style = "box-sizing: border-box! Important; word-wrap: break-word! Important;Copy the code

Next is the time to witness the results, we can first build, see if the index in the generated dist file has successfully referenced the manifest.json file, and see if the corresponding configuration has been generated. If so, then congratulations, the first PWA project of your life is completed, manually scatter flowers 🎉

  <link rel=manifest href=/manifest.json>
  <meta name=theme-color content=#4DBA87>Copy the code

Some people said, pWA is so good why not so popular, so I also baidu once

1. The technical support of tourist is not comprehensive enough, not every tourist can support all PWA 100%


2. Low-level hardware (such as camera) can be called only through third-party libraries


3. PWA is not so popular now, some domestic mobile phone manufacturers have made some manipulation on Android system, which seems to block PWA, but I believe that when PWA is popular, this problem will not be a problem

Whether it is popular or not, what we learn is knowledge, and so interesting, of course to learn, otherwise how can you say that they are a good front end. As a conscientious blogger, in order to know more about PWA, we can take a look at lavas.baidu.com/pwa, which is very detailed, including what user experience, nothing can be studied, something can also take time to understand, you will find a better world.