我如何构建我的第一个渐进式 Web 应用程序 (PWA)

这篇文章最初发表在silvestar.codes上。

从今天起，我的网站就可以以 Progressive Web App 的形式使用了。太棒了！💯

在这篇文章中，您将了解更多有关我如何以及为何将这一令人兴奋的功能添加到我的网站的信息。

我为什么要这么做

我自认为是个非常严谨的人，从第一天起我就努力让我的网站变得更好。在搭建网站的时候，我并不了解 PageSpeed Insights 或 WebPageTest 等网页性能工具的所有指标。但是，在我努力改进网站的过程中，我不断学习新技术，我的网站也变得越来越好。

现在我的网站得分最高，但有一件事困扰了我一段时间。那就是渐进式 Web 应用 (PWA) 得分。

通过查看 PWA 报告，我意识到我的网站已经准备好使用 PWA 了。只剩下几个问题需要解决。我之前并不了解这些问题，但这从未阻碍过我。

我是如何做到的

作为起点，我决定遵循“您的第一个渐进式 Web 应用程序”教程。第一步是更新我的webmanifest.json文件。我添加了start_url选项display和一些必需的元标记，例如<meta name="apple-mobile-web-app-capable" content="yes">。

{
  "name": "SB site - Silvestar Bistrović website",
  "short_name": "SB site - Silvestar Bistrović website",
  "icons": [
    …
  ],
  "theme_color": "#12e09f",
  "background_color": "#fff",
  "start_url": "/offline.html",
  "display": "standalone"
}

接下来，我创建了sw.jsService Worker 的文件。为了注册 Service Worker，需要将一小段代码添加到你的主页中：

// CODELAB: Register service worker.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then((reg) => {
        console.log('Service worker registered.', reg);
      });
  });
}

Service Worker 文件的内容可能会有所不同，具体取决于您希望在网站上实现什么功能。由于我的网站非常简单，我决定只使用基本的离线体验。这意味着我需要一个offline.html用于离线体验的文件。它将是我主页的精简版。因此，我删除了外部图片，并使用 CSS 创建了一个占位符。我删除了外部 CSS 文件并将其内联到head部分中。剩下唯一要做的就是添加 favicon 文件。我不确定是否有必要这样做，但我决定把它放在那里，以防万一。反正那些文件也不大。

该sw.js文件可分为四个部分：

定义常量，
安装，
激活，以及
正在抓取。

首先，我定义了缓存名称和要缓存的文件。

// constants
const CACHE_NAME = 'sb-cache-v1.3'
const FILES_TO_CACHE = [
  '/offline.html',
  '/favicon/apple-touch-icon.png',
  '/favicon/favicon-32x32.png',
  '/favicon/favicon-16x16.png',
  '/favicon/site.webmanifest',
  '/favicon/safari-pinned-tab.svg',
  '/favicon/favicon.ico',
  '/favicon/mstile-144x144.png',
  '/favicon/browserconfig.xml'
]

接下来，我创建了install打开具有给定缓存名称的缓存并缓存文件的事件。

self.addEventListener('install', (event) => {
  // CODELAB: Precache static resources here.
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('[ServiceWorker] Pre-caching offline page')
      return cache.addAll(FILES_TO_CACHE)
    })
  )
})

之后，我创建了activate从磁盘清除缓存文件的事件。

self.addEventListener('activate', (event) => {
  // CODELAB: Remove previous cached data from disk.
  event.waitUntil(
    caches.keys().then(keyList => Promise.all(keyList.map((key) => {
      if (key !== CACHE_NAME) {
        console.log('[ServiceWorker] Removing old cache', key)
        return caches.delete(key)
      }
    })))
  )
})

最后，我创建了一个事件，该事件仅在请求为fetch时处理页面导航。如果请求无法从网络获取项目，则会尝试获取文件。.modenavigateoffline.html

self.addEventListener('fetch', (event) => {
  // CODELAB: Add fetch event handler here.
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => caches.open(CACHE_NAME)
          .then(cache => cache.match('offline.html')))
    )
  }
})

最终结果

部署完成后，我对网站进行了审核，现在它看起来如下所示：

我认为烟花值得再次出现。💯

后续步骤Next steps

接下来我会进一步学习Workbox。之后，我计划为我的副项目Code Line Daily添加完整的离线体验。

编辑：继续阅读我的第二篇文章“如何构建我的第二个渐进式 Web 应用程序 (PWA)”。

文章来源：https://dev.to/starbist/how-i-built-my-first-progressive-web-app-pwa-49g4