渐进式Web应用(PWA)入门教程

程序员大咖 2018-06-13

点击上方“程序员大咖”,选择“置顶公众号”

关键时刻,第一时间送达!

最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。

但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。

移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换成渐进式Web应用。你可以按照这篇文章一步一步地做,做完之后你的网站将可以实现离线访问,并且可以在桌面上创建该网站的图标。那么下面即将开始入门教程。

什么是渐进式Web应用?

渐进式Web应用是一种全新的Web技术,让Web应用和原生APP的体验相近或一致。

渐进式Web应用它可以横跨Web技术及Native APP开发的解决方案,对于开发者的优势如下:

  1. 你只需要关心W3C的Web标准,不用关心各种Native APP的代码。

  2. 用户可以在安装应用之前先试用。

  3. 在渐进式Web应用中,你不需要使用各种应用商店来分发应用,也不用关心应用发布时奇怪的审核标准以及应用内购的平台抽成。另外,应用程序更新是自动进行的,无需用户交互,所以整体的使用体验对于用户来讲更为的平滑。

  4. 渐进式Web应用的“安装”过程很快,只需要在主屏幕上添加一个图标即可。

  5. 渐进式Web应用启动时可以显示一个好看的启动画面。

  6. 你可以在渐进式Web应用中提供具有全屏体验的应用。

  7. 通过系统通知等形式提高用户的粘性。

  8. 渐进式Web应用将会在本地缓存必要的文件,所以渐进式Web应用会比普通的Web应用的性能更好。

  9. 轻量级安装——你只需要缓存几百KB的数据即可。

  10. 所有的数据传输必须使用安全的HTTPS连接

  11. 渐进式Web应用可以离线缓存数据,并且会在重新连接互联网时重新同步数据。

渐进式Web应用发展的现状

渐进式Web应用才刚刚开始发展,但实际上在国内,有些网站已经实际开始PWA的实践了,例如:微博、豆瓣、淘宝等平台。可能这时候聪明的你可能就会产生疑问,那这个PWA不就是和微信小程序一样吗,对是这样,二者的目的是一致的,就是在移动端为用户提供足够轻量且与原生应用使用体验相近的“轻”应用。

但就目前来讲,PWA是Google主推的一项技术标准,FireFox,Chrome以及一些基于Blink的浏览器已经支持渐进式Web应用了,Edge上对渐进式Web应用的支持还在开发。Apple公司也表示会考虑在自己Safari支持PWA。然而这项功能已经进入了WebKit内核的五年计划中。长期来看,对浏览器兼容性的支持方面应该已经不算太大问题了。况且在现阶段,在不支持渐进式Web应用的浏览器中,你的应用也只是无法使用渐进式Web应用的离线功能而已,除此之外的功能均可以正常使用。

而在微信这边,凭借庞大的用户基数和体量能否与PWA分庭抗礼乃至笑到最后目前还不得而知。

示例代码

大多数教程都讲述的是如何在Chrome上从零开始制作一个类似原生界面的应用。然而在这篇教程中,我们并不打算做一个单页面应用程序,所以在这我们也不必了解诸如Material Design等知识。那么下面我们就直接看示例吧。

你可以从GitHub中获取本教程对应的示例代码。

本示例中提供了一个有四个网页的网站,一个CSS文件和一个JavaScript文件。这个网站可以在所有的现代浏览器上正常工作(IE10+)。如果你的浏览器支持渐进式Web应用,用户可以在离线状态下将会直接访问缓存中的页面。

要想运行此示例,请确保你已经安装了Node.js。并请打开命令行,使用以下命令来运行该示例:

node ./server.js [port]


以上命令中,[port]是可选部分,默认为8888。使用 Ctrl + C 即可停止Web服务器。

打开基于Blink内核的浏览器(Opera,Vivaldi,Chrome),然后在地址栏中输入http://localhost:8888/(注意端口号是否正确),即可访问该示例。你可以打开开发者工具(F12 或者 Cmd/Ctrl + Shift + I)来查看控制台信息。

查看首页,也可以在页面上点击一下,然后使用以下方法进入离线模式:

选中Network标签或者Application -> Service Workers 标签下的“离线”选项。重新访问之前访问过的网页,之前网页仍然会加载:

连接移动端安装

除了在PC浏览器访问外,你也可以在移动设备上访问该示例。使用USB线缆将你的移动设备连接到电脑上,然后从右上角三个点菜单中打开More tools – Remote devices标签

点击左侧的Settings菜单,然后添加一条端口映射(Port Forwarding)的规则,将8888映射为localhost:8888,现在你可以直接在手机打开Chrome然后访问http://localhost:8888 。

你可以使用浏览器的“添加到主屏幕”功能将当前网页添加到主屏幕,在你访问了几个页面之后,浏览器会将这个Web应用“安装”到你的设备上。浏览几个页面,关闭Chrome并将设备与电脑断开连接,点击桌面上生成的图标,你会看到一个Splash页面,并且你可以继续浏览之前浏览过的页面。

小结

通过本节对渐进式Web应用的介绍,相信大家对PWA是什么已经有了基本的认识。PWA有无需担心有无网络的特点,并具有独立入口与独立的保护机制。新标准的推出很可能会带着 Web 应用在移动设备上浴火重生。所以满足 PWA 模型的前端控件,如纯前端表格控件SpreadJS,将逐渐成为移动操作系统的一等公民,并将向Native APP发起挑战。

前面我们对渐进式Web应用(PWA)做了一些基本的介绍。


接下来,我们将带你一起去看看,PWA的原理是什么,以及它究竟是如何工作的。


第一步:使用HTTPS


渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前。


由于Chrome浏览器会默认将localhost以及127.x.x.x地址视为测试地址,所以在本示例中您并不需要开启HTTPS。另外,出于调试目的,您可以在启动Chrome浏览器的时候使用以下参数来关闭其对网站HTTPS的检查:


  • –user-data-dir

  • –unsafety-treat-insecure-origin-as-secure


第二步:创建一个应用程序清单(Manifest)


应用程序清单提供了和当前渐进式Web应用的相关信息,如:


  • 应用程序名

  • 描述

  • 所有图片(包括主屏幕图标,启动屏幕页面和用的图片或者网页上用的图片)


本质上讲,程序清单是页面上用到的图标和主题等资源的元数据。


程序清单是一个位于您应用根目录的JSON文件。该JSON文件返回时必须添加Content-Type: application/manifest+json 或者 Content-Type: application/jsonHTTP头信息。程序清单的文件名不限,在本文的示例代码中为manifest.json:


{

  "name"              : "PWA Website",

  "short_name"        : "PWA",

  "description"       : "An example PWA website",

  "start_url"         : "/",

  "display"           : "standalone",

  "orientation"       : "any",

  "background_color"  : "#ACE",

  "theme_color"       : "#ACE",

  "icons"[

    {

      "src"           : "/images/logo/logo072.png",

      "sizes"         : "72x72",

      "type"          : "image/png"

    },

    {

      "src"           : "/images/logo/logo152.png",

      "sizes"         : "152x152",

      "type"          : "image/png"

    },

    {

      "src"           : "/images/logo/logo192.png",

      "sizes"         : "192x192",

      "type"          : "image/png"

    },

    {

      "src"           : "/images/logo/logo256.png",

      "sizes"         : "256x256",

      "type"          : "image/png"

    },

    {

      "src"           : "/images/logo/logo512.png",

      "sizes"         : "512x512",

      "type"          : "image/png"

    }

  ]

}


程序清单文件建立完之后,你需要在每个页面上引用该文件:



以下属性在程序清单中经常使用,介绍说明如下:


  • name: 用户看到的应用名称

  • short_name: 应用短名称。当显示应用名称的地方不够时,将使用该名称。

  • description: 应用描述。

  • start_url: 应用起始路径,相对路径,默认为/。

  • scope: URL范围。比如:如果您将“/app/”设置为URL范围时,这个应用就会一直在这个目录中。

  • background_color: 欢迎页面的背景颜色和浏览器的背景颜色(可选)

  • theme_color: 应用的主题颜色,一般都会和背景颜色一样。这个设置决定了应用如何显示。

  • orientation: 优先旋转方向,可选的值有:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary

  • display: 显示方式——fullscreen(无Chrome),standalone(和原生应用一样),minimal-ui(最小的一套UI控件集)或者browser(最古老的使用浏览器标签显示)

  • icons: 一个包含所有图片的数组。该数组中每个元素包含了图片的URL,大小和类型。


第三步:创建一个 Service Worker


Service Worker 是一个可编程的服务器代理,它可以拦截或者响应网络请求。Service Worker 是位于应用程序根目录的一个个的JavaScript文件。


您需要在页面对应的JavaScript文件中注册该ServiceWorker:


if ('serviceWorker' in navigator) {

  // register service worker

  navigator.serviceWorker.register('/service-worker.js');

}


如果您不需要离线的相关功能,您可以只创建一个 /service-worker.js文件,这样用户就可以直接安装您的Web应用了!


Service Worker这个概念可能比较难懂,它其实是一个工作在其他线程中的标准的Worker,它不可以访问页面上的DOM元素,没有页面上的API,但是可以拦截所有页面上的网络请求,包括页面导航,请求资源,Ajax请求。


上面就是使用全站HTTPS的主要原因了。假设您没有在您的网站中使用HTTPS,一个第三方的脚本就可以从其他的域名注入他自己的ServiceWorker,然后篡改所有的请求——这无疑是非常危险的。


Service Worker 会响应三个事件:install,activate和fetch。


Install事件


该事件将在应用安装完成后触发。我们一般在这里使用Cache API缓存一些必要的文件。


首先,我们需要提供如下配置


  1. 缓存名称(CACHE)以及版本(version)。应用可以有多个缓存存储,但是在使用时只会使用其中一个缓存存储。每当缓存存储有变化时,新的版本号将会指定到缓存存储中。新的缓存存储将会作为当前的缓存存储,之前的缓存存储将会被作废。

  2. 一个离线的页面地址(offlineURL):当用户访问了之前没有访问过的地址时,该页面将会显示。

  3. 一个包含了所有必须文件的数组,包括保障页面正常功能的CSS和JavaScript。在本示例中,我还添加了主页和logo。当有不同的URL指向同一个资源时,你也可以将这些URL分别写到这个数组中。offlineURL将会加入到这个数组中。

  4. 我们也可以将一些非必要的缓存文件(installFilesDesirable)。这些文件在安装过程中将会被下载,但如果下载失败,不会触发安装失败。


// 配置文件

const

  version = '1.0.0',

  CACHE = version + '::PWAsite',

  offlineURL = '/offline/',

  installFilesEssential = [

    '/',

    '/manifest.json',

    '/css/styles.css',

    '/js/main.js',

    '/js/offlinepage.js',

    '/images/logo/logo152.png'

  ].concat(offlineURL),

  installFilesDesirable = [

    '/favicon.ico',

    '/images/logo/logo016.png',

    '/images/hero/power-pv.jpg',

    '/images/hero/power-lo.jpg',

    '/images/hero/power-hi.jpg'

  ];


installStaticFiles() 方法使用基于Promise的方式使用Cache API将文件存储到缓存中。


// 安装静态资源

function installStaticFiles() {

  return caches.open(CACHE)

    .then(cache => {

      // 缓存可选文件

      cache.addAll(installFilesDesirable);

      // 缓存必须文件

      return cache.addAll(installFilesEssential);

    });

}


最后,我们添加一个install的事件监听器。waitUntil方法保证了service worker不会安装直到其相关的代码被执行。这里它会执行installStaticFiles()方法,然后self.skipWaiting()方法来激活service worker:


// 应用安装

self.addEventListener('install', event => {

  console.log('service worker: install');

  // 缓存主要文件

  event.waitUntil(

    installStaticFiles()

    .then(() => self.skipWaiting())

  );

});


Activate 事件


这个事件会在service worker被激活时发生。你可能不需要这个事件,但是在示例代码中,我们在该事件发生时将老的缓存全部清理掉了:


// clear old caches

function clearOldCaches() {

  return caches.keys()

    .then(keylist => {

      return Promise.all(

        keylist

          .filter(key => key !== CACHE)

          .map(key => caches.delete(key))

      );

    });

}

// application activated

self.addEventListener('activate', event => {

  console.log('service worker: activate');

    // delete old caches

  event.waitUntil(

    clearOldCaches()

    .then(() => self.clients.claim())

    );

});


注意self.clients.claim()执行时将会把当前service worker作为被激活的worker。


Fetch 事件 该事件将会在网络开始请求时发起。该事件处理函数中,我们可以使用respondWith()方法来劫持HTTP的GET请求然后返回:


  1. 从缓存中取到的资源文件

  2. 如果第一步失败,资源文件将会从网络中使用Fetch API来获取(和service worker中的fetch事件无关)。获取到的资源将会加入到缓存中。

  3. 如果第一步和第二步均失败,将会从缓存中返回正确的资源文件。


// application fetch network data

self.addEventListener('fetch', event => {

  // abandon non-GET requests

  if (event.request.method !== 'GET') return;

  let url = event.request.url;

  event.respondWith(

    caches.open(CACHE)

      .then(cache => {

        return cache.match(event.request)

          .then(response => {

            if (response) {

              // return cached file

              console.log('cache fetch: ' + url);

              return response;

            }

            // make network request

            return fetch(event.request)

              .then(newreq => {

                console.log('network fetch: ' + url);

                if (newreq.ok) cache.put(event.request, newreq.clone());

                return newreq;

              })

              // app is offline

              .catch(() => offlineAsset(url));

          });

      })

  );

});


offlineAsset(url)方法中使用了一些helper方法来返回正确的数据:


// 是否为图片地址?

let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);

function isImage(url) {

  

  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);

  

}

  

  

// return 返回离线资源

function offlineAsset(url) {

  

  if (isImage(url)) {

  

    // 返回图片

    return new Response(

      'offlineoffline',

      { essay-headers{

        'Content-Type''image/svg+xml',

        'Cache-Control''no-store'

      }}

    );

  

  }

  else {

  

    // return page

    return caches.match(offlineURL);

  

  }

  

}


offlineAsset()方法检查请求是否为一个图片,然后返回一个带有“offline”文字的SVG文件。其他请求将会返回 offlineURL 页面。


Chrome开发者工具中的ServiceWorker部分提供了关于当前页面worker的信息。其中会显示worker中发生的错误,还可以强制刷新,也可以让浏览器进入离线模式。


Cache Storage 部分例举了当前所有已经缓存的资源。你可以在缓存需要更新的时候点击refresh按钮。


第四步:创建可用的离线页面


离线页面可以是静态的HTML,一般用于提醒用户当前请求的页面暂时无法使用。然而,我们可以提供一些可以阅读的页面链接。


Cache API可以在main.js中使用。然而,该API使用Promise,在不支持Promise的浏览器中会失败,所有的JavaScript执行会因此受到影响。为了避免这种情况,在访问/js/offlinepage.js的时候我们添加了一段代码来检查当前是否在离线环境中:


/js/offlinepage.js 中以版本号为名称保存了最近的缓存,获取所有URL,删除不是页面的URL,将这些URL排序然后将所有缓存的URL展示在页面上:


// cache name

const

  CACHE = '::PWAsite',

  offlineURL = '/offline/',

  list = document.getElementById('cachedpagelist');

// fetch all caches

window.caches.keys()

  .then(cacheList => {

    // find caches by and order by most recent

    cacheList = cacheList

      .filter(cName => cName.includes(CACHE))

      .sort((a, b) => a - b);

    // open first cache

    caches.open(cacheList[0])

      .then(cache => {

        // fetch cached pages

        cache.keys()

          .then(reqList => {

            let frag = document.createDocumentFragment();

            reqList

              .map(req => req.url)

              .filter(req => (req.endsWith('/') || req.endsWith('.html')) && !req.endsWith(offlineURL))

              .sort()

              .forEach(req => {

                let

                  li = document.createElement('li'),

                  a = li.appendChild(document.createElement('a'));

                  a.setAttribute('href', req);

                  a.textContent = a.pathname;

                  frag.appendChild(li);

              });

            if (list) list.appendChild(frag);

          });

      })

  });


开发者工具


Chrome浏览器提供了一系列的工具来帮助您来调试Service Worker,日志也会直接显示在控制台上。


您最好使用匿名模式来进行开发工作,这样可以排除缓存对开发的干扰。


最后,Chrome的Lighthouse扩展也可以为您的渐进式Web应用提供一些改进信息。


渐进式Web应用的要点


渐进式Web应用是一种新的技术,所以使用的时候一定要小心。也就是说,渐进式Web应用可以让您的网站在几个小时内得到改善,并且在不支持渐进式Web应用的浏览器上也不会影响网站的显示。


但是我们需要考虑以下几点:


URL隐藏


当您的应用就是一个单URL的应用程序时(比如游戏),我建议您隐藏地址栏。除此之外的情况我并不建议您隐藏地址栏。在Manifest中,display: minimal-ui 或者 display: browser对于大多数情况来说足够用了。


缓存过大


你不能将您网站中的所有内容缓存下来。对于小一些的网站来说缓存所有内容并不是一个问题,但是如果一个网站包含了上千个页面呢?很明显不是所有人对网站中的所有内容都感兴趣。存储是有限制的,如果您将所有访问过的页面都缓存下来的话,缓存大小会增长额很快。


你可以这样制定你的缓存策略:


  • 只缓存重要的页面,比如主页,联系人页面和最近浏览文章的页面。

  • 不要缓存任何图片,视频和大文件

  • 定时清理旧的缓存

  • 提供一个“离线阅读”按钮,这样用户就可以选择需要缓存哪些内容了。


缓存刷新


示例代码中在发起请求之前会先查询缓存。当用户处于离线状态时,这很好,但是如果用户处于在线状态,那他只会浏览到比较老旧的页面。


各种资源比如图片和视频不会改变,所以一般都把这些静态资源设置为长期缓存。这些资源可以直接缓存一年(31,536,000秒)。在HTTP Header中,就是:


Cache-Control: max-age=31536000


页面,CSS和脚本文件可能变化的更频繁一些,所以你可以设置一个比较小的缓存超时时间(24小时),并确保在用户网络连接恢复时再次从服务器请求:


Cache-Control: must-revalidate, max-age=86400


你也可以在每次网站发布时,通过改名的方式强制浏览器重新请求资源。


小结


至此,相信你如果按照本文一步一步操作下来,你也可以很快把自己的Web应用转为PWA。在转为了PWA后,如果有使用满足 PWA 模型的前端控件的需求,你可以试试纯前端表格控件SpreadJS,适用于 .NET、Java 和移动端等平台的表格控件一定不会令你失望的。

  • 来源 / 葡萄城控件

  • www.cnblogs.com/powertoolsteam/p/ProgressiveWebApps_1.html

  • www.cnblogs.com/powertoolsteam/p/ProgressiveWebApps_2.html

  • 程序员大咖整理发布,转载请联系作者获得授权

【点击查看源码共读】

    本站仅按申请收录文章,版权归原作者所有
    如若侵权,请联系本站删除
    觉得不错,分享给更多人看到