An article to understand PWA - Progressive Web App

In recent years, a new application development model - PWA (Progressive Web App, progressive Web application) has emerged. Today I will share with you what PWA is, the difference between it and applets, and the technical principles.

 

Basic concepts and technical principles of PWA

PWA is an application development model based on Web technology, which combines the advantages of Web applications and native applications. PWAs are developed using the web standard technology stack (HTML, CSS, and JavaScript), leveraging the capabilities of modern browsers to provide a native app-like experience. The core concept of PWA is progressive enhancement, that is, the function and experience of the application can be gradually improved according to the support degree of the device and browser.

 

The technical principles of PWA mainly include the following aspects:

1. Responsive Layout : The interface of the PWA application can be adaptively laid out according to the screen size and orientation of different devices, ensuring a good user experience on various terminals.
2. Service worker thread (Service Workers) : Service worker thread is one of the core technologies of PWA. It is a script running in the background, which can intercept and process network requests, cache data, and realize offline access and other functions. By using the service worker thread, the PWA application can continue to provide core functions when the network is unstable or disconnected, which enhances the reliability and availability of the application.
3. Application manifest (Web App Manifest) : The application manifest is a JSON file used to describe the name, icon, startup method and other meta information of the PWA application. It allows users to add PWA apps to their home screen and access them like native apps.
4. Push notifications (Push Notifications) : PWA applications can use the browser's push notification function to send real-time notification messages to users and interact with users.

In contrast, a mini program is an application that runs on an App platform (WeChat, Alipay, etc.), which uses the App client as a container, and uses the development framework and tools provided by the platform for development. Mini programs have the advantages of small size, flexibility, no installation, and native capabilities.

The advantages and disadvantages of PWA compared with applets

Both PWA and applets are modern application development models, and they each have some advantages and disadvantages. Here we mainly talk about the advantages and disadvantages of PWA, a progressive web application.

 

Advantages of PWAs

1. Cross-platform support: PWA applications can run on any device that supports a web browser, including desktop and mobile devices, without writing different codes for different platforms.
2. No need to download and install: PWA applications can be accessed through a browser without downloading and installing. Users can directly access the application through the URL and add it to the home screen to use it like a native application.
3. Easy update: The update process of PWA applications is similar to that of web pages. Developers can update the content and functions of applications at any time. Users do not need to manually update applications and always use the latest version.
4. Offline access: With the help of service worker threads and caching technology, PWA applications can be accessed offline, even when there is no network connection, users can still access some content of the application.
5. Better discoverability: PWA applications can be retrieved and discovered through search engines, and users can find relevant PWA applications through search keywords, improving the discoverability of applications.

Shortcomings of PWAs

1. Limited native capabilities: Although PWA apps can use some of the browser's native features, such as push notifications and geolocation, they have limited access to native device capabilities, such as cameras, sensors, etc., compared to native apps.
2. Compatibility issues: Different browsers have different levels of support for PWA technology, which may cause applications to fail to fully utilize their functions and advantages on certain browsers.

summary

In fact, we can intuitively see from such a comparison that PWA is suitable for application scenarios that require cross-platform support and wider accessibility, especially for applications that provide content browsing, e-commerce, and news information. Small programs, on the other hand, are more suitable for building social, life services, and business applications in ecosystems such as WeChat and Alipay, taking advantage of the social communication and native capabilities of the platform.

But now the limitation of small programs has been gradually broken through. With the help of small program container technology, small programs can be separated from platforms such as WeChat and Alipay and run in their own apps . The same small program running capability enables one-end development and multi-terminal operation.

Of course, I believe that after continuous technological development, there will be more technological innovations based on PWA and small programs, and our development and user use will continue to improve.

Both PWA and Mini Programs are important milestones in promoting the development of modern application development models and driving the innovation of mobile applications. How would you choose?