Write in front: this project miscellaneous miscellaneous looks very miscellaneous, this article is mainly to introduce the template project several key points, let everyone from this project can learn the real practical technical key points, project address at the end of the article.

A pwa.

PWA Progressive Web App (PWA for short) is a new way to improve the experience of Web App, which can give users the experience of native application. 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

So you see the question, how does the PWA do these three things? This is done through a series of front-end technologies. 1. Reliability — When users open our site (from desktop icon or browser), the Service Worker enables users to load and display it instantly even under poor network conditions.

A Service Worker is a JS file written in JavaScript that can proxy requests and manipulate the browser cache, making the request complete instantaneously by returning the cached content directly. Developers can pre-store critical files, eliminate outdated files, and more, providing a reliable experience for users. See Service Workers: PWA for details

2. Experience — In order to ensure the loading of the first screen, we need to take design considerations into consideration. Before the content request is completed, we can give priority to the rendering of App Shell to achieve the same experience as Native App.

The App Shell architecture is a way to build Progressive Web apps that reliably and instantaneously load onto your user screen, similar to native applications. App “shell” is the minimal HTML, CSS, and JavaScript required to support the user interface. If cached offline, it ensures instant, reliable performance when the user repeatedly visits. This means that the App Shell doesn’t have to be loaded from the network every time the user accesses it. Just load the necessary content from the network. See App Shell model for details

3. Stickiness — The Web App Manifest allows developers to control how PWA are added to the desktop, allowing customization of desktop ICONS, urls, and more; PWA allows users to return to PWA by sending offline notifications to users: adding applications to desktops and sharing with users

2. Mobile terminal adaptation solutions

There are many mobile terminal adaptation schemes, and this project provides a solution. At the heart of this plan are two things:

  • Dynamically set the HTML root font size and viewport scale based on the screen size. To achieve this, the project uses the hotCSS tool, but because the official configuration is a bit difficult, there is no corresponding webpack project official configuration instructions, here directly copy the hotcss.js content in the SRC directory of the hotCSS, create a new file in your own project viewport.js. Paste in the contents of hotcss.js. Then in the Webpack config file, add it to Entry according to the path of the viewport.js file you created, as shown in the picture:

  • When writing projects, I directly use the PX units marked in the design draft, and use tools to convert PX units into REM units. This can be easily implemented using the px2REM-loader tool. For details, see Using PX2REM in VUE

With the perfect combination of the two, mobile adaptation is very convenient. Compared with the adaptation scheme of Taobao and NetEase, the advantages of this scheme are as follows:

  • Configuration is convenient and free, simple and clear, no need to mark more than one design draft
  • Instead of manually calculating REM values according to PX values, write PX values directly according to the design draft to improve development efficiency

In addition, the project introduces vuetify, the VUE component library, which is developed using Stylus by default. In order to meet multiple requirements, the project also configures the development environment of SCSS and provides component templates of SCSS to realize the extraction and reuse of CSS components without using third-party component libraries.

3. To summarize

In the future, a real project will be implemented based on this template. The current address of this template project is PWA-vue-template. Welcome to star~