PWA-将网站添加为APP并独立运行

时间：2020-11-11 作者：澄澄 分类： 网站建设

PWA简介

渐进式网络应用程序（英语：Progressive Web Apps，简称：PWA）是一种普通网页或网站架构起来的网络应用程序，但它可以以传统应用程序或原生移动应用程序形式展示给用户。这种应用程序形态视图将目前最为现代化的浏览器提供的功能与移动设备的体验优势相结合。

PWA是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，比如通知推送。在移动端利用标准化框架，让网页应用呈现和原生应用相似的体验。

PWA不包含原生OS相关代码。PWA仍然是网站，只是在缓存、通知、后台功能等方面表现更好。

将网站快速转换为PWA应用

应用程序清单（manifest.json）
网站的域必须是安全的（HTTPS）
一个在主屏上代表应用的图标
一个注册好的service worker，可以让应用离线工作（这仅对于安卓设备上的Chrome浏览器是必需的）

manifest.json

在网页的头部引入一个manifest.json文件

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

manifest.json的内容按照如下格式：

{
  "name": "MyWeb",
  "short_name": "MyWeb",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Web app.",
  "icons": [{
    "src": "images/favicon48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/favicon72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/favicon96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/favicon144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/favicon168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/favicon192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}

说明

`background_color`

为web应用程序预定义的背景颜色。此值在应用程序样式表中可以再次声明。它主要用于在样式表加载之前，当加载manifest，浏览器可以用来绘制web应用程序的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。

"background_color": "red"

注意：background_color只是在web应用程序加载时提高用户体验，而当web应用程序的样式表可用时，不能替代作为背景颜色使用。

`description`

提供有关Web应用程序的一般描述。

"description": "The app that helps you find the best food in town!"

`dir`

指定名称、短名称和描述成员的主文本方向。与lang一起配置，可以帮助正确显示右到左文本。

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

可选值:

ltr (由左到右)
rtl (由右到左)
auto (由浏览器自动判断)

注意：当省略时，默认为auto

`display`

定义开发人员对Web应用程序的首选显示模式。

"display": "standalone"

有效值:

显示模式	描述	后备显示模式
`fullscreen`	全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏	`standalone`
`standalone`	让这个应用看起来像一个独立的应用程序，包括具有不同的窗口，在应用程序启动器中拥有自己的图标等。这个模式中，用户代理将移除用于控制导航的UI元素，但是可以包括其他UI元素，例如状态栏。	`minimal-ui`
`minimal-ui`	该应用程序将看起来像一个独立的应用程序，但会有浏览器地址栏。样式因浏览器而异。	`browser`
`browser`	该应用程序在传统的浏览器标签或新窗口中打开，具体实现取决于浏览器和平台。这是默认的设置。	(None)

Note: 您可以使用显示模式媒体功能，根据_显示模式_选择性地将CSS应用到您的应用程序。这可用于在从URL启动网站和从桌面图标启动网站之间提供一致的用户体验。

`icons`

指定可在各种环境中用作应用程序图标的图像对象数组。例如，它们可以用来在其他应用程序列表中表示Web应用程序，或者将Web应用程序与OS的任务切换器和/或系统偏好集成在一起。

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

图像对象可能包含以下值：

字段	描述
`sizes`	包含空格分隔的图像尺寸的字符串。
`src`	图像文件的路径。如果`src`是一个相对URL，则基本URL将是manifest的URL。
`type`	提示图像的媒体类型。此字段的目的是允许用户代理快速忽略不支持的媒体类型的图像。

`lang`

指定name和short_name成员中的值的主要语言。该值是包含单个语言标记的字符串。

"lang": "zh-CN"

`name`

为应用程序提供一个人类可读的名称，例如在其他应用程序的列表中或作为图标的标签显示给用户。

"name": "Google I/O 2017"

`orientation`

定义Web应用程序运行时手机屏幕的默认方向

"orientation": "portrait-primary"

方向可以是以下值之一：

any
natural
landscape
landscape-primary
landscape-secondary
portrait
portrait-primary
portrait-secondary

`prefer_related_applications`

指定一个布尔值，提示用户相关原生应用程序可用，并建议通过Web应用程序访问。只有当相关的原生应用程序确实提供了某些Web应用程序无法做到的事情时，才应该使用它。

"prefer_related_applications": false

Note: 如果省略,默认设置为 false.

`related_applications`

指定一个“应用程序对象”数组，代表可由底层平台安装或可访问的原生应用程序 - 例如可通过Google Play Store获取的原生Android应用程序。这样的应用程序旨在替代提供类似或等同功能的Web应用程序 - 就像Web应用程序的原生应用程序版本一样。

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

应用程序对象可能包含以下值：

Member	Description
`platform`	可以找到应用程序的平台。
`url`	可以找到应用程序的URL。
`id`	用于表示指定平台上的应用程序的ID。

`scope`

定义此Web应用程序的应用程序上下文的导航范围。这基本上限制了manifest可以查看的网页。如果用户在范围之外浏览应用程序，则返回到正常的网页。

如果scope是相对URL，则基本URL将是manifest的URL。

"scope": "/myapp/"

`short_name`

为应用程序提供简短易读的名称。这是为了在没有足够空间显示Web应用程序的全名时使用。

"short_name": "I/O 2017"

`start_url`

指定用户从设备启动应用程序时加载的URL。如果以相对URL的形式给出，则基本URL将是manifest的URL。

"start_url": "./?utm_source=web_app_manifest"

`theme_color`

定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在Android的任务切换器上，主题颜色包围应用程序）。

"theme_color": "aliceblue"

初始屏幕

在Chrome 47及更高版本中，从主屏幕启动的Web应用程序将显示启动画面。这个启动画面是使用Web应用程序清单中的属性自动生成的，具体来说就是：name，background_color以及icons 中距设备最近128dpi的图标。

Service Worker

service worker是实现PWA的核心，service worker是一个独立的浏览器线程，不会对当前程序的执行线程造成阻塞，通过service worker可以实现页面离线访问、用户消息推送等功能。

Service Wordker的功能非常强大，但也可以通过几个简单的步骤开始使用

在网页中注册Service Worker

<body>
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
          navigator.serviceWorker.register('/sw.js').then((registration) => {
            console.log('Service Worker Registration')
          }, (err) => {
            console.log(err)
          })
        })
      }
      self.addEventListener('fetch', () => {
        console.log('ss')
      })
    </script>
  </body>

sw.js

设置需要缓存的内容：

var cacheName = 'my-cache'
var cacheList = ['/cache1.css', '/cache1.js']
self.addEventListener('install', function(event) {
  event.waitUntil(
    // 安装成功后向caches中存入需要缓存的文件  
    caches.open(cacheName).then(function (cache) {
        return cache.addAll(cacheList)
    })
  )
});
// 监听service worker fetch
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)
        .then(function(response) {
            // 在缓存中查找到匹配的请求，就从缓存返回
            if (response) {
                console.log(response)
                return response;
            }
            // 缓存中没有查找到对应请求，继续网络请求
            return fetch(event.request);
        }
    )
  );
})

如上例所示，利用service worker缓存了页面请求中cache1.js、cache1.css，然后再刷新一下网页，网页请求就会变成下图这样：

PWA页面请求

在网络请求面版可以很清楚看到这两个文件是从ServiceWorker中请求出来的。

添加到桌面

在完成manifest.json和sw.js的设置后，当用户第一次访问带有manifest.json的页面时，浏览器就会弹出提示，添加到主屏幕可用。

当用户通过浏览器自带功能手动添加网页到桌面时，也是默认添加PWA到桌面。

总结

PWA技术是当下很热门的技术，它提升了web应用的体验，Twitter的PWA版本甚至做到了原生APP的用户体验，但仍然存在的问题就是兼容性问题，在国内相当一部分的浏览器上不兼容，相信如果兼容性问题得到解决，这种技术一定会被大面积推广。