PWA is a subversive concept in the Web, has been widely accepted in foreign countries, many sites have been transformed into PWA, and achieved very good results. Twitter Lite, for example, saw a 65% increase in average user duration after the PWA was completed. In China, the concept of PWA is becoming more and more widely accepted. Many large websites such as Weibo and Ele. me have been transformed into PWA, and more are in the process of transformation.

What is the PWA

For the PWA, the user experience is the core. PWA is not a specific technology, but a Web APP that has applied a series of technologies to optimize the use experience. It has the same user experience as Native APP and can add home screen ICONS, be available offline, receive offline notifications, etc. For details, see Demo.

The PWA has three main features

  • Reliability refers to the security of the PWA, which can only run over HTTPS. On the other hand, the PWA can be accessed even when the network is unstable or offline.

  • Rapid response to user interaction, and smooth animation, loading speed, rendering speed and rendering performance.

  • Engagement is added to the desktop and offline messaging push to bring the user back for a second visit and rely on a good user experience to keep them coming back.

The core technology of PWA

PWA is not a separate technology. Technologies include Web App Manifest, Service Worker, Push API & Notification API, App Shell & App Skeleton, etc. Let’s focus on a few technologies and their solutions.

Web App Manifest

Web App Manifest is a technical solution that supports the site to create ICONS on the home screen, and customize the ICONS and colors of the PWA splash screen, as shown below:

Although the Web App Manifest function is powerful, it is not technically difficult. It is a json file with external chain, which is introduced through link: <link rel=”manifest” href= “/assets/manifest.json” >

There are many other fields in the Web App Manifest standard that can be found in the W3C standard

https://w3c.github.io/manifest

Service Worker

Service Worker is one of the most important concepts in PWA. It is a special Web Worker that runs independently of the main thread of the browser. In particular, it can intercept users’ network requests, operate caching, and support functions such as Push and background synchronization.

The Service Worker uses the Cache Storage, the Cache API to operate on the local Cache, and the FETCH API to request server-side data, allowing the user to see a customized error page regardless of whether there is a network connection, or whether a 404 or 500 occurred at the site. Instead of the browser’s default 404 page.

App Shell and App Skeleton

A PWA is usually a SPA and usually uses the App Shell design model. App Shell is a very important concept in PWA, so what is App Shell?

An App Shell is a collection of minimal HTML, CSS, and JavaScript resources that support pages. Once offline, it ensures instant, reliable performance over repeated visits. The screenshot below is what the App Shell presents to users

Using Vue’s project as an example, AppShell contains:

  1. Entry HTML file

  2. Packaged Vendor JS file

  3. The EXPORTED CSS file

As shown in the figure above, the App Shell renders the header part, so the text part is all white screen before loading the data, which is very bad for the user experience. There is a term called App Skeleton screen. Before rendering the data, the App Shell should occupy space in the white screen, and try not to appear the white screen for a long time.

The App Skeleton needs to be rendered to the user in the shortest possible time, so, in general, the App Skeleton is compiled into HTML, like the code below, with the expectation that the browser will display the Skeleton screen first after loading the HTML.

<link rel= “stylesheet” href= “/static/index.css” > This will block the rendering of the skeleton screen until the CSS file is loaded, so the user will see a longer blank screen than expected. This is a problem that few sites are aware of. Even if you do a skeleton screen, it doesn’t necessarily solve the problem of CSS loading preventing skeleton screen rendering, such as ele. me’s PWA home page.

The preload does not prevent HTML rendering. After the preload is complete, change back to the stylesheet and call mount to display the JS rendering results. This is shown in the following code (this code does not run directly, but only to indicate the idea)

In addition to preload, you can also inline the CSS In the link to JS. By default, Vue projects are CSS In JS.

PWA stands for Progressive Web Apps, which means incremental, which means incremental additions to an existing site to improve the user experience without having to reinvent the entire site.

PWA SEO problem solution

SEO is every site is very concerned about the problem, PWA is usually SPA, as we all know, the traditional search engine is unable to index through JS to render the page, so, how do we need to solve this problem?

First of all, it should be explained that Baidu is not the traditional search engine. Both Baidu and Google can index the MOBILE SPA page. For other search engines, the only way to solve the problem of PWA SEO is server side rendering (SSR). Now the mainstream MVVM framework on the market all provide SSR solutions, such as React, Vue, San, etc.

The SSR page is directly out of the server, and the content page is out at the same time, so how to combine this method with the Service Worker to offline? How to achieve the startup effect of AppShell? We use the Service Worker + App Shell + SSR + (Vue/React/San) solution to solve this problem perfectly.

For the first request, the server directly outputs the content after SSR. After the page is loaded, the Service Worker is registered. The Service Worker will pre-cache some static files or other resources in the install phase. The content returned by this/Appshell request is the HTML of the App Shell. This HTML has code that references JS and CSS. Here is an example of Vue:

https://github.com/lavas-project/lavas-template-vue/blob/release-basic/pages/Appshell.vue

On the second request, the Service Worker determines whether the current request is a page request via request.mode === ‘navigate’. If it is, the cached/Appshell HTML structure is returned to the page. The App Shell uses the current URL to request the corresponding JS and data to render the body of the page.

In this way, not only can you solve the SEO problem, the site can be completely offline, but also shorten the white screen time, and more importantly, it can greatly reduce the pressure brought by SERVER SSR. Since the user only needs the server to run the SSR logic for the first render, all subsequent requests are front-end render.

PWA compatibility

In early 2017, only Chrome and Firefox supported PWA. After a year of development, all the major domestic browsers have supported PWA, and the new 11.3 version of iOS also supports PWA.

recommended

More PWA tutorials, documents, Lavas official website, Codelab, PWA effect examples, compatibility please visit the Lavas official website, click on the lower left corner “read the original” can enter the official website.

Brilliant Open Web 

The BOW (Brilliant Open Web) team is a dedicated Web technology building team dedicated to advancing Open Web technology and making the Web the first choice for developers again.

BOW is about the front end, it’s about the Web; Analyze techniques and share practices; Talk about learning, talk about management.

Keep an eye on Open Web developers, reply to “Addgroup”, and let’s promote the development of Open Web technology together!