PWA technology landed! Turn your site (Web) into an APP (application) in seconds

Web applications are in the ascendant, we are very accustomed to doing our own work on the computer, and with many powerful online websites, our Windows desktop is no longer crowded with various shortcuts; not only on the PC side, but also on the On the mobile side, we no longer install various software in the vast application market. Lightweight various small programs take their place, and the way of clicking and running without installation brings great convenience to everyone's work and life.

We are very aware of the convenience that this change brings to our life and work, but occasionally surfing the Internet, we also miss the era when the desktop is full of local applications, and the desktop can be run by double-clicking, instead of searching for what we need in the open web page Functional web pages can still be used normally even if the internet is disconnected, and they seem to be faster than web pages in terms of usage speed.

Seeing this, you may want to say, what does the PWA you talk about have anything to do with you talking so much?

What is Progressive Web ( PWA )?

                --- 渐进式 Web 应用（Progressive Web App简称PWA）介绍

PWA refers to web applications developed using specified technologies and standard patterns, so that web applications have the characteristics and experience of native applications. For example, we feel that local applications are convenient to use and respond faster.

With PWA technology, there are two benefits. On the one hand, the application development still adopts the method of web development. We only need simple configuration to use it. There is no need to make installation packages for various operating systems. App store download process.

On the other hand, after the application is installed, users can quickly access it through the desktop icon. The resources required by the application are cached offline after the first installation and can also be used locally offline. The system push can be used in real time, and the application is automatically upgraded without reinstallation.

For example, for a site that supports PWA technology in Chrome, you can click Install directly in the address bar, or click Install in the browser options.

PWA Status

PWA was proposed by Google in 2016, officially launched in 2017, and ushered in a major breakthrough in 2018. The world's top browser manufacturers, Google, Microsoft, and Apple have all announced their support for PWA technology. The key technology of PWA is Service Worker, which is currently supported by all major browsers on desktop and mobile devices. At present, in addition to Safari, other mainstream browsers have supported adding home screen and push notification messages.

Here we briefly introduce Service Worker to you.

Where the Service Worker acts as a proxy server, between the web application, the browser, and the network (if available). This API is designed to create a better offline experience, intercept network requests and take appropriate action based on network availability and update content residing on the server, it also allows access to push notifications and synchronization with the background API.

the usage scenario and future of PWA 161e7affb32012?

According to the introduction of PWA, you may ask, where is the value of this thing?

The current statistics show that there is not much market for PWA on the mobile terminal. On our mobile terminal, a 100M APP from 3G, 4G to 5G can be downloaded very quickly. Except for flying, our mobile phones basically do not when offline.

On the PC side, we start working. As long as you are still using office software such as Office, you will realize that the convenience brought by WPA is immeasurable. In the process of global informatization, our company is also in the process of informatization. A variety of commonly used tools and software will become a must-have link to be integrated into Web applications. For example, online Excel , online report design , online word and so on.

All of this is gradually connected with "online" and "web front-end".

It is not so simple to smoothly move these applications into Web applications. These tools have complex functions and heavy resources. At the same time, for some workflow projects that require real-time feedback, operations are often forgotten.

Taking online Excel as an example, the difficulties in collaborative editing include but are not limited to: multi-person conflict processing, version data update, room management, rich text processing, copy and paste processing, etc.

The following figure integrates class Excel table editor using PWA technology. For end users, the operation experience of Excel is completely retained. When working with multiple tasks, use alt (cmd)-tab to quickly switch applications, and system-level push real-time Pay attention to work status. And all this can be present in our web application, no need for native application anymore.

Introducing the relevant knowledge points of PWA, let's take a look at how PWA can turn a site into an APP through an example.

Example use

Get ready, download the table editor example, https://www.grapecity.com.cn/developer/spreadjs
To make the SpreadJS online form editor support PWA only need to implement App Manifest and Service Worker

1. Add manifest.json file
   Create a new manifest.json and reference it in index.html

   {
     "name": "SpreadJSDesigner",
     "short_name": "SJSD",
     "descriptions": "SpreadJS在线表格编辑器",
     "start_url": "./",
     "background_color": "#fff",
     "display": "minimal-ui",
     "scope": "./",
     "theme_color": "#fff",
     "icons": [
    {
      "src": "./welcome.png",
      "type": "image/png",
      "sizes": "200x200",
      "purpose": "any"
    }
     ]
   }

1.    <link rel="manifest" href="./manifest.json">

2. Implement Service Worker
   Create a new sw.js, and cache the spreadjs resources required by the designer through the Service Worker

   var cacheName = 'v14.2.2';
   var cacheFiles = [
       '/',
       './index.html',
       './lib/css/gc.spread.sheets.excel2013white.14.2.2.css',
     './lib/css/gc.spread.sheets.designer.14.2.2.css',
     './custom.css',
       './lib/scripts/gc.spread.sheets.all.14.2.2.js',
       './lib/scripts/plugins/gc.spread.sheets.charts.14.2.2.js',
       './lib/scripts/plugins/gc.spread.sheets.shapes.14.2.2.js',
       './lib/scripts/plugins/gc.spread.sheets.print.14.2.2.js',
       './lib/scripts/plugins/gc.spread.sheets.barcode.14.2.2.js',
       './lib/scripts/plugins/gc.spread.sheets.pdf.14.2.2.js',
       './lib/scripts/plugins/gc.spread.pivot.pivottables.14.2.2.js',
       './lib/scripts/interop/gc.spread.excelio.14.2.2.js',
       './lib/scripts/resources/zh/gc.spread.sheets.resources.zh.14.2.2.js',
       './lib/scripts/gc.spread.sheets.designer.resource.cn.14.2.2.js',
       './lib/scripts/gc.spread.sheets.designer.all.14.2.2.js',
   ];
   // 监听 install 事件，安装完成后，进行文件缓存
   self.addEventListener('install', function (e) {
       console.log('Service Worker 状态： install');
       var cacheOpenPromise = caches.open(cacheName).then(function (cache) {
     // 把要缓存的 cacheFiles 列表传入
     return cache.addAll(cacheFiles);
       });
       e.waitUntil(cacheOpenPromise);
   });
   // 监听 fetch 事件，安装完成后，进行文件缓存
   self.addEventListener('fetch', function (e) {
       console.log('Service Worker 状态： fetch');
       var cacheMatchPromise = caches.match(e.request).then(function (cache) {
         // 如果有cache则直接返回，否则通过fetch请求
         return cache || fetch(e.request);
     }).catch(function (err) {
         console.log(err);
         return fetch(e.request);
     })
       e.respondWith(cacheMatchPromise);
   });
   // 监听 activate 事件，清除缓存
   self.addEventListener('activate', function (e) {
       console.log('Service Worker 状态： activate');
       var cachePromise = caches.keys().then(function (keys) {
     return Promise.all(keys.map(function (key) {
         if (key !== cacheName) {
             return caches.delete(key);
         }
     }));
       })
       e.waitUntil(cachePromise);
       return self.clients.claim();
   });

   index.html page group book sw.js

   <script>
             if ('serviceWorker' in navigator) {
                     window.addEventListener('load', function () {
                             navigator.serviceWorker.register('./sw.js')
                             .then(function (registration) {
                                     // 注册成功
                                     console.log('ServiceWorker registration successful with scope: ', registration.scope);
                             })
                             .catch(function (err) {
                                     // 注册失败:
                                     console.log('ServiceWorker registration failed: ', err);
                             });
                     });
             }
     </script>

   Through the above two steps, the spreadjs online form editor page supports PWA. Note that PWA requires https support, and local testing via localhost is not affected.
   Access the page through localhost, you can see the installation option in the Chrome address bar
   

Once installed, it can be accessed by double-clicking the application button

For Chrome's PWA applications, you can also use the shortcut key to open the developer tools. You can see in the Network that the resources are obtained through the ServiceWorker cache.

The above are the steps to turn the SpreadJS online form editor into a desktop editor with the help of PWA technology. After you master and use the PWA architecture and related technologies, you can try to use it to build more highly available modern web applications , go and try it!