使用渐进式Web应用程序构建脱机应用程序

作者 : IT 大叔 本文共6415个字,预计阅读时间需要17分钟 发布时间: 2020-09-24

使用渐进式Web应用程序构建脱机应用程序插图

渐进式Web应用程序系列

渐进式Web应用程序(PWA)可能是现代移动应用程序开发的下一件大事。这个功能强大的工具结合了本机应用程序的功能和Web应用程序的功能。他们使用现代化的API来提供可靠性和可安装性,同时只需一个代码库即可在任何设备上的任何地方,任何地方访问任何人。

Web开发的PWA越来越多,大小公司都在利用这种强大的技术。今天,我想向您介绍PWA,并让您开始使用基本应用程序。

我们将结束:

  • 什么是PWA?
  • PWA的基本原理
  • 从头开始创建PWA
  • 接下来要学什么

什么是PWA?

渐进式Web应用程序(PWA)是使用现代技术来提供与本地应用程序非常相似的用户体验的Web应用程序。近年来,PWA变得非常流行,因为它们不仅可以提高性能和用户体验,而且在用户脱机时也可以访问。

PWA的主要目标是使用移动应用程序开发人员可以使用的大多数功能,提供与本机应用程序相同的体验。PWA将最佳的移动和Web应用程序整合为一项技术。您实质上可以使用前端Web技术来构建网站,但是它的行为,感觉和行为都类似于移动应用程序。

使用渐进式Web应用程序构建脱机应用程序插图(2)

星巴克的现代PWA用于离线订购

这种针对应用程序开发的现代解决方案使移动应用程序开发人员可以轻松地将其产品推向市场,而无需经历 Apple或Play商店的缓慢验证进度

部署PWA 后,用户立即可以使用它。这也意味着用户不必手动更新应用即可获取最新人员:它是自动部署的。

PWA的开发成本比本地应用程序便宜得多,因为它消除了对iOS和Android团队的需求。这个有价值的现代应用程序开发解决方案利用一个较大的Web生态系统来维护与本地应用程序相比的应用程序。

渐进式Web应用程序显然具有很多好处。让我们看一下它们的一些特征。

  • 渐进式: PWA必须在每台设备上工作并逐步增强,这意味着要考虑到用户设备或浏览器可用的功能。
  • 可发现的:渐进式Web应用程序本质上是一个网站,因此必须在搜索引擎上可发现。
  • 脱机功能:当用户脱机时,PWA应该起作用。它也应该在连接性差或连接低的区域工作。
  • 类似应用程式:。PWA应该表现得像本地应用程序。
  • 可链接的: PWA本质上是网站,因此它们应该使用URI指示应用程序的状态,以便应用程序可以保留其状态。

PWA的示例

渐进式Web应用程序已经是应用程序生态系统的一部分。您可能已经用过一个,却不知道!以下是五个流行的PWA,使您对公司正在使用此现代技术的感觉有所了解。

Uber: Uber使用PWA技术进行低速2G网络的乘车预订。该PWA允许用户在与本机应用程序不兼容的低端设备上访问Uber的服务。

Pinterest: Pinterest在得知只有1%的移动用户由于移动性能不佳而转换为注册用户后,才设计了PWA。他们使用基于PWA的技术进行了重新设计,以改善用户体验。

星巴克:星巴克为其网络订购系统构建了PWA,以提供与其本地应用类似的离线订购。星巴克的PWA允许您浏览菜单并自定义订单,而无需互联网。

Spotify: Spotify受PWA技术支持,可以克服与Apple合作的局限性。Spotify的PWA应用程序利用自适应UI来随着您在应用程序中的前进而更改背景。

Soundslice: Soundslice是一款音乐教育软件,使用PWA进行音乐学习。基于Soundslice PWA的播放器允许用户在另一台移动或台式设备上阅读音乐时学习音乐。

您应该构建PWA还是本机应用程序?

尽管使用PWA显然有很多优点,但是在某些情况下,本机应用程序可能是一个更好的决定。让我们进一步细分一下。

在以下情况下,PWA是理想的选择:

  • 该应用必须迅速投放市场
  • 您的预算有限
  • 上线后您计划了几个更新
  • 跨平台兼容性是必需的

本机应用程序非常适合以下情况:

  • 关键要求是速度和响应能力
  • 您要使用特定的硬件或功能
  • 该应用程序必须与第三方应用程序集成

PWA的基本原理

在学习如何下载和构建PWA之前,我们需要了解这些应用程序的组织和结构基础。在本节中,我们将向您介绍PWA的基础知识。为了成功完成本节,您应该了解HTML,CSS和JavaScript。让我们开始吧!

Web App清单

Web清单对于PWA是必不可少的。它提供了指示浏览器如何使用JSON文本文件在任何设备上呈现和显示PWA 的元数据。这是重要的第一步,必须安装在主屏幕上。稍后,我们将向您展示如何从头开始创建Web App Manifest,但是您也可以使用清单生成器,这是PWA开发人员的常见选择。

使用渐进式Web应用程序构建脱机应用程序插图(4)

摘自Microsoft的PWA文档

服务人员

服务人员是所有PWA的重要基础。它们使我们能够拦截网络请求并为不同的呼叫实施缓存策略。可以将其视为一种Web工作者,但这是一个JavaScript文件,可充当Web应用程序和网络之间的代理。

它拦截HTTP请求并提供来自网络或本地缓存的响应。服务工作者是安全的,不能直接与DOM交互。它们通过postMessage可以直接与DOM交互的界面与页面进行通信。

PWA文件结构

看一下这个PWA文件结构。我们将在下面讨论必需的部分,并说明哪些功能是可选的。

{
  "short_name": "MyCoolPWA",
  "name": "My cool Progressive Web App",
  "orientation": "landscape",
  "description": "A simple experiment with PWAs",
  "background_color": "#3367D6",
  "theme_color": "#3367D6",
  "scope": "/",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "src": "/images/icons-144.png",
      "type": "image/png",
      "sizes": "144x144",
      "purpose": "maskable any"
    },    
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable any"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable any"
    }
  ],
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "itunes",
      "url": "https://itunes.apple.com/app/native-app/id345"
    },
    {
      "platform": "play",
      "id": "com.my-domain.native"
      "url": "https://play.google.com/store/apps/details?id=com.my-domain.native",
    }
  ],
  "dir": "ltr"
}

name/short_name

一旦将PWA安装在用户设备上,这就是应用程序图标下使用的值。short_name当可用空间不足时使用。我建议将其保留在十二个字符以内,以免被截断。

start_url

这是启动PWA时要加载的应用资产的路径。这将表明我们希望该应用在每次启动时都在主页上启动。

display

这指定了PWA应用程序的显示方式,并可以根据浏览器体验(例如,browser标准体验或standalone独立窗口)指定不同的值。

icons

这将确定主屏幕或初始屏幕上的图标。分辨率至少应为144px。某些浏览器(例如Chrome)建议使用两个不同大小的图标,以帮助在不同设备上进行缩放。然后,我们可以使用该purpose属性指示这些不同图标的用途。

background_color

顾名思义,这将设置PWA的背景色。您可以确定所需的颜色,在Chrome上,该背景颜色也可用于初始屏幕。

我们的PWA文件结构中的以下功能是用于添加不同功能或设计元素的可选属性。如果您想要完全开发的PWA,则建议使用它们,但是,如果您只是想从基础开始,则只需要上面讨论的内容。

  • orientation
  • theme_color
  • scope
  • description
  • related_applications
  • dir

从头开始创建PWA

步骤1:建立基本网站

要制作PWA,我们需要一个网站。只要可以在不同的屏幕,浏览器和设备上很好地缩放,您就可以从头开始制作一个,也可以下载模板。如果您使用模板,请替换中的内容index.html并使用CSS更改颜色或设计。建立网站后,我们可以将其变成渐进式Web应用程序。

第2步:为主屏幕制作一个应用图标

正如我们在“文件结构”部分中提到的那样,您的PWA需要一个应用程序图标。这将在主屏幕上。您可以制作自己的徽标,也可以从在线来源下载免费的徽标。无论哪种方式,徽标都必须是正方形,并且分辨率至少应为144px

一旦你的图标,下载和在HTML代码添加到<head>了的index.html文件。确保检查此文件的路径是否正确。对于“应用”设备,还有一些额外的必需设置才能正确显示PWA图标。

步骤3:创建并注册Web App清单

如前所述,Web App Manifest是制作PWA的重要步骤。这是包含您所有网站数据的文件。您可以从头开始制作,也可以使用Webb App Manifest Generator填写所需的数据。

通常,清单文件存储在我们的Web应用程序的根目录中。可以将其命名为任何您想要的名称,只要.webmanifest结尾处带有即可。然后,我们将其与media type一起投放application/manifest+json

然后,我们必须使用HTML文档部分中的<link>标签将清单关联到Web应用程序<head>。这是一个向用户代理指示必须采用清单元数据的示例。我们还需要通过添加属性来添加凭证crossorigin="use-credentials

<head>
  <link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
</head>

步骤4:添加服务人员

正如我之前概述的那样,服务工作者充当我们的应用程序和网络的代理。这是我们需要添加到PWA中的另一个文件,因此它可以脱机工作。为了成功创建服务工作者,您需要一些关于JavaScript的Promise的知识。要创建服务工作者,有四个主要步骤:

1.使用包含我们服务程序逻辑的JavaScript文件注册服务程序。您可以使用以下代码。在此阶段,error如果无法获取服务工作者文件,则可能会生成一个。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/serviceWorker.js')
      .then((registration) => { 
         // The registration was successful       
      })
      .catch((err) => {
         // The registration failed
      });
  } 

2.安装服务人员。在此阶段,通常会执行预取操作以确保下载目标资产(例如静态文件)。这就是我们在JavaScript代码中使用Promise的地方。双方caches.open()cache.addAll()会返回承诺。

安装完成后,服务工作者将延迟激活,直到较老的服务工作者不再控制客户端(如果您已经安装了客户端)。

var urlsToCache = [
  '/',
  '/styles/styles.css',
  '/script/home.js'
];
 
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache')
      .then((cache) => {
        return cache.addAll(urlsToCache);
      })
  );
});

3.激活服务人员。旧的服务人员离开后,新的服务人员将被激活。

使用渐进式Web应用程序构建脱机应用程序插图(6)

摘自Google的PWA文档

4.提取和拦截请求。现在我们的服务工作者已经安装并激活,因此它可以拦截请求并与本地缓存进行通信。我们可以通过几种方法来实现此阶段。现在,我将向您展示一般PWA方案的最简单方法。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // The responce is in the cache
        if (response) {
          return response;
        }
 
        // No cache match, we attempt to fetch it from the network
        return fetch(event.request);
      }
    )
  );
});

现在,我们了解了为PWA创建和安装服务工作者的基本步骤。请记住,还有其他方法可以联系服务人员,例如使用sw-toolbox或利用不同的缓存策略。

如果您想与服务人员及其生命周期进行更多的动手实践,Educative的“ 零到英雄”课程和渐进式Web应用程序将教您如何创建自定义脱机页面。

现在,让我们进入创建PWA的下一个阶段。

步骤5:初始化添加到主屏幕对话框

“添加到主屏幕”对话框(A2HS)是用户如何在其设备上本地安装应用程序的方式。我们还需要通过HTTPS连接为应用提供服务。为此,Chrome将要求您的PWA有注册的服务人员。

满足要求后,浏览器将显示A2HS对话框,例如按钮,弹出窗口或菜单选项。将其添加到主屏幕后,使用您提供的图标,您的PWA看起来就像是本机应用程序。

步骤6:测试您的PWA和清单文件

有了基本的PWA之后,您将需要进行测试以查看其是否正常工作,并确定它是否是一个好的PWA。PWA开发人员常用的工具是Google Lighthouse,它将评估您的PWA并提出改进建议。您可以安装Lighthouse,打开您的网站,然后单击Generate Report。

这将打开一个包含重要信息的标签。您应该关注的数据是渐进式Web应用,性能,可访问性和最佳实践类别的等级。从那里,您可以确定应进行哪些更改。

您还需要测试清单文件。为此,您可以使用浏览器的DevTools。例如,在Chrome浏览器中,您需要打开“应用程序”标签,访问“清单”部分(在左侧),然后查看文件的属性。如果有错误,它将显示警告。您也可以在此步骤中使用清单验证器。

使用渐进式Web应用程序构建脱机应用程序插图(8)

摘自Google的PWA文档

接下来要学什么

恭喜!您现在知道创建一个基本的PWA并将其下载到用户的主屏幕。显然,此过程比传统的本机应用程序过程更快,更轻松。

PWA是用于现代Web应用程序创建和部署的强大工具。掌握PWA开发仍有很多要学习的知识。接下来需要学习的东西和工具是:

  • 缓存策略
  • Cloud Firestore可实现离线持久性
  • PWA库和Workbox
  • 如何使用Angular创建PWA
  • 部署和托管PWA
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用渐进式Web应用程序构建脱机应用程序

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论