Progressive Web App(PWA) 升级

关于pwa的一些误解

1) 不是Application才需要PWA

一个PWA可能是一个blog,一个营销网站,或者别的什么。
PWA只是优化代码,快速交付的一种途径。你可以并且应当使用这些新特性,不必纠结网站内容。

2) 不是SPA才需要PWA

不是只有React-Redux的SPA才需要PWA, 即使是Jekyll的博客也可以从PWA中获益。

3) PWA并非只用于Google Android

PWA与平台无关

4) PWA现在就可以使用

"P"代表渐进,它的一切都可以看做是一个额外增强。如果旧浏览器不支持,也不会引发问题。

pwa的好处

  • 更快,更安全的用户体验
  • 更好的google ranking
  • 更好的可用性
  • 更好的表现
  • 离线可用

即使不希望用户”安装” 你的PWA(如添加到主屏幕),切换到PWA同样拥有很多好处。 事实上,制定PWA所需的所有步骤将会积极改善您的网站,并被广泛认为是最佳实践。

Step 1: Manifest

manifest 只是一个描述PWA的所有元数据的JSON文件。 像应用程序的名称,语言和图标这样的东西进去。 此信息将告诉浏览器将其保存为快捷方式时如何显示应用程序。 看起来像这样:

{
  "lang": "en",
  "dir": "ltr",
  "name": "This is my awesome PWA",
  "short_name": "myPWA",
  "icons": [
    {
      "src": "\/assets\/images\/touch\/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    }
  ],
  "theme_color": "#1a1a1a",
  "background_color": "#1a1a1a",
  "start_url": "/",
  "display": "standalone",
  "orientation": "natural"
}

这通常称为“manifest.json”,并链接到网站的<head>:

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

多个平台需要多种不同尺寸的 icon, Real Favicon Generator 可以上传一张大icon来生成多张不同尺寸的icon

Step 1: HTTPS

PWA 需要通过安全连接进行服务,因此HTTPS协议是必须的。 HTTPS加密用户发送到服务器的数据,并防止入侵者篡改其连接。 最近,谷歌也非常赞成HTTPS上的网站,并将其排名高于非安全竞争对手。

要切换到HTTPS,您将需要受信任的权限的SSL证书。 如何获取它们取决于您的托管情况,但通常有两种常用的方法:

👉如果您操作自己的服务器或对其拥有root权限,请查看LetsEncrypt。 这是一个免费,开放和直接的证书颁发机构,允许任何人开始使用HTTPS。 这很容易设置,并且与其他当局一样信任。

👉如果你在使用共享主机,很多供应商不允许你使用LetsEncrypt的控制级别。 相反,他们通常提供每月或年费的SSL证书。 如果您不确定如何获得证书,请联系您的托管服务提供商。

获得证书后,您可能需要对代码进行一些调整,以便所有资源都在安全的线路上获取。 有关该过程的更多信息,请阅读keyCDN的详细指南

Step 3: Service Worker.

这是奇迹发生的地方。 Service Worker 本质上就是一个Javascript,它作为浏览器和主机之间的中间人。 它自动安装在支持的浏览器中,可以拦截对您的站点的请求,并以不同的方式对其进行响应。

您可以通过在项目的根目录创建一个Javascript文件来设置新的SW。 让我们称之为sw.js. 该文件的内容取决于您想要实现的内容 - 我们将在一秒钟内完成。

要让浏览器知道我们打算使用这个文件作为Service Worker,我们需要先注册。 在您的网站的主要脚本中,包括一个这样的 function:

function registerServiceWorker() {
  // register sw script in supporting browsers
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js', { scope: '/' }).then(() => {
      console.log('Service Worker registered successfully.');
    }).catch(error => {
      console.log('Service Worker registration failed:', error);
    });
  }
}

scope 参数定义SW应该能够拦截的请求。 它是域根的相对路径。 例如,如果您将此设置为 /articles, 则可以控制到 yourdomain.com/articles/my-post 的请求, 但不能控制到 yourdomain.com/contact 的请求。

离线是新的黑域

Service Workers 可以做很多很酷的事情。 其中之一是能够缓存内容到本地存储,从而使用户在离线时可用。 即使在线,也将对页面加载时间产生巨大的影响, 因为请求可以完全绕过网络,内容即时可用。

除了使用传统的浏览器缓存,您可以在安装 worker 时定义要缓存的资源列表, 因此用户不必先浏览到页面以进行缓存。 以下是可能的样子:

// sw.js
self.addEventListener('install', e => {
 e.waitUntil(
   // after the service worker is installed,
   // open a new cache
   caches.open('my-pwa-cache').then(cache => {
     // add all URLs of resources we want to cache
     return cache.addAll([
       '/',
       '/index.html',
       '/about.html',
       '/images/doggo.jpg',
       '/styles/main.min.css',
       '/scripts/main.min.js',
     ]);
   })
 );
});

🔥热点提示:如果您想要快速开始离线,强烈建议使用sw-precache。 这是Google上的一个工具,它与现有的Gulp或Grunt构建过程集成, 生成 service worker 文件。

只需传递一个文件列表,它将自动跟踪所有更改, 并保持您的 Service Worker 缓存最新。 因为sw-precache集成到您的站点的构建过程中, 您可以使用通配符来预处理与特定模式匹配的所有资源,如下所示:

import gulp from 'gulp';
import path from 'path';
import swPrecache from 'sw-precache';

const rootDir = '/';

gulp.task('generate-service-worker', callback => {
  swPrecache.write(path.join(rootDir, 'sw.js'), {
    staticFileGlobs: [
      // track and cache all files that match this pattern
      rootDir + '/**/*.{js,html,css,png,jpg,gif}',
    ],
    stripPrefix: rootDir
  }, callback);
});

在你的构建中运行这个任务,你不必再担心缓存无效了! 对于较小的,主要是静态的站点,您可以使其预处理每个图像,HTML,JavaScript和CSS文件。 对于具有大量动态内容的网站,或者并不总是需要的许多大型图像, 预处理网站的“骨架”子集通常是最有意义的。

PS:要深入了解离线支持的主题, 请务必查看Jake Archibald的“The Offline Cookbook”

测试PWA

Chrome Lighthouse扩展是一种用于检查逐行Web应用程序的性能, 可访问性和遵守PWA规范的测试工具。

它以不同的视口和网络速度测试您的网站,测量首次渲染的时间和其他性能因素, 并为仍需改进的领域提供有价值的建议。 对于一般的网站来说是一个很好的基准。

进一步阅读

希望这能让您快速了解如何开始使用PWA。 如果你想深入了解,这里有一些很好的地方可以学习更多:

Written on July 26, 2017