Writing in the front

Before we get started, let’s talk about PWA, which stands for Progressive Web App. It literally translates to Progressive Web App, which is a Web App that can be used offline and installed as a standalone application. It is very lightweight and has a consistent interface across multiple platforms.

The concept of PWA was proposed by the Chrome project team in 2015. Obviously, it is a web-based application, but it has some differences from traditional Web apps. The following is a detailed analysis of PWA technology and its practice in iQiyi App.

An overview of the

Progressive Web apps (PWA) is a new way to improve the Web App experience, giving users the experience of native apps. Since the birth of Web technology, front-end development has had one of the most unique advantages: cross-platform. As long as it is a W3C compliant web page, it can be accessed from any device and any browser. Due to the explosive growth of terminal devices, cross-platform advantages are particularly important at present, and the types and number of intelligent terminals will further expand in the foreseeable future.

But this cross-platform advantage has not been fully exploited in the key area of native Applications. If you’re developing an app, you still need to consider the platforms that might be involved and develop a separate version for each major platform.

This begs the question, why do the cross-platform capabilities of the Web only exist in the Web? Why not apply this ability to software development? If we develop it once, we can use it on all platforms, which will make development much more efficient.

Early application practices were all about the same topic: how to develop Native applications using Web technologies like Electron, Cordova, and React Native. PWA goes one step further: directly implementing the native application experience with Web technology itself.

** What is PWA **

To achieve a native app experience using Web technologies, we need to meet the following requirements:

· Can run on any device;

· Can be quickly opened, used and installed;

· Can be opened in the browser and support desktop shortcut startup;

· Independent Windows;

· Support offline work;

· Integrated with system functions;

· Good performance

PWA technology is used to solve the above problems, so that the Web can “get rid of” the browser and have the use experience and performance of native applications, so as to truly achieve cross-platform applications.

In the mobile era, users tend to use native apps because the Web still falls short of native apps in several key areas:

· High quality UI: Native apps have higher quality UI interfaces and interactions that are more compatible with how mobile devices are used.

· Program entry icon: this is the main advantage of native applications. It is inconvenient to type on mobile devices. Users like to click the icon on the desktop to enter.

· System integration: native applications and system matching can take advantage of many ancillary functions (notifications, sharing, Settings, etc.).

With PWA technology, Web applications can be installed on the desktop, have their own fixed portal, and can call many system functions to achieve the experience of native applications. Developers can achieve the adaptation of the whole platform through the development of a set of code (IOS system is now supported) :

PWA can realize the experience of native applications, not by a specific technology, but through the application of a series of new technologies, so that the security, performance and experience of Web development have been significantly improved. PWA is essentially a Web App, but it has the advantages of both Web App and Native App.

The main features of PWA include the following three points:

· Reliable – load and display instantly, even in unstable network environment, and can be used offline

· Fast – Fast response, with smooth animation in response to user operations

· Immersive experience — Immersive user experience comparable to native apps on devices, and can be added to the desktop

PWA is incremental: it does not require all the requirements for safety, performance, and experience to be met at once. Users can access the content of the Web App smoothly in the browser without installing it. As a result, developers can gradually improve their PWA projects and add more features.

PWA technology principle analysis

We mentioned the three main features of PWA: reliable, fast, and immersive:

· Reliable and fast, which means that users can still have a good use experience and ensure good performance when the network is unstable or even no network. To achieve this, PWA uses a new technique: Service Worker: This technology can realize the front-end to directly process network requests and play a role similar to the transfer server. Meanwhile, since Service Worker is an independent thread, the execution process has little impact on page performance and can guarantee the smooth execution of the main thread.

· An immersive experience, which means fixed desktop ICONS, separate, clean running Windows, extensible system functions (such as notifications), etc. PWA introduces manifest.json file and realizes the installable feature of Web App with Service Worker. It can customize desktop icon, window mode and other configurations to achieve the same use mode as native application.

Therefore, we will introduce two main contents:

· Service Worker technology.

· How to configure PWA to be installable.

▌ 1. The Service Worker

Rich offline experience, regular background synchronization, push notifications, etc. — these functions originally belong to native applications, PWA implemented in Web technology, and ServiceWorker is the technical foundation on which all these functions rely.

What is a Service Worker

Service Worker is a script that the browser runs independently from the web page in the background, which can intercept and process network requests and support functions such as push notification and background synchronization. In the future, ServiceWorker will realize functions such as regular synchronization or geo-fencing, and constantly improve the call of device API. This article focuses on the core functions of Service workers: intercepting and processing network requests, and cache management.

When writing a Service Worker, note the following:

· Service Worker is a JavaScriptWorker that cannot directly access DOM. So the ServiceWorker needs to communicate with the main thread of the page via postMessage, and the page can perform operations on the DOM.

· Service Worker is a programmable network agent. We can use the Service Worker to determine the processing mode of network requests sent by the page, which is equivalent to the front-end having a transfer server that can be written by itself;

· The Service Worker is aborted when it is not in use and restarted the next time it is needed, so it cannot rely on the global state in the onFetch and onMessage handlers of the Service Worker. If you have information that needs to be kept continuously and reused after a restart, it is recommended to use the IndexedDB API to store state.

The life cycle of the Service Worker

The life cycle of a Service Worker is independent of the web page. To install a Service Worker, we need to go through three steps: registration, installation, and activation. \

To install a Service Worker for a specified web page, we need to register the Service Worker in the page first. After the registration is executed, the browser will start the installation step of the Service Worker in the background.

During the installation process, we usually cache some static resources. If all files are successfully cached, the ServiceWorker is successfully installed. If any files fail to download or cache, the installation will fail as well. If the installation fails, the Service Worker tries again the next time the page is accessed.

After the installation is complete, the activation step is entered, during which the old cache is processed.

After activation, the code of the Service Worker can control all pages in its scope. The Service Worker registered for the first time will not take effect until the page is loaded again.

The following is a simplified lifecycle for the initial installation of the Service Worker:

Four basic steps: registration – installation – start – update

The following figure shows a more detailed life cycle process of a Service Worker for you to understand the operation process of Service Worker:

 

  

The premise of Service Worker running \

· Browser support: more and more browsers are available. Currently, Service workers are supported by Chrome, Firefox, Opera, MicrosoftEdge, and safari may support this feature.

· Set HTTPS protocol: During development, developers can use Service Worker through localhost, but if they want to deploy Service Worker on the site, they need to set HTTPS on the server.

▌ PWA can be installed

The manifest file

To make PWA installable, we first need to load a manifest file (manifest.json) in the page that provides information about the application (such as name, startup address, icon, and description). The manifest file is used to install Web applications on the device’s home screen, providing faster access and a richer experience for users.

Here is an example of the contents of a listing:

The Web application manifest is deployed in an HTML page, using a link tag in the header of the file:

Implement the prerequisites for installation

To enable the pop-up of the installation function, the following conditions must be met:

· The Web App has not been installed. Prefer_related_applications is not true.

· The user is a frequent user (Chrome will determine whether the user has visited the target website many times)

· The manifest. Json file must be in the page, and the following fields must be in the file:

Short_name or name;

The official ICONS recommendations include 192px and 512px ICONS;

Start_url;

The display value must be in the following range: fullscreen, standalone,or minimal- UI

· HTTPS protocol is required (prerequisite for service worker operation)

· A Serviceworker is registered, and the Fetch event is monitored in the serviceworker

When all of the above conditions are met, Chrome triggers the beforeInstallPrompt event, which you can listen for to pop up the installation prompt.

After listening to the beforeInstallPrompt event, store the event object E, wait until the user clicks the install button and then execute the e.plompt () method to pop up the system installation popup:

After the user clicks the Install button in the system installation layer, the Web application is added to the desktop to implement PWA installation. After that, the user can access the Web application through the desktop icon.

Iqiyi PC PWA practice

▌ Service Worker Login application in iQiyi

On the login page of the main website of IQiyi, we first use Service Worker technology to optimize network processing, cache commonly used CSS, JS and image resources, and significantly improve the display speed of the login window, as shown in the following figure:

As can be seen from the figure, the network response time from Response start is significantly reduced. More importantly, it can be seen from the “Page loading time Distribution” chart on the right that the page loading time is very stable after using Service Worker, and the network fluctuation has little influence on the page loading, which will significantly add to the actual experience of users.

▌ Iqiyi main station PWA application

The main site of iQiyi already supports quick installation of PWA.

When visiting the homepage of iQiyi main website, there will be a plus sign icon in the lower right corner of the page. Placing the mouse on this icon will show an installation shell layer, as shown below:

After clicking “Add Now”, a system check box will appear on the page, asking you whether to install the PWA application:

After you select Install, a new App icon will appear on the desktop, which is the entry point to open the PWA App. Click the icon to open the IQiyi Shortcut version, and you can see a simpler iQiyi home page without browser Tab, address bar and toolbar, etc. :

▌ Problems encountered and optimization solutions

The main problems encountered when logging in to the application Service Worker for cache processing are: how to give consideration to fast display and cache update, and how to ensure the integrity of cache for cross-domain resources?

· For fast display, when users request resources, Service Worker intercepts them and directly returns them to the cache, saving the time of request to the remote end;

· In order to avoid the delay of cache update, request the remote end to update the cache of corresponding resources after the page is loaded to ensure the timely update of cache content and avoid the problem of incomplete cross-domain resource cache.

In the process of converting web pages into PWA, some optimizations have been made according to the mechanism differences between PWA and web pages:

· Click to jump optimization: The page of iQiyi’s main site jumps to a new TAB, but PWA has only one single page. Therefore, when users visit IQiyi in PWA, click events in the page will be transferred to the current page, avoiding opening a new page of the browser and ensuring users’ immersive experience.

Code examples:

· Record last opened address: PWA only supports opening the home page when it is started. By recording the last opened address of the user, the page closed last time can be restored for the user to continue watching.

Code examples:

▌ Data effect and future planning

Compared with iQiyi’s main site, PWA’s user retention rate increased by 9% after its launch. At present, in order to maintain the unity of the site, iQiyi main site practices desktop quick start. In the future, we will continue to try to practice offline work, message push, skin change, intelligent adjustment of commonly used channels and display interface based on user behavior analysis and other functions, in order to bring users a higher experience, and strive to create a super speed minimal version of iQiyi.

 

end

Maybe you’d like to see more

Iqiyi network control and packet capture test technology practice

Exploration and practice of online learning in iQiyi information flow recommendation service

Scan the qr code below, more exciting content to accompany you!