PWA, short for Progress Web App, is a concept that uses a variety of technologies to enhance the functionality of Web apps and make the web experience better, emulating native features such as notification push.

The history mode

  • If you don’t want ugly #, you can use the history mode, which relies on the history.pushState function
    • After a tag is clicked, if there is no #, the page will inevitably jump to initiate a request
    • Use pushState to change a URL such as/ABC without making a request
    • Js gets the value/ABC via location.pathname for a page-local replacement
  • A simple implementation of router-view history

  • Router-view implementation diagram

Self-made Webpack plug-in to achieve skeleton screen

  • Principle analysis:
    • 1: Is it slow to jump from route A to route B? Don’t you dare say slow? Because all kinds of JS have been loaded when A is ok
    • 2: So what’s slow? The first load of A
      • What will slow bring?
        • 1: the first screen is blank (too much rendering takes a long time)
        • 2: The first screen is stuck (half is loaded, half is stuck)
      • Solution:
        • 1: The client is too slow, rendering is easy to jam. The server renders the page, and the client loads the HTML
        • 2: A white screen is fine, but a skeleton screen looks great
  • Plug-in implementation Idea

    • The user needs to see the skeleton screen with the app code to perform the new Vue() replacement before the vue execution code loads

      It’s good

    • Index.html decides what JS to load, and the plugin that operates it is html-webpack-plugin
    • We let our plug-in operate later, fetching data and making changes based on the data entry it left behind
  • Results the preview
    • html

    • Subsequent logic

    • Caton again

  • The plug-in code
let MyPlugin = function (options) { this.template = options.template; } MyPlugin.prototype.apply = function (compiler) { // console.log(compiler); Console. log(' Our plugin was executed '); // Specify how to compile, Compiler. Plugin ('compilation', Plugin ('html-webpack-plugin-before-html-processing',(htmlData,callback) => {// HTML = htmldata.html. replace(' <div ID ="app"></div> ', '<div ID ="app">< div style="background-color:red; height:300px; display:none;" <div style="background-color:red; height:300px; display:none;" <div style="background-color:red; background-color:red; height:300px; display:none;" Id ="login" > I am login skeleton screen </div> </div> <script> var hash = window.location.hash; var path = window.location.pathname; if (path === '/login' || hash === '#/login') { document.getElementById('login').style.display = 'block'; } else if (path === '/user' || hash === '#/user') { document.getElementById('user').style.display = 'block'; } </script> `); // Error before callback(null,htmlData) regardless of two arguments; }); }); } module.exports = MyPlugin;Copy the code

  • The use of plug-in

Multi-page application

  • Core idea: in fact, it is two VUE projects, one webpack, associated with URL connection
    • Webpack operation:
      • Main1 :’./usermain.js’,main2:’./goodsmain.js’}
        1. Multiple HTML plug-ins
  • Matters needing attention
  • The thinking of getHtmls
    • {‘js file name ‘:’js file path’}
    • [].concat([new HtmlWebpackPlugin(),new HtmlWebpackPlugin()])
      • The filename attribute is the filename xxx.html for the generated relative dist
      • Template template generated reference Need to be an absolute path | | relative path ‘. / XXX. HTML ‘
      • Chunks :[filename] Specifies the name of the third imported JS file
        • [name] is the key of the entry

Use CachesAPI to get the contents of the specified cache

  • `js

    caches.open(‘key’).then(function(cachedRequests) {

    cachedRequests.match(‘appshell’).then(r => r.text() ).then(console.log);

    }); 
#### DB comparison! [1530352193027](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/2/15/17048124d556d434~tplv-t2oaga2as X-image.image) #### PWA (progressive /Web/ Application) * Slowly accept you * Browse Web apps offline, generate desktop apps, top notifications (pages can exist), pre-cache (before your page is launched, Request resources to save to browser) (real access, very fast, request local), skeleton screen, App shell(use caching mechanism to save CSS + HTML + JS and so on), share, full screen icon *! [1530630435699](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/2/15/17048124fc3ea2db~tplv-t2oaga2as X-image.image) * Chrome launched PWA * Mobile chrome 55 above just support these all * IOS Safari consider support * English see support caniuse Chinese is lavas official website can see #### supplement ah.. Add webpack plugin to manipulate files by itselfCopy the code

// Write a file to dist, Compilation. Assets [‘./tjx.txt’] = {size:function () {return ‘abc’.length; },source:function () {return ‘abc’}}

`