将任何网站转换为应用程序 – 渐进式 Web 应用程序

我认为 PWA 是商业应用的未来——这类应用处理某些类型的记录，无需连接到某些特殊硬件或尚未公开和标准化的 JavaScript API（例如联系人、电池电量等）。如果你的应用是 Web 应用，你就不得不考虑客户端可以修改代码，所以你尽可能多地在服务器上进行验证。此外，你对发布的内容、发布时间、更新和更改拥有完全的控制权，API 之外没有任何政策和限制（例如在应用商店中）。

Web 应用的首要要求是通过 HTTPS 提供服务。您必须拥有来自有效安全机构的 SSL 证书。Google 对 HTTPS 网站评分较高，访问普通网站时，Chrome 地址栏会将其标记为不安全。希望安装证书后，只有用户和服务器能够读取他们的内容。为什么是希望——我在另一篇文章中写过——https: //tomavelev.com/blog/Internet%20security%20Illusions
。如果您没有证书，使用简单的嗅探工具，即使是本地网络中的新手也能窃取您的通信。使用 SSL，您至少可以感受到安全，至少可以抵御小型、不太专业、非政府规模的威胁。
如果您的网站比较老旧，您可以包含以下脚本，以便用户重定向到 https：

if(location.protocol != 'https:')
 {
  location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
 }

清单——清单是应用程序的描述，包括应用程序的位置、一些图标、颜色和其他配置内容：

{
  "background_color": "#1b5e20",
  "theme_color": "#1b5e20",
  "description": "Toma Velev's Blog - programming, health, technology, psychology, marketing, philosophy",
  "display": "standalone",
  "icons": [
    {
      "src": "https://tomavelev.com/blog/resources/192.jpg",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "https://tomavelev.com/blog/resources/512.jpg",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "name": "Toma Velev",
  "short_name": "Toma Velev",
  "scope": "/blog/",
  "start_url": "https://tomavelev.com/blog/?source=pwa"
}

HTML 中还需要一些有关图标、颜色的其他元标记：

<link rel="apple-touch-icon" href="https://tomavelev.com/blog/resources/192.jpg">
<link rel="manifest" href="fest.json">

Service Worker – PWA 的另一个要求是网站必须注册 Service Worker，这主要是因为 Service Worker 能够处理请求，并在浏览器清除临时存储、会话过期后访问索引数据库和缓存。这使得开发者即使在设备离线并重启浏览器的情况下也能加载页面。理想情况下，页面应该与联网时相同，但会保留一些消息或功能以离线方式运行。这取决于具体方法。有两种方法：面向服务器和面向客户端。

如果您想用最少的代码将旧网站移植到 PWA，通用页面是最佳选择。它是面向服务器的。在这种方式下，客户端只是一个显示界面。所有状态始终且仅存储在服务器上，即使页面与 AJAX 交互也是如此。它可能只是替换了 HTML 部分。

Service Worker 提供了可能性，所有资源（css、js、图像）都可以从客户端的文件存储中加载，无需进行网络调用，并且看起来网站速度超快。

version = 1;
self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('Cache').then(function(cache) {
     return cache.addAll([
        'https://tomavelev.com/blog/resources/192.jpg',

//some more resources to be cached  

        'https://tomavelev.com/blog/resources/js/all.js?' + version,
       'https://tomavelev.com/blog/resources/css/all.css?' + version,
       'myIndex.html?'+version,
     ]);
   })
 );
});
self.addEventListener('fetch', function(event) {
  var request = event.request;
  if (request.mode === 'navigate') {
    event.respondWith(
      fetch(request)
        .catch(function() {
          return caches.match('myIndex.html?'+version);
        })
    );
  }
 });

客户端方法近年来越来越流行，前端承担了很多责任——响应式设计、将数据模型转换为 UI、缓存域数据等等。原生应用和 JS 前端（例如 Angular、Vue.js、React、Flutter 等）都采用这种方式。当然，并非所有方法都是完美的——缓存域信息可能会导致数据不一致，前端每年都变得越来越复杂等等。但就数据而言，网站可以编写代码以减少带宽占用，可以在客户端执行某些操作，从而节省更多时间、字节和服务器工作量，等等。

如果您的网站即将准备就绪或已准备就绪，请将其添加到主屏幕 - PWA - 当您使用现代浏览器打开它时，应该会显示添加到主屏幕。无需执行任何其他操作（就代码而言）。

不好的是，它主要出现在新用户面前，他们可能对你一无所知，也可能对你一无所知。作为一个陌生人，弹出这个弹窗很烦人——至少我遇到过这种情况，就是因为某个陌生网站要求我将他添加到主屏幕。如果你不在乎，就直接保持原样吧。

但如果你关心的话，这里有一些代码可以解决这个问题：

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
window.addEventListener('appinstalled', function (e) {
      console.log('a2hs installed');
    });
window.addEventListener('beforeinstallprompt', function (e) {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      deferredPrompt = e;
      // Update UI to notify the user they can add to home screen
      addBtn.style.display = 'block';

      addBtn.addEventListener('click', (e) => {
        // hide our user interface that shows our A2HS button
        addBtn.style.display = 'none';
        // Show the prompt
        deferredPrompt.prompt();
        // Wait for the user to respond to the prompt
        deferredPrompt.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
              console.log('User accepted the A2HS prompt');
            } else {
              console.log('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
          });
      });
    });

这样就不会出现弹窗，而是在更合适的时间和地点，您可以要求用户将您的网站添加为主页图标/快捷方式。PS
：将本博客转换为 PWA 的代码位于主页 - https://tomavelev.com/blog/