As early as 2015, designer Francis Berryman and Google Chrome engineer Alex Russell proposed the concept of “PWA (Progressive Web Application)” to combine the strengths of the web with the strengths of applications. Its core goal is Improve the performance of Web App and improve the smooth experience of Web App to be comparable to Native.
1. What is PWA
PWA is not a framework or toolset, but a concept and a set of features that developers need to implement in their applications in order to take the user experience of the application to the next level. If a website is said to be a PWA to some extent, the more features it meets in the PWA feature list, the closer it is to this concept.
PWA is a general term for a type of web application that uses advanced web features to make web applications behave and behave like native applications. PWAs can run on multiple platforms and multiple devices from a single code base, like a platform-specific app, can be installed on the device, can run offline and in the background, and can interact with the device and other installed apps integrated.
PWA is 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 once. PWA is very different from it. It essentially provides a user experience similar to native applications. website. One of the reasons for the popularity of PWA is its ability to meet the needs of all mobile web-oriented devices while saving investment costs in application creation and maintenance.
To put it simply, a PWA application is first a web page, which is a web application written using Web technology. It then adds Manifest to the device home screen through the App Shell architecture, and uses Service Worker to implement offline caching and message push. Function.
2. Key technologies of PWA
To sum up, 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 to build PWA applications that instantly, reliably and load the PWA onto the user’s screen, making it look like a native application.
As a way to build PWA, the App Shell architecture provides the most basic Web App framework, including the application’s header, bottom, menu bar and other structures. App Shell architecture, typically implemented using a JavaScript framework such as React or Angular, can be a way to build a single page application (SPA) that separates logic from the actual content.
The App Shell architecture involves caching static resources and then using JavaScript to dynamically load the actual content. It is a cacheable UI framework that supports a minimal collection of HTML/CSS/JS user interfaces. Offline caching ensures instant, reliable and good performance on repeated visits. In this way, users can quickly see the basic interface of the Web App when they open the application repeatedly, and only need to request and load the necessary content from the network. This also means that the App Shell does not need to be loaded from the network every time a user accesses it, but only the necessary content needs to be loaded from the network. ?
App Shell is the interaction between a web application and the current device platform completed through the Web runtime in the browser, especially adding a startup entry for the application on the screen of the current device. ?
Web Application Manifest, which exposes the metadata of a web application to the browser through a manifest file, including name, icon URL, etc., for the browser to use, such as exposing it to the operating system when adding to the home screen or pushing notifications, thereby enhancing the web Application and operating system integration capabilities. 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 a user accesses a PWA application for the first time, the browser will register and install the application according to the contents 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 suitable for quickly loading some initial HTML onto the screen without a network connection.
2.2 Service worker
Service worker is a type of worker in web technology. So, what is a worker?
Due to the single-threaded nature of Javascript, any “weight” operation 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 three types of Workers provided in modern browsers, namely:
- Web worker – includes dedicated workers and shared workers
- Service worker
- Worklet–Contains PaintWorklet, AudioWorklet, AnimationWorklet, and LayoutWorklet. Among them, Worklet is related to hardware interaction design and is still experimental. Web workers are particularly useful for running scripts in the background. Today’s web pages can register multiple Workers so that different tasks can be completed in independent environments. Service worker is equivalent to a “middle layer” inserted by the browser in the communication between the web page and the server. It essentially acts as a proxy, programmatically intercepts and processes network requests from the page, and can even generate brand-new responses and build HTML from various sources. .
Regarding the main content of service worker, the following figure gives the core tips:
Preload files during service worker installation. For SPAs, this will typically include 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 when offline. Handle push notifications similar to native apps. This means that the website can get the user’s permission to send notifications and then rely on Service Workers to receive the messages and execute them even if the browser is closed. .
2.3 Push, notification and background services based on Service worker
Currently, 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, which is the browser; “Application Server” is the back-end service; “Push Service” plays a core role as an intermediary agent. Push Service receives the client’s message subscription, maintains and manages a list of “client url-public key” pairs, and sends subscription and private key information to the server for storage; in addition, it must subsequently receive push messages 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 until the user is online before sending it to them.
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. It can even bring operations.
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 still runs after the browser is closed, even if the user does not have a network or is closed On the client side, the service worker still stores the corresponding request and initiates data synchronization when a network connection is available.
3. Application features and functional features 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 uses a Service Worker to eliminate dependence on the web server.
- Fast: With smooth animations and interactions, the app has a native experience without clumsy web page scrolling.
- Engagement: Ability to run full screen (if added to mobile desktop) and handle notifications.
The main features of the PWA application are as follows:
- Progressive Enhancement: Run in as many environments as possible, using any available service and degrading gracefully if the service is not available.
- Responsive UI: The app adapts to various input methods (touch, voice, etc.) and output methods (different screen sizes, vibration, audio, braille display, etc.).
- Connection Independence: The app works well offline and on intermittent or low-bandwidth network connections.
- App-like UI: The application uses the UI elements of the native platform and can load quickly.
- Continuous Updates: The Service Worker API defines a process for automatically updating applications to new versions.
- Secure communications: Provide services and communications over HTTPS to protect against snooping and attacks.
- Application Discovery: That is, SEO friendly, W3C web application manifest and other metadata that enable search engines to find web applications.
- Push interaction: Features such as push notifications can proactively keep users informed.
- Background loading: When the web page is closed, the PWA can still run in the background to obtain data updates (with limitations of course).
- Native installability: Web applications can be installed without going through a native app store.
- Linkability: Easily share apps via URL to run without explicit installation.
- Revisitable Applications can be easily shared via URL and run without complicated installation.
- Lightweight: The web application is 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 as 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: React, released by Facebook in 2013, includes an extensive JavaScript library that uses JSX to render functions that connect HTML structures to provide React PWA solutions.
- Ionic: An open source SDK that provides a vast library of plugins to access APIs without coding
- Polymer: Polymer has a variety of tools, components and templates, using a stand-alone framework using pure HTML, CSS or JavaScript
- 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 that builds small code packages that load quickly.
For the software ecosystem, PWA has indeed brought certain impact and changes to some traditional application software and development methods.
For some developers, the emergence of PWA technology means that they need 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 be more flexible in application development and reduces the development and release costs of some native applications.
The emergence of PWA technology may have a certain impact on the app store, because PWA can be accessed directly through the browser without downloading and installation, which may lead to the loss of some app store users. However, app stores can also respond to this change by taking measures, such as launching PWA apps and providing better app 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, while also reducing the download and installation costs of some applications. However, users also need to consider the limitations and deficiencies that PWA applications may have in some aspects compared to 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. Different application scenarios and development needs will affect developers’ choices between PWA and native applications. If the application has high requirements for functionality, performance and user experience, you can consider native applications; if you want to further reduce development and maintenance costs but still have some features of an app, you can consider using PWA.
5.PWA and Mini Program
Various types of small programs have more or less inherited or borrowed the technical concepts of PWA. It can be considered that PWA is one of the sources of various small programs.
Relying on Super App, companies such as WeChat, Baidu, and Alipay have launched their own mini programs. In summary, mini programs use lightweight frameworks and components, load quickly, and users can quickly open the application. Mini programs can be natively integrated with the device’s hardware functions (such as camera, positioning, gyroscope, etc.) to provide richer functions and user experience. Distributed through app stores, users can easily search, discover and install applets. Mini program development uses unified development tools and languages, which reduces developers’ learning costs to a certain extent. In addition, mini programs can share user data and provide more convenient login and data transmission.
PWA runs on nearly all modern browsers, with broad device and platform support. Developers can make full use of existing web development knowledge and tools, and the large developer community provides a wealth of resources, tools and support. Mini programs can be used as traffic portals through super apps, or they can be run in enterprise-owned apps. Any enterprise’s app only needs to integrate the mini program runtime SDK to obtain mini program running capabilities, 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 operation.
PWA and mini programs are both popular technical solutions in the current field of mobile application development, each with its own characteristics. From a developer’s perspective, PWA has broad browser support, cross-platform capabilities, and a mature web development ecosystem. Mini programs have outstanding performance in terms of traffic entrance, application store support and integration with hardware.
6. Summary
PWA is an advanced concept and technology exploration, but the concept cannot directly evolve into a competitive advantage. It is now 2023, and PWA, which has lower promotion and application costs, still lives in the shadow of mini programs, and it seems that it still cannot shake the status quo of application development. In addition to the strong influence of domestic platforms and platform audit factors, PWA still has some obvious shortcomings. PWA is a browser-based web-side technology. Compared with native APP, the system-level functions are obviously insufficient. For example, it cannot make hardware-level calls; its performance in animation, rendering, etc. is also significantly weaker than native APP; and it requires a large amount of calculation. Processing and audio and video are also weak points.
So, if PWA wants to gain wider application, where is the highest priority breakthrough point?
GoodUse tools< /strong>
Successful front-end engineers are good at using tools. In recent years, the low-code concept has become popular, such as Mendix abroad and JNPF domestically. This new development method has a graphical drag-and-drop configuration interface and is compatible with custom components. Code expansion has indeed greatly improved efficiency in the construction of B-side backend management websites.
JNPF, many people have used it, it is a master of functions, and any information system can be developed based on it.
The principle is to concretize certain recurring scenes and processes in the development process into components, APIs, and database interfaces to avoid reinventing the wheel. This greatly improves programmers’ productivity.
Official website: www.jnpfsoft.com/?csdn. If you have free time, you can expand your knowledge.
This is a simple, cross-platform rapid development framework based on Java Boot/.Net Core. The front-end and back-end encapsulate thousands of common classes for easy expansion; it integrates a code generator to support front-end and front-end business code generation to meet rapid development and improve work efficiency; the framework integrates various commonly used classes such as forms, reports, charts, and large screens. Demo is easy to use directly; the back-end 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. However, the low-code visualization mode reduces the repetitive labor of building “add, delete, modify and check” functions.