The Web is an amazing platform with cross-device and cross-operating system compatibility and a user-centric permissions model. The specification is customized by the W3C and WHATWG, and its implementation is handed over to browser vendors. Coupled with its inherent connectivity, users can search anywhere, anytime, or share a web page with anyone. Whenever you visit the page, it’s up to date. WebApp only needs a set of code, can touch anyone, anywhere, any device.

Native apps are known for their reliability and rich functionality. They stay on your device all the time, on the screen, panel, or taskbar. Typically, they can be used independently of a network connection. They start with their own independent experiences. They can read and write files, use local file systems, connect to hardware via USB ports, and interact with data stored on local devices, such as contacts and calendars. In the native App, you can take a picture, see a list of songs playing on the home screen, or control playback through other apps. Native apps are like part of the system.

If you were to compare native apps and Webapps in terms of functionality and accessibility, native apps are the best in terms of functionality, and WebApps are the best in terms of accessibility. What about the PWA?

PWA, Progressive Web Apps (Progressive WebApps), is built and enhanced with modern apis that offer similar capabilities, reliability, installability as native Apps, and a set of code that can reach anyone, anywhere, on any device.

Three App features

  • Capable
  • Reliable
  • Installable

PWA has all three of these features, which makes the PWA app experience more native.

functional

Web apps nowadays have a lot of functions. You can develop a video chat tool based on WebRTC, you can develop a map software using Geolocation API, and you can use Notification API to push messages to your App. Allow users to receive notifications outside of the APP. You can also use WebGL and WebVR to virtualize these scenarios. With Web Assembly, you can step into other ecosystems, such as C and C++, and bring more power to the Web ecosystem.

Until recently, only native apps claimed these features. Of course, there are some capabilities that are not currently available on the Web, but new apis will be defined to extend web capabilities such as file system access, media control, badge modification on ICONS, and full clipboard functionality. All of these capabilities are built in conjunction with a Web security, user-centric permission model to ensure that access to the site does not pose a threat to users.

As modern apis are defined, the Web will become more and more functional.

reliability

A solid PWA application feels fast and does not rely on the network.

Speed is critical to the user experience. In fact, from 1-10 seconds for a page to load, churn increases 123%. Performance does not end after the onload event. Users don’t have to worry all the time about whether their interactions (such as clicking a button) respond. Scrolling and animation need to be smooth.

Finally, a reliable App needs to be network free. Users will expect to open the App when there is a weak network or no network. They expect to see what they loaded last time, like audio or video playing to a certain point in time, and to remain reliable and available even if the Internet connection is difficult. If a request fails, it’s better to give the user a reasonable warning than to silently fail or crash.

Users prefer apps that respond to their actions with blinking eyes, which is also a form of reliability.

Can be installed sex

Installed PWA applications can be launched in a separate window rather than in a browser. They can also launch from the home page, docks, or the taskbar. You can also search for them and open them from the search results. You can also switch to another App and back again. It feels almost like a native App, part of the device.

The installed PWA app will open many new features, including shortcuts and the ability to open files in specific formats.

When a PWA app is opened from a separate window, it changes how the user perceives it and how it is used, and the user uses it as if it were a native app.

The best of both worlds

The core of PWA is still WebApp, with incremental enhancements that allow new functionality to be implemented in modern browsers. Use the Service worker and app Manifest to make your WebApp reliable and installable. If the browser does not support these features, the core functionality of your site is not affected.

conclusion

Of course, there are many other surprises in using PWA. The size of App is smaller. If a 30M original App is replaced by PWA, it may be less than 3M. In addition, the accessibility of PWA applications is inherited from WebApp, which can reach more users through search engines or through sharing. Finally, PWA’s applications can be updated at any time without requiring users to download and install them.

The only thing to note is that in order to make it feel more like a native App, make it extremely performance optimized. For performance tuning, refer to some of the previous articles.

reference

Web. Dev/what – are – pw…