Why PWA? Apple is so bad that developers have to install their own iOS App certificates every 7 days, so I can’t stand it anymore, so I’m ditching the React-Native stack until Apple changes it.

At present, there is little information about PWA in China. The author searched the Internet for a long time, and finally deduced a solution based on observation, hoping to bring some gains to everyone and step on fewer pits

So let’s cut to the chase and get straight to the point.

Pit point 1: history.go(-1) is invalid in iOS14

This pit was newly introduced in iOS14. The goBack exported from useHistory of the React-Router turned over after the author upgraded the system, and the button did not respond. At the beginning, without careful research, we just used push instead of function implementation and did a hasty work. Until recently, keep-alive was adopted to improve PWA’s page-hopping experience (it is still beneficial to read more technical articles, otherwise, we would not know how to search to solve the problem), and this problem has become a problem that we have to solve again.

The main solution is not to trigger re-rendering when returning to the previous page to simulate the effect of the real App. The implementation principle of Keep-Alive is basically to modify the React-Router. When the page jumps, the rendering component is directly fetched from the cache to avoid re-rendering, so the specific implementation is not extended. Can have a look at the source code of this library (a lot of similar library implementation methods are pits, this library is a personal try the effect of the best one, more in line with personal needs)

After trying N+1 times, I finally observed that when the length of history is greater than 2, the goBack will work again. Finally, the author solved this problem by artificially pushing a layer in the first level of the page through hack.

let isFirstLoading = true;

const PageA = () = > {
  useEffect(() = > {
    if (isFirstLoading) {
      push('/'); // hack
      isFirstLoading = false; }} []);return <div />;
};
Copy the code

Pit 2: The apple-touch-icon of PWA in iOS14 is invalid

I have tried this for a long time. The PWA icon specifies that a meta named Apple-touch-icon needs to be set in iOS. However, the icon set by the author is invalid after upgrading to iOS14. It is found that this icon must have some special response headers. It is better to directly use the one in the CDN chart bed.

Otherwise,, the PWA in iOS is still not perfect, I hope not to introduce new bugs, of course, locking the iOS version can also be considered.