在 5 分钟内制作一个简单的 PWA(1)

📌 相关文章

📜 在 5 分钟内制作一个简单的 PWA(1)

📅 最后修改于: 2023-12-03 15:07:36.745000 🧑 作者: Mango

在 5 分钟内制作一个简单的 PWA

如果你对如何快速制作一个简单的 PWA 感兴趣，你来对地方了。在此，我们将为你提供一步步的指引，以帮助你完成这个过程。

步骤 1：创建一个基本的 HTML 文件

首先，你需要创建一个基本的 HTML 文件，以开始制作你的 PWA。在这个 HTML 文件中，你需要定义所需的基本 HTML 元素，例如 head 和 body。

<!DOCTYPE html>
<html>
  <head>
    <title>My PWA</title>
  </head>
  <body>
    <h1>Welcome to my PWA!</h1>
  </body>
</html>

确保你将这个文件保存为 .html 格式。

步骤 2：添加 manifest 文件

下一步，你需要添加一个 manifest 文件。这个文件可以通过描述你的应用程序的元数据和标识符来帮助浏览器识别你的 PWA。这个信息将与浏览器共享，并用于创建桌面快捷方式和应用程序图标。

在 HTML 文件中，你需要将 manifest 文件链接到头部：

<!DOCTYPE html>
<html>
  <head>
    <title>My PWA</title>
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <h1>Welcome to my PWA!</h1>
  </body>
</html>

现在，你需要创建一个 manifest.json 文件，并添加你的应用程序信息。

{
  "name": "My PWA",
  "short_name": "MyPWA",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#317EFB"
}

步骤 3：将网页转换为 PWA

现在，你可以使用 Service Worker 将网页转换为 PWA。

在 HTML 文件中，你需要注册 Service Worker。

<!DOCTYPE html>
<html>
  <head>
    <title>My PWA</title>
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <h1>Welcome to my PWA!</h1>

    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js');
      }
    </script>
  </body>
</html>

现在，你需要创建一个名为 service-worker.js 的 JavaScript 文件。该文件由 Service Worker API 引用，以启用 PWA 功能。

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-pwa-cache-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/manifest.json',
        '/favicon.ico',
        '/icons/icon-72x72.png',
        '/icons/icon-96x96.png',
        '/icons/icon-128x128.png',
        '/icons/icon-144x144.png',
        '/icons/icon-152x152.png',
        '/icons/icon-192x192.png',
        '/icons/icon-384x384.png',
        '/icons/icon-512x512.png'
      ]);
    })
  );
});

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

你在这里看到了两个事件：install 和 fetch。install 事件用于缓存所需文件，fetch 事件用于拦截请求，并从缓存中返回响应。注意，缓存的文件需要在 install 事件中列出，并与你的应用程序相关。

步骤 4：测试你的 PWA

现在，你的 PWA 就可以使用了！使用支持 PWA 的浏览器打开你的应用程序 URL。当你首次加载应用程序时，Service Worker 会将所有缓存文件下载到本地。然后，如果你断开 Internet 连接并重新加载应用程序，应用程序内容将保持不变。

现在，你可以点击桌面上的应用程序图标以访问你的 PWA。注意，在 Android 和 iOS 上，如果用户将应用程序添加到主屏幕，则可以以全屏模式在应用程序中打开它。

小结

在本文中，我们介绍了如何在短短的五分钟内制作一个简单的 PWA。通过遵循这些步骤，你可以轻松地为你的网站添加缓存、离线访问以及桌面快捷方式等功能。