建立移动开发环境是很让人头疼的事情。移动开发者在开始开发应用之前必须做出很多决策。其中一些关键决策包括：我该使用哪种语言？我的应用要发布在哪些平台上？我需要支持哪些设备？我应该使用哪些框架？移动开发可能会比Web开发复杂得多，而对于后者来说，只要在服务器上放一个HTML文件就做出一个网站了。

渐进式Web应用是一项新技术，它使我们能够使用标准Web技术（如JavaScript、HTML和CSS）来构建体验接近原生的应用程序。PWA运行在浏览器中，可访问关键的原生功能，如：

在移动设备主屏幕上安装应用程序。
脱机访问应用程序。
推送通知。

Maximiliano Firtman关于PWA的演讲，JSConf EU 2019。

使用Web技术构建移动应用不是什么新理念

渐进式Web应用允许你在没有隐式用户权限的情况下更新应用程序（非常酷的功能）。就像在Web世界中一样，你可以编写新功能，将代码推送到服务器，然后用户就可以访问它了。

原生应用和更新就会有这种麻烦。

浏览器支持

大多数现代浏览器都支持Service Worker，它们是所有渐进式Web应用的核心。出于安全考虑，它们只通过HTTPS运行。

要在本地构建PWA，你需要一个Web服务器来提供文件或包，例如https://localhost:3000。我则是在Visual Studio Code上使用Live Server来做演示。

我可以使用 Service Worker吗？

入门

所有PWA都需要一个manifest.json文件。Web应用程序清单是一个简单的JSON文件，它告诉浏览器你的Web应用的内容，以及将其安装在用户的移动设备或桌面上时应该如何操作。

{
  "name": "My PWA!",  
  "short_name": "PWA", 
  "start_url": ".",
  "display": "standalone"
}

// name -- PWA name
// short_name -- Show underneath the mobile app icon
// start_url -- If the user taps on the icon, this url is launched
// display -- Customize what browser UI is shown when your app is launched.

将此清单放在项目的public或build文件夹中。

让浏览器了解你的清单内容

创建清单后，将link标记添加到Web应用中的所有页面：

<link rel="manifest" href="/manifest.json">

使用Web服务器启动项目并打开应用选项卡。

检查manifest.json文件

你应该能看到所有manifest.json属性出现在Application - > Manifest选项卡上。

创建Service Worker

Service Worker很有趣，它们在一个单独的线程上运行。这意味着Service Worker无权访问DOM。

可如果Service Worker无法访问DOM，那又有什么意义呢？原因很简单——Service Worker在后台运行。想象一下，用户要上传一个长30分钟的大视频，结果视频上传时浏览器什么都做不了——这会是很好的用户体验吗？

当然不是。所以我们要为图像视频处理、实时监听数据请求、推送消息等任务提供后台服务。

Net Ninja的“PWA入门”课程中的图表

要为你的站点安装Service Worker，首先需要注册它


// check if the serviceWorker object exists in the navigator object
if ('serviceWorker' in navigator) {

  // attach event listener  on page l aod
  window.addEventListener('load', function() {

    // register serviceWorker withthe [service-worker.js] file
    navigator.serviceWorker.register('/service-worker.js').then(registration => {

      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);

    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });

  });
}

我们要检查navigator对象上是否存在Service Worker对象。如果存在，则在页面加载时注册我们的service-worker.js文件。

运行应用，打开“Application” - >“Service Worker”选项卡，你应该能看到Service Worker正在运行。

要确认它是当前的Service Worker，而不是缓存的内容，请单击Source。

看来没错。

Service Worker的生命周期

强烈推荐阅读这篇文章。

Service Worker基于promise语法，这意味着它们默认是异步的。不熟悉Promise的话请看这里。

简而言之，Service Worker的生命周期中提供了离线支持，允许新Service Worker在不中断当前注册的服务的前提下注册，并确保你的站点每时每刻只有一个版本。

离线支持

选中“offline”框

你可以在浏览器缓存对象中缓存所有资产和文件，并且在安装Service Worker之前从缓存加载资产，从而实现离线支持。

// install event for the service worker
self.addEventListener('install', e => {

  e.waitUntil(
    caches.open('site-static').then(cache => {
      cache.addAll(['/', '/index.html'])
    })
  )
  
})

注意这里的self关键字。请记住，我们无权访问DOM的window对象，因此我们使用self键来引用当前安装的Service Worker。

我们将缓存内容的名称与资产路径列表一起传递。

取消注册并注册新的Service Worker。现在应该能安全地缓存内容了。

好棒！这就是离线支持！

如果屏幕显示空白内容请不要怕，因为我们没有向HTML添加任何内容。

检查浏览器缓存

注意这里，我们在数组中列出的所有资源都显示在了缓存中。太酷了！

获取缓存资产

self.addEventListener('fetch', e => {
  console.log(caches)
  e.respondWith(
    caches.match(e.request).then(res => {
      return res
    })
  )
})

fetch事件对非GET请求使用浏览器默认值。对于GET请求，它尝试返回缓存中的匹配数据，或者回退到网络上。

如果我们刷新浏览器应该能看到缓存的结果，而不是脱机警告消息。

接下来了解什么？

下一篇文章将介绍Web上的通知推送。

强烈建议阅读关于渐进式网络应用的Mozilla和Google文档，里面都是干货。

如果你想看源代码，这里是链接。

原文链接：
https://medium.com/better-programming/everything-you-need-to-know-about-pwas-8e41a7e745aa

创作场景

关于渐进式 Web 应用，你需要了解的所有事