As early as 2015, designer Francis Berryman and Google Chrome engineer Alex Russell proposed the concept of "PWA (Progressive Web Application)", which combines the advantages of the network with the advantages of applications. Its core goal is Improve the performance of Web App and improve the smooth experience of Web App comparable to Native.
1. What is PWA
A PWA is not a framework or a toolset, but a concept, a set of features that developers need to implement in an application in order to take the user experience of the application to the next level. If a website is somehow a PWA, the more features it fulfills in the PWA feature list, the closer it comes to that concept.
PWA is a general term for a class of web applications that make web applications behave and behave like native applications through advanced web functions. PWA can run on multiple platforms and multiple devices through a single code base, like a platform-specific application, can be installed on the device, can run offline and in the background, and can communicate with the device and other installed applications integrated.
PWAs are able to reuse existing code to provide service experience. Based on other cross-platform technologies, it is often necessary to deploy applications adapted to various devices and platforms to all stores at one time. PWA is very different from it, essentially providing a user experience similar to native applications. website. One of the reasons for the popularity of PWA is that it can meet the needs of all mobile network-oriented devices, while saving the investment cost of application creation and maintenance.
To put it simply, a PWA application is first a webpage, which is a webpage application written by web technology, and then added to the main screen of the device by adding Manifest through the App Shell architecture, and then realizes offline caching and message push through Service Worker. Function.
2. Key technologies of PWA
In summary, there are two key technologies in PWA applications: Manifest-based App Shell architecture and Service worker operating mechanism.
2.1 Manifest-based App Shell architecture
The App Shell architecture is a way of building PWA applications that instantly and reliably loads the PWA on the user's screen, similar to native applications.
As a PWA construction method, the App Shell architecture provides the most basic Web App framework, including the application's header, bottom, menu bar and other structures. Typically implemented using a JavaScript framework such as React or Angular, the App Shell architecture can be a way of building single-page applications (SPAs) that separate logic from actual content.
The App Shell architecture involves caching static resources and then dynamically loading the actual content using JavaScript. It is a cacheable UI framework that can support minimal HTML/CSS/JS user interface collections. Having an offline cache ensures instant, reliable, and good performance on repeat user visits. In this way, users can quickly see the basic interface of the Web App when they repeatedly open the application, and only need to request and load the necessary content from the network. This also means that instead of loading the App Shell from the network every time the user visits, only the necessary content needs to be loaded from the network.
App Shell is the interaction between the web application and the current device platform through the Web runtime in the browser, especially adding the startup entry of the application on the screen of the current device.
Web Application Manifest, which exposes the metadata of the web application to the browser through a manifest file, including the name, the URL of the icon, etc., for the browser to use, such as exposing to the operating system when adding to the home screen or pushing notifications, thereby enhancing the web Integration capabilities of applications and operating systems. Manifest is a json file, a simple example is as follows:
{
"name": "Progressive web app sample",
"short_name": "pwa sample",
"start_url": "/index.html",
"display": "standalone",
"theme_color": "#FFDF01",
"background_color": "#FFDF01",
"icons": [
{
"src": "homescreen.png",
"sizes": "168x168",
"type": "image/png"
},
{
"src": "homescreen-124.png",
"sizes": "124x124",
"type": "image/png"
}
]
}When the user accesses the PWA application for the first time, the browser will register and install the application according to the content of the manifest.json file, so that it can be accessed offline at any time.
For single-page applications using JavaScript-heavy architectures, the Manifest-based App Shell is good for quickly loading some initial HTML onto the screen without a network connection.
2.2 Service worker
Service worker is a kind of worker in web technology, so what is worker?
Due to the single-threaded nature of Javascript, any "weight" operations will block the main thread. In order to improve performance and experience, modern browsers use workers as a multi-threading mechanism to turn original single-threaded applications into multi-threaded operations. There are 3 types of Workers available in modern browsers, namely:
- Web workers - including dedicated workers and shared workers
- Service worker
- Worklet —— Contains PaintWorklet, AudioWorklet, AnimationWorklet, LayoutWorklet. Among them, Worklet is related to hardware interaction design and is still in an experimental state. Web workers are especially useful for running scripts in the background. The current web pages can register multiple workers, so that different tasks can be completed in their own independent environments. Service workers are equivalent to a "middle layer" inserted by the browser in the communication between the web page and the server, essentially acting as a proxy, programmatically intercepting and processing network requests from the page, and even generating completely new responses from various sources and building HTML .
Regarding the main content of the service worker, the following figure gives the core hint:
Preload files during Service Worker installation. For SPAs, this typically includes the "application shell" we discussed earlier, while simple static websites may choose to preload all HTML, CSS, and JavaScript to ensure basic functionality is maintained offline. Handles push notifications, similar to native apps. This means a website can obtain the user's permission to send a notification, then rely on Service Workers to receive the message and execute it, even if the browser is closed. .
2.3 Push, notification and background services based on Service worker
At present, different browser manufacturers use different Push Services. Chrome uses its own FCM, and Firefox also uses its own services. Different push services follow the common Web Push protocol and have standard calling methods.
Among them, "UA" is our user client, that is, the browser; "Application Server" is the back-end service; "Push Service" plays a core role as an intermediate agent. The Push Service receives the client's message subscription, maintains and manages the list of "client url-public key" pairs, and sends the subscription and private key information to the server for storage; in addition, it has to receive the push message from the server, verify and Sent to the object's client for display.
Push Service also has a very important function: when the user is offline, it can help us save the message queue and send it to the user until they are online.
The function of Notification notification is similar to that of message push, but it is simpler. Just set the notification message and call the same notification interface of the service worker, and it can even be operated.
Background synchronization is also a sub-function of Service Worker, which is used to synchronize background data or continue front-end request messages when the terminal has a weak network or no king. Since the service worker is still running after the browser is closed, even if the user has no network or closes the On the client side, the service worker will still store the corresponding request and initiate data synchronization when there is an available network connection.
3. Application features and functional characteristics of PWA
The PWA application features given by Google are as follows:
- Reliable : Loads quickly even with a poor or no internet connection. When there is no Internet connection, PWA will use Service Worker to eliminate the dependence on the web server.
- Fast : With smooth animations and interactions, apps have a native experience without clumsy scrolling.
- Engagement : Ability to run full screen (if added to phone desktop), and handle notifications.
The main features of the PWA application are as follows:
- Progressive Enhancement : Runs in as many environments as possible, can use any available service, and degrades gracefully when none are available.
- Responsive UI : The app adapts to various input methods (touch, voice, etc.) and output methods (different screen sizes, vibration, audio, braille displays, etc.).
- Connection independence : The app works well offline and with intermittent or low-bandwidth network connections.
- App-like UI : The application adopts the UI elements of the native platform and can quickly load the user interface.
- Continuous updates : The Service Worker API defines a process for automatically updating applications to new versions.
- Secure Communications : Services and communications are provided over HTTPS to prevent snooping and attacks.
- Application Discovery : Metadata such as SEO friendly, W3C web application manifest, enables search engines to find web applications.
- Push interaction : Features such as push notifications can proactively keep users up-to-date.
- Background loading : When the webpage is closed, PWA can still run in the background to obtain data updates (of course there are limitations).
- Native Installability : Web applications can be installed without going through a native app store.
- Linkability : Easily share applications via URL to run without explicit installation.
- It's re-accessible , the app can be easily shared via URL, and it works without complicated installations.
- Lightweight : web applications are more lightweight, and the entire APP is within KB.
4. PWA development tools and ecological impact
The progressive web application (PWA) framework is simple and reliable. Developers can use different tools to develop PWA. Common development tool frameworks are as follows:
- VueJS : Vue is one of the top PWA framework libraries because it simplifies coding and provides high-speed rendering.
- AngularJS : Released by Google in 2009, it is one of the most widespread processes in PWA application development.
- ReactJS : Released by Facebook in 2013, React includes an extensive JavaScript library that uses JSX to render functions that connect HTML structures to provide a React PWA solution.
- Ionic : An open-source SDK that provides a huge library of plugins to access APIs without coding
- Polymer : Polymer has a variety of tools, components and templates, using pure HTML, CSS or JavaScript as an independent framework
- Magento PWA Studio : Provides everything you need to create, deploy, and manage PWAs, including tools for building user interfaces, managing data, and testing applications.
- Svelte : A JavaScript framework for developing PWAs, built into small code packages that load quickly.
As far as the software ecology is concerned, PWA has indeed brought some impact and changes to some traditional application software and development methods.
For some developers, the emergence of PWA technology means that it is necessary to consider application development on the Web side and provide users with a better Web application experience. But at the same time, the development method of PWA also allows them to develop applications more flexibly, and reduces the development and release costs of some native applications.
The emergence of PWA technology may have a certain impact on the application store, because PWA can be directly accessed through the browser without downloading and installation, which may lead to the loss of some application store users. However, the app store can also respond to this change by taking measures, such as launching PWA applications and providing better application monetization opportunities.
For users, the emergence of PWA technology may provide a better web application experience, such as offline access, desktop shortcuts, push notifications and other functions, and it can also reduce the download and installation costs of some applications. However, users also need to consider that PWA applications may have more limitations and deficiencies in some aspects than native applications and applets.
PWA technology may have a certain impact on application software developers, application stores and users, but it will not completely subvert the original development and use methods. The advantages and disadvantages of PWA are relative, and different application scenarios and development requirements will affect developers' choice of PWA and native applications. If the function, performance and user experience requirements of the application are high, you can consider the native application; if you want to further reduce the development and maintenance costs, but have some features of the app, you can consider using PWA.
5. PWA and Mini Programs
Various types of small programs have more or less inherited or borrowed from the technical concept of PWA. It can be considered that PWA is one of the sources of various small programs.
Relying on the Super App, WeChat, Baidu, Alipay and other companies have launched their own small programs. To sum up, the mini program uses a lightweight framework and components, and the loading speed is fast, so that users can quickly open the application. Mini programs can be natively integrated with device hardware functions (such as camera, positioning, gyroscope, etc.) to provide richer functions and user experience. Distributed through the application store, users can easily search, discover and install applets. Small program development uses a unified development tool and language, which reduces the learning cost of developers to a certain extent. In addition, applets can share user data, providing more convenient login and data transmission.
PWAs can run on almost all modern browsers, with wide device and platform support. Developers can make full use of existing web development knowledge and tools, and the huge developer community provides rich resources, tools and support. Mini Programs can be used as a traffic entry through the Super App, or run in the enterprise's own App. Apps of any enterprise only need to integrate the Mini Program Runtime SDK to obtain the ability to run Mini Programs, allowing Mini Programs to have more distribution channel. The Mini Program ecosystem provides data analysis and statistical tools to help developers understand user behavior, application performance, and usage. Developers can use these tools to obtain key indicators and data for data-driven optimization and improvement. These tools provide visual reports and charts to help developers better understand user behavior and application performance.
Both PWA and applets are popular technical solutions in the field of mobile application development, each with its own characteristics. From a developer's point of view, PWA has extensive browser support, cross-platform capabilities, and a mature web development ecosystem. Small programs are outstanding in terms of traffic entry, application store support, and hardware integration.
6. Summary
PWA is an advanced concept and technological exploration, but the concept cannot directly evolve into a competitive advantage. It is now 2023, and PWA, which has lower promotion and application costs, is still living in the shadow of small programs, and it seems that it still cannot shake the status quo of application development. In addition to the strong influence of various domestic platforms and platform audit factors, PWA still has some obvious shortcomings. PWA is a browser-based web-end technology. Compared with native APP, various system-level functions are obviously insufficient, such as inability to make calls at the hardware level; performance in animation and rendering is also significantly weaker than native APP; large amount of calculation Processing and audio and video are also weak points.
So, if PWA is to gain wider application, where is the highest priority breakthrough point?
Make good use of tools
Successful front-end engineers are very good at using tools. In recent years, low-code concepts have become popular, such as Mendix abroad and JNPF in China. This new development method has a graphical drag-and-drop configuration interface, and is compatible with custom components. Code expansion has indeed greatly improved the efficiency in the construction of B-side background management websites.
JNPF, many people have used it, it is a master of functions, any information system can be developed based on it.
The principle is to visualize certain recurring scenarios and processes in the development process into individual components, APIs, and database interfaces, avoiding repeated wheel creation. Thus greatly improving the productivity of programmers.
Official website: www.jnpfsoft.com/?csdn , if you have spare time, you can do a knowledge expansion.
This is a simple, cross-platform rapid development framework based on Java Boot/.Net Core. Thousands of commonly used classes are encapsulated in the front and back ends, which is convenient for expansion; the code generator is integrated to support the generation of business codes in the front and back ends, satisfying rapid development and improving work efficiency; the framework integrates forms, reports, charts, large screens and other commonly used Demo is easy to use directly; the backend framework supports Vue2 and Vue3.
In order to support application development with higher technical requirements, from database modeling, Web API construction to page design, there is almost no difference from traditional software development. Only through the low-code visualization mode, the repetitive labor of building the "addition, deletion, modification and query" function is reduced.