Progressive Web Apps will lead the next generation of web app
Two weeks ago, our developer team attended the largest JavaScript Conference in Shanghai, where we found the most recent techniques and web developed tools from different JavaScript communities.
The most appealing talk “Upgrading to Progressive Web Apps” is given by Hux Huang, which introduced the PWAs and details of how the PWAs work.
What is Progressive Web App?
I am sure you have this kind of experiences. You open an App that you haven’t used for a while. However, the App tells you that your App is out of version, and you need to update otherwise it won’t function properly. To update the App, you need to launch the app store and confirm your password. What a hazard! Instead, imagine that the App will always be up-to-date. That can be realized by the Progressive Web App (PWA), which was announced in the 2016 Google I/O.PWA combines the advantages of both native App and web browser.
The Advantages of PWA
As we mentioned above, PWA always keeps the latest version of the app so that you don’t need to manually update anymore. You won’t feel any difference between native apps and PWAs. For Safety, PWAs serve via HTTPS which encrypts the HTTP. You can easily share a PWA app to your friends via a URL. Same as responsive websites, the PWAs also adapt to any devices, such as desktop, mobile, and so on. One cool thing is, PWA provides service that is able to work off-line or on low-quality networks.
How the service worker works
Service worker is a script that links between browser and client side and it deals with HTTP requests. In Hux Huang’s talk, he mentioned that PWA changes web architecture from mobile-first to offline-first. By using “stale-while-revalidate” method, we can load our web pages from cache to page first, while the cache can be pre-loaded from Internet. Therefore, you don’t even need to connect the Internet because you can get most of data from cache. As a result, the Web App can load faster with fewer Internet requests.
As we know how the service worker functions, we can easily utilize PRPL pattern into the PWA web architecture. The PRPL pattern stands for:
- Push critical resources for the initial URL route,
- Render initial route,
- Pre-cache remaining routes,
- Lazy-load and create remaining routes on demand.
Imagine that if we could provide a link to our clients and the clients can choose whatever device they want to download without device specific problems. Whenever a bug is spotted, the updated version of app can be ready in the application store without waiting for approval from manufacturers. A growing number of internet companies are thinking to adopt this technology within the next 5 year. Led by F&B giant Eleme, the influence of PWA is becoming radiant to other industries in China.
The Future Web
The mobile app has been thriving during the last decade. Web techniques transform from static website, dramatic website, mobile website, nowadays to the progressive web app. Progressive Web App takes benefits of both native web and browser webpages, therefore many foreign enterprises such as CNN, Financial Time, Wego, and Chinese companies, such as Eleme, Alibaba, are utilizing PWAs.
Statistics from Google I/O says that installment rate of Financial Time has been increased by 48% in number since adopting PWAs. It is just one single example that shows the great potential PWAs can bring. So, don’t make your app out of style. Let’s build Progressive Web Apps right now!
