关于typescript:在项目中使用Service-Worker-与-PWA

小册

这是我整顿的学习材料，十分零碎和欠缺，欢送一起学习

• 古代 JavaScript 高级小册
• 深入浅出 Dart
• 古代 TypeScript 高级小册
• linwu 的算法笔记📒

引言

最近 next 我的项目有应用 pwa 技术，应用起来也不简单，目前浏览器的兼容性也比拟良好

Service Worker 是浏览器中独立于网页运行的脚本，而 PWA（渐进式 Web 应用程序）是一种 Web 应用程序，其外观和感觉相似于原生应用程序。在探讨 Service Worker 与 PWA 之前，让咱们先简要理解一下 Web Worker。

Web Worker

1. 什么是 Web Worker？

Web Worker 是浏览器内置的线程，用于执行非阻塞事件循环的 JavaScript 代码。因为 JavaScript 是单线程语言，一次只能解决一个工作。简单工作的呈现可能导致主线程被阻塞，重大影响用户体验。Web Worker 的作用是容许主线程创立 worker 线程，使它们能够同时运行。Worker 线程次要负责解决简单的计算工作，而后将后果返回给主线程。简而言之，worker 线程执行简单计算，同时放弃页面（主线程）的流畅性，不会造成阻塞。

2. 类型

Web Worker 有三种次要类型：

1. Dedicated Workers【专用 Worker】由主线程实例化，只能与主线程通信。
2. Shared Workers【共享 Worker】能够被同源的所有线程拜访。
3. Service Workers【服务 Worker】可能管制其关联的网页，拦挡和批改导航、资源申请，并缓存资源，使您可能在某些状况下灵便控制应用程序的行为。

3. 限度

1. 同源限度

调配给 Worker 线程运行的脚本文件必须与主线程的脚本文件同源，通常都应该放在同一我的项目下。

2. DOM 限度

Web Workers 无法访问某些要害的 JavaScript 个性，包含：

1 DOM（因为这可能导致线程不平安）

2 window 对象

3 document 对象

4 parent 对象

3. 文件限度

出于平安思考，worker 线程无奈读取本地文件。它们加载的脚本必须来自网络，并且必须与主线程的脚本同源。

什是 Service Worker？

Service Worker（服务工作线程）是一种在浏览器背地运行的脚本，用于提供弱小的离线和缓存性能，以改善 Web 应用程序的性能和可靠性。它是渐进式网络应用程序（Progressive Web App，PWA）的要害组成部分，能够让 Web 应用程序更像本地应用程序，即便在离线状态下也能失常工作。Service Worker 是 Web 开发中的一个弱小工具，它使开发人员可能更好地管制和治理 Web 页面的资源缓存、网络申请和响应，从而提供更疾速、更稳固的用户体验。

Service Worker 的性能和长处

Service Worker 提供了许多重要性能和长处，其中包含：

1. 离线反对

Service Worker 能够缓存 Web 应用程序的资源，使其在断网或低网络品质环境下仍可能加载和运行。这意味着用户能够随时拜访应用程序，无需依赖网络连接。

2. 更快的加载速度

通过将资源缓存在本地，Service Worker 能够显著进步 Web 页面的加载速度。它能够从缓存中获取资源，而无需每次都从服务器从新下载。

3. 反对后盾同步

Service Worker 容许在后盾执行工作，例如数据同步或推送告诉。这使得应用程序能够在不烦扰用户的状况下执行一些重要的操作。

4. 加强的安全性

Service Worker 受同源策略的限度，因而它能够提供更平安的资源缓存和申请解决。它还能够用于拦挡和解决歹意申请。

5. 反对推送告诉

Service Worker 具备推送告诉性能，能够通过浏览器向用户发送实时告诉，进步用户参与度和留存率。

应用

// 注册 Service Worker
if ('serviceWorker' in navigator) {navigator.serviceWorker.register('/sw.js')
    .then(function(registration) {console.log('Service Worker 注册胜利：', registration);
    })
    .catch(function(error) {console.log('Service Worker 注册失败：', error);
    });
}

// 在 Service Worker 中缓存资源
self.addEventListener('install', function(event) {
  event.waitUntil(caches.open('my-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js'
      ]);
    })
  );
});

// 拦挡网络申请并从缓存中返回资源
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {return response || fetch(event.request);
    })
  );
});

咱们首先尝试在浏览器中注册一个 Service Worker，并指定了要缓存的资源。而后，在 Service Worker 中，咱们通过监听 install 事件来缓存这些资源，并在 fetch 事件中拦挡网络申请，从缓存中返回资源。这样，即便在离线时，页面仍可能加载所需资源。

生命周期

Service Worker 的生命周期与 web 页面齐全拆散。它包含以下几个阶段:

• 下载
• 装置
• 激活

1. 下载

用户首次拜访 service worker 管制的网站或页面时，service worker 会立即被下载。浏览器会下载蕴含 Service Worker 的 .js 文件。

2. 装置

须要在网页进行注册来装置，装置前须要查看是否反对 serviceWorker，如果反对，每次页面加载时就调用 register()，浏览器将会判断是否已注册。register() 办法的一个重要细节是 Service Worker 文件的地位。在本例中，能够看到 Service Worker 文件位于域的根目录，这意味着 Service Worker 范畴将是这个域下的。换句话说，这个 Service Worker 将为这个域中的所有内容接管 fetch 事件。如果咱们在 /example/sw/sw.js 注册 Service Worker 文件，那么 Service Worker 只会看到以 /example/ 结尾的页面的 fetch 事件（例如 /example/page1/、/example/page2/）。

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

注册胜利后，install 事件会被触发，将会调用 caches.open() 和咱们想要的缓存名称, 之后调用 cache.addAll() 并传入文件数组。这是一个 promise 链（caches.open() 和 cache.addAll()）。event.waitUntil() 办法承受一个 promise，并应用它来晓得装置须要多长时间，以及它是否胜利。如果胜利缓存了所有文件，那么将装置 Service Worker。如果其中的一个文件下载失败，那么装置步骤将失败。如果缓存文件列表过长，将会增大失败的几率。

var CACHE_NAME = 'my-cache';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

self.addEventListener('install', function(event) {
  event.waitUntil(caches.open(CACHE_NAME)
      .then(function(cache) {console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

3. 激活

接下来就是进入激活状态：Activate。在这个状态能够更新 Service Worker。

1. 用户导航至站点时，浏览器会尝试在后盾从新下载定义 Service Worker 的脚本文件。如果 Service Worker 文件与其以后所用文件存在字节差别，则将其视为新 Service Worker。
2. 新 Service Worker 将会启动，且将会触发 install 事件。
3. 旧 Service Worker 仍管制着以后页面，因而新 Service Worker 将进入 waiting 状态。
4. 当网站上以后关上的页面敞开时，旧 Service Worker 将会被终止，新 Service Worker 将会获得控制权。
5. 新 Service Worker 获得控制权后，将会触发其 activate 事件。

self.addEventListener('activate', function(event) {var cacheAllowlist = ['pages-cache-v1', 'blog-posts-cache-v1'];
event.waitUntil(caches.keys().then(function(cacheNames) {
      return Promise.all(cacheNames.map(function(cacheName) {if (cacheAllowlist.indexOf(cacheName) === -1) {return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

缓存与申请响应优化

策略

• 缓存优先
• 网络优先
• 仅应用缓存
• 仅应用网络
• 速度优先

一旦装置了 Service Worker 并且用户导航到其余页面或刷新以后页面，Service Worker 将开始监听 fetch 事件。

缓存优先策略的工作流程：首先，它会监听浏览器的 fetch 事件，拦挡原始的申请。接着，它会查看缓存中是否存在行将申请的资源，如果存在，则间接返回缓存中的资源。而后，它会发动近程申请来获取最新资源，将资源缓存起来，并返回给页面。

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request)
      .then(function(response) {if (response) {return response;}
        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(function(response) {if(!response || response.status !== 200 || response.type !== 'basic') {return response;}

            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

什么是 PWA？

PWA 是一种应用古代 Web API 和传统的渐进性加强策略来创立跨平台 Web 应用程序的办法。它联合了 Web 应用程序的可发现性、易装置性和可链接性，以及原生利用的性能和交互体验。

长处

渐进性

PWA 实用于所有浏览器，因为它是以渐进性加强作为主旨开发的，用户无需放心浏览器兼容性问题。

连贯无关性

PWA 能够在离线或网络较差的状况下失常拜访，依赖于 Service Worker 技术，这使得用户体验更稳固。

类原生利用

因为是在 App Shell 模型根底上开发，PWA 具备与原生利用类似的用户交互体验，为用户提供了更高的满意度。

继续更新

PWA 始终保持最新状态，无需用户手动更新，这打消了版本治理的懊恼。

安全性

通过 HTTPS 协定提供服务，爱护用户数据不被窥探，并确保内容不被篡改。

可索引

PWA 的 manifest 文件和 Service Worker 能够被搜索引擎索引，进步利用的可见性。

黏性

通过推送离线告诉等性能，PWA 能够吸引用户回流，进步用户参与度。

可装置

用户能够将罕用的 Web App 增加到桌面，无需返回利用商店下载安装，进步了可用性。

可链接

通过简略的链接即可分享内容，无需下载和装置，便捷实用。

毛病

对系统性能的拜访权限较低

与原生利用相比，PWA 对设施的零碎性能拜访权限绝对较低，某些高级性能可能受到限制。

没有对立的审查规范

与利用商店不同，PWA 没有对立的审查规范，这可能导致一些品质参差不齐的利用进入市场。

核心技术

3. 核心技术

• Web App Manifest Web App Manifest（Web 利用程序清单）概括地说是一个以 JSON 模式集中书写页面相干信息和配置的文件。

{
  "name": "My PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

• start\_url 能够设置启动网址
• icons 会帮我萌设置各个分辨率下页面的图标
• background\_color 会设置背景色彩，Chrome 在网络应用启动后会立刻应用此色彩，这一色彩将保留在屏幕上，直至网络应用首次出现为止
• theme\_color 会设置主题色彩
• display 设置启动款式

• Service Worker
• Notifications API 告诉 API
• Push API 推送 API 推送 API 能够用来从服务端推送新的内容而无需客户端染指，它是由利用的 Service Worker 来实现的；告诉性能则能够通过 Service Worker 来向用户展现一些新信息，或者至多揭示用户利用曾经更新了某些性能。