PWA 技术中的 Web API 与 Service Worker

PWA 技术中的 Web API 与 Service Worker

随着移动设备的普及和移动互联网的发展，Web 应用的使用率也越来越高。但是，与原生应用相比，Web 应用的性能、体验和可用性存在较大差距。PWA（Progressive Web App）技术的出现，旨在弥补 Web 应用与原生应用之间的这些差距。在 PWA 技术中，Web API 和 Service Worker 扮演着至关重要的角色。

Web API

Web API 是 Web 应用程序编程接口，提供了用于连接 Web 应用程序和操作系统或浏览器的接口。Web API 可以实现 Web 应用与系统之间的交互。在 PWA 技术中，Web API 可以提升 Web 应用的体验、性能和可用性。

Web Push API

Web Push API 是一个新的 Web API，它允许 Web 应用程序向用户提供实时通知。在普通 Web 应用中，当用户关闭浏览器窗口或退出页面时，应用程序将无法向用户提供通知，但是 Web Push API 可以在应用程序不活动的情况下将通知推送到用户设备上。

// www.javascriptcn.com code example
// 请求权限
function requestNotificationPermission() {
  Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
      console.log('Notification permission granted.');
      subscribeUserToPush();
    }
  });
}

// 订阅推送服务
function subscribeUserToPush() {
  return navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
    const subscribeOptions = {
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
    };

    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) {
    console.log('Received PushSubscription: ', JSON.stringify(pushSubscription));
    sendPushSubscriptionToServer(pushSubscription);
    return pushSubscription;
  });
}

// 发送请求
function sendPushSubscriptionToServer(subscription) {
  const rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
  const key = rawKey ?
      btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) :
      '';
  const rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
  const authSecret = rawAuthSecret ?
      btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) :
      '';

  fetch('/api/register', {
    method: 'post',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify({
      endpoint: subscription.endpoint,
      key: key,
      authSecret: authSecret,
    }),
  });
}

Web Share API

Web Share API 是一个新的 Web API，它允许 Web 应用程序共享内容到设备上的其他应用程序。 Web Share API 允许用户在不离开应用程序的情况下与其他应用程序交互。

// www.javascriptcn.com code example
const shareButton = document.querySelector('.share');
shareButton.addEventListener('click', function(event) {
  navigator.share({
    title: 'Share Title',
    text: 'Share Text',
    url: 'https://example.com',
  })
  .then(function() {
    console.log('Successful share');
  })
  .catch(function(error) {
    console.log('Error sharing:', error);
  });
});

Web App Manifest API

Web App Manifest API 允许 Web 应用程序被添加到设备的主屏幕上，并像原生应用一样运行。Web App Manifest API 可以为 Web 应用程序提供图标、名称和主页等基本信息，用户可以像打开原生应用一样打开 Web 应用程序。

// www.javascriptcn.com code example
{
  "name": "Example",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "icon.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#FFFFFF"
}

Service Worker

Service Worker 是一个在后台运行的 JavaScript 线程，它可以拦截和处理来自 Web 应用程序的网络请求，并可用于实现离线缓存和推送通知等功能。Service Worker 可以使 Web 应用程序可以像原生应用程序一样运行，并提供更好的性能和体验。

注册 Service Worker

首先，在 Web 应用程序中注册 Service Worker。

// www.javascriptcn.com code example
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

拦截网络请求

Service Worker 可以拦截传入的网络请求，并选择从网络或缓存中提供响应。

// www.javascriptcn.com code example
self.addEventListener('fetch', function(event) {
  console.log('Fetch event: ', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

实现离线缓存

Service Worker 可以将资源缓存在本地，以实现离线缓存和更快的加载速度。

// www.javascriptcn.com code example
const CACHE_NAME = 'my-site-cache-v1';
const 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);
      })
  );
});

self.addEventListener('fetch', function(event) {
  console.log('Fetch event: ', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

推送通知

Service Worker 可以接收并处理推送通知，将通知发送到用户设备。

// www.javascriptcn.com code example
self.addEventListener('push', function(event) {
  console.log('Push Received.');

  const title = 'Push Title';
  const options = {
    body: 'Push Body',
    icon: '/images/icon.png',
    badge: '/images/badge.png'
  };

  event.waitUntil(self.registration.showNotification(title, options));
});

self.addEventListener('notificationclick', function(event) {
  console.log('Notification clicked.');

  event.notification.close();

  event.waitUntil(
    clients.openWindow('https://example.com')
  );
});

PWA 技术中的 Web API 和 Service Worker 可以大大提高 Web 应用的体验、性能和可用性。Web API 提供了一些新的功能，如推送通知、数据共享和设备信息等。Service Worker 可以实现离线缓存、推送通知和网络请求等功能。对于前端开发人员来说，熟练掌握这些技术可以使其更好地开发 PWA 应用程序。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6c944a941bf7134ca964c