美高梅59599改造你的网站,变身 PWA

美高梅59599改造你的网站,变身 PWA

渐进式Web应用发展的现状

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

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

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

示例代码

示例代码可以在https://github.com/sitepoint-editors/pwa-retrofit找到。

代码提供了一个简单的四个页面的网站。其中包含一些图片,一个样式表和一个main
javascript
文件。这个网站可以运行在所有现代浏览器上(IE10+)。如果浏览器支持 PWA
技术,当离线时用户可以浏览他们之前看过的页面。

运行代码前,确保 Node.js 已经安装,然后再命令行里启动服务:

node ./server.js [port]

[port]是可配置的,默认为 8888。打开 Chrome
或者其他基于Blink内核的浏览器,比如 Opera 或者 Vivaldi,然后输入链接
http://localhost:8888/(或者你指定的某个端口)。你也可以打开开发者工具看一下各个console信息。

美高梅59599 1

浏览主页,或者其他页面,然后用以下任一方法使页面离线:

  1. 按下 Cmd/Ctrl + C ,停止 node 服务器,或者

  2. 在开发者工具的 Network 或者 Application – Service Workers
    栏里点击 offline 选项。

重新浏览任意之前浏览过的页面,它们仍然可以浏览到。浏览一个之前没有看过的页面,你会看到一个专门的离线页面,标识“you’re
offline”,还有一个你可以浏览的页面列表:

美高梅59599 2

什么是渐进式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应用可以离线缓存数据,并且会在重新连接互联网时重新同步数据。

第三步:创建一个 Service Worker

Service Worker
是拦截和响应你的网络请求的编程接口。这是一个位于你根目录的一个单独的
javascript 文件。

你的 js 文件(在示例代码中是 /js/main.js)可以检查是否支持 Service
Worker,并且注册:

if ('serviceWorker' in navigator) {

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

}

如果你不需要离线功能,可以简单的创建一个空的 /service-worker.js文件 ——
用户会被提示安装你的 app。

Service Worker
很复杂,你可以修改示例代码来达到自己的目的。这是一个标准的 web
worker,浏览器用一个单独的线程来下载和执行它。它没有调用 DOM 和其他页面
api
的能力,但他可以拦截网络请求,包括页面切换,静态资源下载,ajax请求所引起的网络请求。

这就是需要 HTTPS
的最主要的原因。想象一下第三方代码可以拦截来自其他网站的 service
worker, 将是一个灾难。

service worker 主要有三个事件: installactivatefetch

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

2018/05/23 · 基础技术 ·
PWA

原文出处: Craig
Buckler
   译文出处:葡萄城控件   

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

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

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

PWAs 是渐进增强的

你的app仍然可以运行在不支持 PWA
技术的浏览器里。用户不能离线访问,不过其他功能都像原来一样没有影响。综合利弊得失,没有理由不把你的
app 改进为 PWA。

小结

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

在下节中我们将带你一起去看看,PWA的原理是什么,以及它究竟是如何工作的,敬请期待。

1 赞 1 收藏
评论

美高梅59599 3

URL 隐藏

我们的示例代码隐藏了 URL 栏,我不推荐这种做法,除非你有一个单 url
应用,比如一个游戏。对于多数网站,manifest 选项 display: minimal-ui
或者 display: browser是最好的选择。

美高梅59599,示例代码

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

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

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

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

node ./server.js [port]

1
node ./server.js [port]

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

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

美高梅59599 4美高梅59599 5

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

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

美高梅59599 6美高梅59599 7

第二步:创建一个 Web App Manifest

manifest 文件提供了一些我们网站的信息,例如 name,description
和需要在主屏使用的图标的图片,启动屏的图片等。

manifest文件是一个 JSON
格式的文件,位于你项目的根目录。它必须用Content-Type: application/manifest+json
或者 Content-Type: application/json这样的 HTTP
头来请求。这个文件可以被命名为任何名字,在示例代码中他被命名为
/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"           : "logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

在页面的<head>中引入:

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

manifest 中主要属性有:

  • name —— 网页显示给用户的完整名称
  • short_name —— 当空间不足以显示全名时的网站缩写名称
  • description —— 关于网站的详细描述
  • start_url —— 网页的初始 相对 URL(比如 /
  • scope —— 导航范围。比如,/app/的scope就限制 app 在这个文件夹里。
  • background-color —— 启动屏和浏览器的背景颜色
  • theme_color ——
    网站的主题颜色,一般都与背景颜色相同,它可以影响网站的显示
  • orientation —— 首选的显示方向:any, natural, landscape,
    landscape-primary, landscape-secondary, portrait,
    portrait-primary, 和 portrait-secondary
  • display —— 首选的显示方式:fullscreen,
    standalone(看起来像是native
    app),minimal-ui(有简化的浏览器控制选项) 和 browser(常规的浏览器
    tab)
  • icons —— 定义了 src URL, sizestype的图片对象数组。

MDN提供了完整的manifest属性列表:Web App Manifest
properties

在开发者工具中的 Application tab 左边有 Manifest
选项,你可以验证你的 manifest JSON 文件,并提供了 “Add to homescreen”。

美高梅59599 8

连接移动端安装

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

美高梅59599 9美高梅59599 10

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

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

美高梅59599 11美高梅59599 12

Activate 事件

当 install完成后, service worker
进入active状态,这个事件立刻执行。你可能不需要实现这个事件监听,但是示例代码在这里删除老旧的无用缓存文件:

// 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()方法设置本身为active的service worker。

第一步:开启 HTTPS

由于一些显而易见的原因,PWAs 需要 HTTPS 连接。

HTTPS 在示例代码中并不是必须的,因为 Chrome 允许使用 localhost 或者任何
127.x.x.x 的地址来测试。你也可以在 HTTP 连接下测试你的 PWA,你需要使用
Chrome ,并且输入以下命令行参数:

  • --user-data-dir
  • --unsafety-treat-insecure-origin-as-secure

缓存刷新

在示例代码中,用户在请求网络前先检查该文件是否缓存。如果缓存,就使用缓存文件。这在离线情况下很棒,但也意味着在联网情况下,用户得到的可能不是最新数据。

静态文件,类似于图片和视频等,不会经常改变的资源,做长时间缓存没有很大的问题。你可以在HTTP
头里设置 Cache-Control 来缓存文件使其缓存时间为一年(31,536,000
seconds):

Cache-Control: max-age=31536000

页面,CSS和 script
文件会经常变化,所以你应该改设置一个很短的缓存时间比如 24
小时,并在联网时与服务端文件进行验证:

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

译自 Retrofit Your Website as a Progressive Web
App

缓存太多

你可以缓存你网站的所有页面和所有静态文件。这对于一个小网站是可行的,但这对于上千个页面的大型网站实际吗?没有人会对你网站的所有内容都感兴趣,而设备的内存容量将是一个限制。即使你像示例代码一样只缓存访问过的页面和文件,缓存大小也会增长的很快。

也许你需要注意:

  • 只缓存重要的页面,类似主页,和最近的文章。
  • 不要缓存图片,视频和其他大型文件
  • 经常删除旧的缓存文件
  • 提供一个缓存按钮给用户,让用户决定是否缓存

Fetch 事件

当有网络请求时这个事件被触发。它调用respondWith()方法来劫持 GET
请求并返回:

  1. 缓存中的一个静态资源。

  2. 如果 #1 失败了,就用 Fetch
    API
    (这与
    service worker 的fetch
    事件没关系)去网络请求这个资源。然后将这个资源加入缓存。

  3. 如果 #1 和 #2 都失败了,那就返回一个适当的值。

// 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)方法通过几个辅助函数返回一个适当的值:

// is image URL?
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 offline asset
function offlineAsset(url) {

  if (isImage(url)) {

    // return image
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      { headers: {
        'Content-Type': 'image/svg+xml',
        'Cache-Control': 'no-store'
      }}
    );

  }
  else {

    // return page
    return caches.match(offlineURL);

  }

}

offlineAsset()方法检查是否是一个图片请求,如果是,那么返回一个带有
“offline” 字样的 SVG。如果不是,返回 offlineURL 页面。

开发者工具提供了查看 Service Worker 相关信息的选项:

美高梅59599 13

在开发者工具的 Cache Storage
选项列出了所有当前域内的缓存和所包含的静态文件。当缓存更新的时候,你可以点击左下角的刷新按钮来更新缓存:

美高梅59599 14

不出意料, Clear storage 选项可以删除你的 service worker 和缓存:

美高梅59599 15

连接手机

你也可以通过 USB 连接你的安卓手机来预览示例网页。在开发者工具中打开
Remote devices 菜单。

美高梅59599 16

在左边选择 Settings ,点击 Add Rule 输入 8888
端口。你可以在你的手机上打开Chrome,打开
http://localhost:8888/

你可以点击浏览器菜单里的 “Add to Home
screen”。浏览几个页面,浏览器会提醒你去安装。这两种方式都可以创建一个新的图标在你的主屏上。浏览几个页面后关掉Chrome,断开设备连接。你依然可以打开
PWA Website app —
你会看到一个启动页,并且可以离线访问之前你访问过的页面。

将你的网站改进为一个 Progressive Web App 总共有三个必要步骤:

admin

网站地图xml地图