Front-end time President Sauce pushed a:
Still learning wechat applets? Google says PWA is the future!


Now the first benefit that PWA has really brought to the masses of our people is that it has brought us a microblog “client” with no advertising and normal time flow.

“What’s wrong with advertising?”

This is one of the biggest feelings sina Weibo APP users have: advertising. Therefore, Sina Weibo is affectionately called “slag wave”.

More and more ads, more and more difficult to use the interface, even Hecaitou in his “Slot Past” joked about its complicated notification interface and confusing timeline.


Ordinary users have encountered a large number of advertisements on the home page, which has seriously affected our user experience. Therefore, for all kinds of “we media” big Vs, the decline in reading numbers caused by time flow disorder may have seriously affected their daily business income. In response, Weibo fan specifically issued a “note on the” decline in reading “micro blog.

In this microblog, we can see that the microblog stream limit is actually the so-called “optimization” of users’ feedback on the content they care about, so many people like President Jiang do not like, do not comment or even do not forward, our home page is a mess, isn’t it?



However, At Google’s Developer conference on December 13, Michael Yeung, a development technology promotion engineer at Google, said sina Weibo was working on a new experimental Web Mobile PWA application, which is now in beta. The biggest feature of this version of Sina Weibo is that it can realize smooth scrolling of weibo even under the environment of low network speed.


PWA stands for Progressive Web Apps. It is led by Google. The main feature of PWA is to make the experience of Web Apps more similar to native Apps, significantly improve the loading speed of Apps, and even run offline. New versions of Chrome and UC browsers now support PWA pages.

The redesigned version of Sina Weibo will also significantly speed up the opening of weibo pages for some browsers that do not support PWA, such as Safari on iOS, according to Weibo engineers.

PWA version of Weibo m.weibo.cn/beta, the link is the same as the previous HTML5 version of weibo, but the location of some web elements has changed. Now you can see not only the microblog information flow, but also the popular view, search popular microblog and other operations. Similar to a light App – the main advantage is that the stream is organized by release time and not disrupted.

Close to app-like web pages

Take the PWA version of Weibo as an example. If you want to “get this APP”, you first need to open Chrome, UC, 360 browser, Baidu browser and so on on the Android phone, enter the corresponding URL, open the web page, log in the account, and then you can use Weibo.

You then have the option of adding the page to your desktop and waiting for it to load, an icon that looks a lot like a Microblogging APP appears.

Click this icon directly, you can enter your weibo page, which is more interesting:

Clicking on the newly generated icon on the desktop will bring up a separate open screen – Weibo Lite. No matter how much you swipe up and down on the browsing page, there is no browser address bar, and there is a separate background TAB for multitasking.

The transition animation of browsing pictures and videos is also very APP. If there is no advertisement, it is hard to tell the difference from weibo APP.

Starting at 10 am on December 13, users who visited the mobile version of Weibo’s web page were automatically redirected to the latest version of Weibo PWA.

progressive

As can be seen from the various steps of the PWA version on Weibo, PWA in practice is somewhat similar to the “cultivation game” — that is, progressive image expression.

If you just want to browse it temporarily, open your browser and access it directly. There is no need to keep it on your desktop.

Of course, for heavy weibo users, the PWA version of Weibo can gradually become an App. After being added to the main screen, you can run it in full screen the next time you use it, and load the previous cache even if the network is not good the next time you open it.

Offline capabilities

PWA’s “kung Fu” is not just a matter of changing the interface and adding a home screen. It can be turned on quickly offline and on weak networks.

With the help of the Service Worker and Cache API, web pages can Cache some content beforehand.


Google’s own Chrome Dev Summit 2017 page, for example, allows you to query traffic information offline.





This is also significant for microblogs with a higher proportion of images and videos in their content composition: with this offline capability, the PWA version of Microblogs can ensure the loading speed of images and videos even in poor Internet environments.

In the developer documentation example, using this offline capability, voice memos can record voices without the need for a network.


Push notification

One of the biggest differences between web pages and apps is that there is no push, so web pages leave users with the impression of “use up and go”. In the era of PWA, none of this existed: even if you didn’t open a web page, you still got a push message.

The general technical principle still relies on Service workers and various push mechanisms. Currently 360 browser, Mobile Baidu and UC browser all support the Service Worker specification and Cache API. QQ browser has also announced that it will support the Service Worker specification in the near future.

As for the specific push mechanism, Chrome currently supports Google’s official push mechanism, but since the PWA version of Weibo already supports UC, Baidu and other browsers, more push service providers may be connected in the future.


PWA also has a fellow student, AMP

“The world’s martial arts, only fast can not break” is the most accurate description of AMP.

AMP is a mobile web acceleration program launched by Google to solve the problem of slow search loading speed and poor reading experience on mobile terminals. The key is that the core script and image resources are distributed by Google, optimized for static resource loading with the help of Google’s data center.

The end result is a page that opens in seconds, with a median download speed of less than 0.5 seconds, twice the browsing time of a regular web page, and a 20% increase in conversion, according to Google statistics.


These characteristics of PWA are quite different from those of small programs, and wechat has strict restrictions on the push notification of small programs.

In fact, the different positioning of Google and Tencent’s wechat has determined the difference in product positioning — PWA based on web pages and small programs based on a chat APP are bound to be different.

Supporting multiple browsers on the web also makes the PWA more widely applicable, as long as developers follow the technical specifications. The launch of small programs requires approval by wechat, more like a simplified version of Apple’s App store.

Not only audit, limited by the platform, small programs are also forced to take sides — for example, it is almost impossible for Weibo and Taobao to produce small program version (small program can only see the popular weibo, there is no complete version of information flow), Ele. me, Meituan Dianping can only use wechat payment.

Small programs are somewhat similar to Android Instant Apps, another Google project. PWA is the app-based web page, while Instant Apps is a simplified version of APP. Different starting points lead to different products. Small programs are more like Instant Apps in the wechat App Store.

Having said that, by far the most obvious thing you might feel is the ad-free PWA version of Weibo.

So one of the biggest winners of Google PWA’s promotion in China is Weibo.

The software engineer in charge of the project said: The efforts of half a year are not in vain! And even if you’re using a browser that doesn’t currently support PWA (such as iOS Safari), the redesigned version will speed up the opening of the mobile web version of Weibo.