网站秒变APP,神奇的PWA入门介绍(Part 1/2)

本文翻译自Shruti Kapoor的Progressive Web Apps 101: the What, Why and How,并进行了一定程度的二次创作,原文链接:https://www.freecodecamp.org/news/progressive-web-apps-101-the-what-why-and-how-4aa5e9065ac2/

包含文中所涉及的外部链接的译文原文:https://github.com/azzinoths0905/news-translation/blob/patch-3/chinese/articles/progressive-web-apps-101-the-what-why-and-how.md

Progressive Web Apps 101: the What, Why and How

什么是渐进式Web应用(PWA)?为什么我们需要PWA?我们应该如何搭建一个PWA应用?

你有看到过上面第一张图的“添加到主屏幕”弹出框吗?当你按下这个按钮时,这个"APP"就会自动在后台进行安装,然后你就可以在你手机的APP列表里找到它。打开它时,你可以在里面做和之前在浏览器里一样的事,不过这次不用再打开浏览器了,这个APP现在直接运行在你的手机系统中。

现在你拥有的是一个从Web应用上下载下来的移动APP。在这整个过程中,我们完全不需要去使用手机的应用商店。

安装这样一个APP竟然如此简单!不过更厉害的是,你甚至可以在没有网络的时候离线浏览这个APP里的内容。

这就是渐进式Web应用(PWA)。你可以直接通过浏览器安装PWA应用,它可以像原生APP一样在线或离线在手机上使用。

但是,对于Web应用而言,渐进式到底意味着什么? 让我们来更深入地研究什么是PWA,为什么我认为它们比原生APP更好,它们又是为什么与传统的Web应用不同。

什么是渐进式Web应用(PWA)?

PWA这一概念是由Alex Russell和Frances Berriman创造的。引用Alex的话:

PWA其实就是新增了各种有用特性的网页。

它不是什么新的框架或技术,而是让一个Web应用可以像桌面或移动APP一样的一些最佳实践。主要目的是让Web应用有一种更统一、更沉浸的体验,以至于用户无法分辨PWA与原生APP之间的区别。

PWA通过渐进增强来提高用户体验。换句话说,这意味着PWA应用可以兼容几乎所有的设备。当然,某些功能可能不可用,但这个APP仍然可以正常提供应有的功能。

为什么我们需要PWA?

在讲为什么我们需要PWA之前,让我们先谈谈当今原生和Web应用所面临的一些问题。

网速:你可能并没有网速问题,这取决于你住在什么地方,但是全球60%的人口仍在使用2G互联网。 即使在美国,有些人还是不得不使用拨号上网。

网页加载速度慢:如果网页加载太慢,你知道用户等多少时间就会点击“关闭”按钮吗? 三秒钟!如果网页加载太慢,则有53%的用户会选择直接关掉标签页。

抗拒安装新的APP:用户不想安装原生APP,普通用户一个月内平均安装的APP数量不到1个。

用户粘性:用户将大部分时间花在原生APP上,但移动端网页的访问量几乎是原生APP的三倍。 因此,大多数用户都不会长时间去使用移动端网页,它们80%的时间都花在了前三名的原生APP上。

用户粘性:移动端Web应用 VS 原生APP

用PWA有很多好处,这里列出它最有帮助的几项:

  1. Fast(速度快):PWA应用可以持续提供快速的用户体验。 从开始下载到可以使用,整个过程都非常快。由于可以缓存数据,即使没有网络也可以再次快速启动这个APP。
  2. Integrated user experience(沉浸式的用户体验):PWA应用用起来就像原生APP一样。 它们可以放在用户的主屏幕上,发送推送通知,并可以访问设备硬件的功能,有着沉浸式的体验。
  3. Reliable experience(高可用性): 在service worker的帮助下,即使网络出现问题,PWA应用也可以在用户的屏幕上正常渲染图片。
  4. Engaging(高用户粘性): 由于PWA应用可以向用户推送通知,所以我们可以唤醒用户来真正地提高粘性。

PWA is on FIRE

我们应该如何搭建一个PWA应用?

Google为渐进式Web应用发布了 项目清单。 想让一个Web应用成为PWA应用,至少需要以下四个要求:

1. Web App Manifest

一个示例的manifest.json文件

这只是一个提供Web应用相关的meta信息的json文件。它有诸如APP图标(用户在将其安装到设备中后会看到的图标),APP的背景颜色,APP的名称,简称等信息。我们可以自己编写manifest文件,也可以使用工具为我们生成一个manifest文件。

你可以用Google的工具自动生成manifest文件。

2. Service Workers

Service Worker是事件驱动的服务,它们在APP的后台运行,并充当网络和APP之间的代理。 他们能够拦截网络请求并在后台为我们缓存信息。 这可用于加载数据以供离线使用。它们是一个JavaScript脚本,用于侦听诸如获取和安装之类的事件,并执行任务。

这里是一个serviceworker.js的示例:

self.addEventListener('fetch', event => {
    //缓存数据以供离线使用
    const {request} = event;
    const url = new URL(request.url);
    if(url.origin === location.origin) {
        event.respondWith(cacheData(request));
    } else {
        event.respondWith(networkFirst(request));
    }
});
async function cacheData(request) {
    const cachedResponse = await caches.match(request);
    return cachedResponse || fetch(request);
}

3. 图标

这是当用户在设备上安装PWA应用时显示的APP图标, 一般的jpeg图片就可以了。我在上面贴出的manifest文件里有列出多种尺寸的图标,我觉得这在很多时候非常有用。

4. 使用HTTPS

为了让Web应用成为PWA应用,必须要通过安全网络为它提供服务。借助Cloudfare和LetsEncrypt之类的服务,获取SSL证书确实非常容易。 成为安全站点不仅是最佳实践,而且还将Web应用建立为值得用户信任的站点,以获得用户的信任和依赖,并避免中间人攻击。

阅读 580

推荐阅读
目录