PWA 中文文档说明及使用教程-FunTeaLearn Online Web Tutorials

什么是 PWA

PWA (Progressive Web App) 是一种新型的 Web 应用程序，他们既可以像传统的网站那样通过浏览器访问，也可以像原生应用那样被添加到设备主屏幕上并运行，支持离线访问、消息通知等原生应用的能力。其目的是为了解决 Web 应用与原生应用之间的差距，提供Native App体验。

PWA 应用程序的优点是可以在移动设备和桌面设备上实现与原生应用类似的性能和功能。

PWA 实现原理

PWA 借助了 Service Worker 技术来实现一部分功能，它是一种在后台运行的脚本，可以拦截和处理网站的请求，以便实现离线缓存和基于网络状态的请求响应等功能。同时，PWA 还可以使用 App Manifest 技术，定义网站的主题色、图标等元素，并可以被添加到设备主屏幕上。

如何使用 PWA

PWA 涉及到的技术较为复杂，需要一定的前端技术储备，以下是 PWA 实现步骤：

1. 判断浏览器是否支持 PWA

通过下面的代码可以判断当前浏览器是否支持 PWA：

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('PWA is supported');
}

2. 注册 Service Worker

Service Worker 是一个独立的 JavaScript 线程，必须通过 JavaScript 注册到浏览器中。我们需要在 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);
    }).catch(function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

3. 编写 Service Worker 逻辑

Service Worker 监听 fetch 事件，可以进行网络请求拦截，使用缓存等操作。

// www.javascriptcn.com code example
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        return response;
      }
      return fetch(event.request);
    })
  );
});

4. 编写 Web App Manifest

Web App Manifest 是一个 JSON 文件，用于描述 Web 应用的基本信息，例如应用名称、图标、主题颜色和启动 URL 等。需要在 html 文件中声明。

// www.javascriptcn.com code example
{
  "name": "My Progressive Web App",
  "short_name": "MyPWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "theme_color": "#2196f3",
  "icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    }
  ]
}

PWA 应用示例

以下示例为简单的 PWA 应用：

1. index.html

// www.javascriptcn.com code example
<!doctype html>
<html>
  <head>
    <title>PWA Demo</title>
    <link rel="manifest" href="/manifest.json">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      header {
        padding: 20px;
        background-color: #2196f3;
        color: #fff;
      }
      .container {
        width: 100%;
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>PWA Demo</h1>
    </header>
    <div class="container">
      <h2>Welcome to PWA Demo</h2>
      <p>This is a simple PWA demo.</p>
      <p>Open Chrome DevTools and check Application > Manifest and Service Workers.</p>
    </div>

    <script>
      if ('serviceWorker' in navigator && 'PushManager' in window) {
        console.log('Service Worker and Push is supported');

        navigator.serviceWorker.register('sw.js')
        .then(function(swReg) {
          console.log('Service Worker is registered', swReg);

          swRegistration = swReg;

        })
        .catch(function(error) {
          console.error('Service Worker Error', error);
        });
      } else {
        console.warn('Push messaging is not supported');
      }
    </script>
  </body>
</html>

2. manifest.json

// www.javascriptcn.com code example
{
  "name": "PWA Demo",
  "short_name": "PWA",
  "icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "start_url": "/index.html",
  "display":"standalone"
}

3. sw.js

// www.javascriptcn.com code example
var cacheName = 'pwa-demo';
var filesToCache = [
  '/',
  '/index.html',
  '/manifest.json',
  '/images/icons/icon-192x192.png',
  '/images/icons/icon-512x512.png'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

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

结语

以上介绍了 PWA 的定义、实现原理和使用方式。虽然 PWA 还有很多深入的东西需要学习，但本文希望能够帮助大家初步了解 PWA 的概念和实现方式，有利于大家在 Web 应用开发中能够更好地使用 PWA 进行开发。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d7d475a941bf7134e02ab0

PWA 中文文档说明及使用教程