渐进式web应用程序_我关于使用渐进式Web应用程序的实用指南

最新推荐文章于 2024-04-08 16:26:16 发布

dfsgwe1231

最新推荐文章于 2024-04-08 16:26:16 发布

阅读量329

点赞数

文章标签： python java js html javascript ViewUI

原文链接：https://hackernoon.com/my-practical-guide-on-using-progressive-web-apps-d1283u3e

版权

渐进式web应用程序

关于PWA的文章很多，详细介绍了PWA是什么以及如何设置。但是，您可能并不总是从一开始就了解它们。

我的目标是以简单的语言提供基本信息，足以使您了解什么是PWA。然后向您展示一个真实的例子，以增强您学到的一切。因此，带上您的笔记本电脑跟着我。

阅读后，您将了解以下内容：

PWA的优缺点。
基本概念。
如何在您的网站上配置此技术。
如何更新缓存。

的优点和缺点

与任何技术一样，PWA也有其优点和局限性。在介绍它们之前，让我们了解什么是PWA。

PWA技术是Google在2015年宣布的。它将自己定位为一个附加组件，使您可以使该网站看起来像移动应用程序。

同时，内部不会改变，不会变形，站点保持不变，只是浏览器被变形。

另外，您应该知道PWA对于哪种业务类型比移动应用程序更好。您可以在此处找到有关PWA和移动应用程序之间差异的更多信息。

PWA可以做什么？

发送通知，缓存内容并设置桌面快捷方式；
以弹出窗口的形式发送通知，您可以在其中通知用户某些内容；
借助内容缓存，可以脱机工作，即无需Internet连接。
PWA的优势

PWA 易于安装 。您无需去任何应用程序商店，下载任何内容或与手鼓跳舞。只需单击链接打开站点，“安装桌面的快捷方式”窗口即会弹出，安装完成。
它可以在或多或少的现代设备上运行 ，您只需要一个浏览器。
由于桌面上的快捷方式，它使站点更易于访问 。您解锁了手机，单击快捷方式，然后打开了站点。这很酷。
它占用的内存更少 ，不到1 MB。
与创建移动应用程序相比，设置PWA需要更少的开发时间 。无需在Android和IOS上编写两个相同的应用程序。因此，对于企业而言它将便宜得多。
更高的安全性 -所有资源仅通过https传输。
运行稳定 。如果Internet存在问题，则将从缓存中补偿内容，因此该站点将始终可用。

PWA的缺点

关于PWA有助于提高SEO性能的事实存在误解。我不同意！
涉及的第一个问题是SPA ，其中JavaScript呈现页面上HTML标记。在脚本加载之前（只要需要），布局将不会出现，并且只会是带有“ app”-ID的<div> 。这只是一切变得愚蠢的时刻，发生了SEO分析，但是据您了解，该页面为空。即使将+100500 PWA添加到站点，它们也不会加快HTML代码的呈现速度。
为了不被证实，让我们通过一个真实的例子进行确认。让我们来看一个站点https://madops.io ，它是一个单页应用程序。如果查看其内部视图源： https : //madops.io ，您将看到我上面描述的所有内容。
在其他情况下，当服务器一次呈现所有HTML标记时，则没有问题，例如，在此处查看源代码： https : //maddevs.io 。
失能。 出于安全原因，PWA将无法使用诸如相机控制，SMS发送，传感器访问等功能。
仍然有一些不支持PWA的浏览器 。例如，在IOS上推送通知。

如果您想详细了解什么是PWA，请检查此链接。以下是使用PWA的站点。

基本概念

在深入进行PWA设置之前，让我们先了解一下其基本概念及其组成部分

服务工作者 -本质上是一个脚本文件，负责所有这些魔术。所有浏览器请求都经过它，这提供了很多可能性，例如，如果没有Internet连接，它将从缓存中返回内容（当然，如果存在）。
在其中，我们处理各种事件，从缓存中写入文件，删除文件等等。
脚本在后台与应用程序并行运行。

manifest.json —设置文件。在这里，我们指定要使用的图标，在快捷方式中显示的文本，打开浏览器窗口的格式，等等。让我们在下面更详细地讨论它。

应用程序外壳程序 -这是PWA外壳程序的名称。更具体地说，它是一种经过稍微转换以向开发人员提供更多功能的浏览器。

HTTPS — PWA的主要要求之一是通过https协议传输数据，这更加安全。
您可以使用localhost进行开发。

推送通知 -用于发送推送通知的技术。

设置PWA

PWA的设置非常简单。因此，让我们从编写代码开始！

不，等等

这是指向现成代码https://github.com/denisoed/PWA-example的链接。在这里，您可以下载进一步需要的图像，因为您将熟悉发生的情况。

首先，您需要在项目中创建一个文件夹并将其命名为PWA。然后将其添加到此文件夹index.html，其中将包含以下代码：

<!doctype html>< html lang = "en" >
  
   <head>
    <meta charset="utf-8">
    <title>PWA</title>
    <meta name="description" content="Progressive 
Web Apps">
  </head>
<body class="fullscreen">
    <div class="container">
      <a href="https://maddevs.io" target="_blank">
        <img src="./images/logo.svg" alt="Mad Devs">
      </a>
      <h1>PWA</h1>
      <p>Progressive Web Apps</p>
    </div>
  </body>
</html>

我已经准备好布局，但是如果没有样式，它看起来很糟糕，因此我们也要添加它们。创建一个CSS文件夹，在其中添加styles.css文件并在下面插入代码：

body {
  font-family: sans-serif;
}/* Make content area fill the entire browser window 
*/
html,
.fullscreen {
  display : flex;
  height: 100 %;
  margin: 0 ;
  padding: 0 ;
  width: 100 %;
  background-color: # 000 ;
}
/* Center the content in the browser window */
.container {
  margin : auto;
  text-align: center;
}
.container img {
  width : 50 px;
  height: auto;
}
.container h1 {
  color : #fff;
  font-size: 12 rem;
  font-weight: bold;
  margin: 30 px 0 -20 px;
}
.container p {
  color : #fff;
  font-size: 3 rem;
  margin: 0 ;
}

然后将此文件连接到<head>…</ head>标记中的index.html。

<link rel="stylesheet" href= "css/styles.css" >

让我们立即连接必要的图像，可以在此处下载。点击链接，会有一个按钮Clone或download ，绿色，戳一下，然后戳Download ZIP 。档案将被下载，并且图像文件夹中将有图像。 ew，我想我解释得很清楚：

打开项目，在此处创建images目录，在其中插入所有图像。然后将其打开index.html并将元信息插入<head>…</ head>标记。这是什么以及为什么可以在这里阅读。

<link rel="icon" href= "images/favicon.ico" 
type= "image/x-icon" />
< link rel = "apple-touch-icon" href = "images/mstile-
150x150.png" >
 <meta name="theme-color" content="black" />
<meta name="apple-mobile-web-app-capable" 
content="yes">
<meta name="apple-mobile-web-app-status-bar-style" 
content="black">
<meta name="apple-mobile-web-app-title" 
content="PWA">
<meta name="msapplication-TileImage" 
content="images/mstile-144x144.png">
<meta name="msapplication-TileColor" 
content="#FFFFFF">
<meta name="viewport" content="width=device-width, 
initial-scale=1.0">

结果，在文件index.html中，应该有这样的结构：

<!doctype html>< html lang = "en" >
  
   <head>
    <meta charset="utf-8">
    <title>PWA</title>
    <meta name="description" content="Progressive 
Web Apps">
    <link rel="icon" href="images/favicon.ico" 
type="image/x-icon" />
    <link rel="apple-touch-icon" 
href="images/mstile-150x150.png">
    <meta name="theme-color" content="black" />
    <meta name="apple-mobile-web-app-capable" 
content="yes">
    <meta name="apple-mobile-web-app-status-bar-
style" content="black">
    <meta name="apple-mobile-web-app-title" 
content="PWA">
    <meta name="msapplication-TileImage" 
content="images/mstile-144x144.png">
    <meta name="msapplication-TileColor" 
content="#000">
    <meta name="viewport" content="width=device-
width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
  </head>
<body class="fullscreen">
    <div class="container">
      <a href="https://maddevs.io" target="_blank">
        <img src="./images/logo.svg" alt="Mad 
Devs">
      </a>
      <h1>PWA</h1>
      <p>Progressive Web Apps</p>
    </div>
  </body>
</html>

现在它仍然可以运行，看看发生了什么。我发现一个非常方便的Chrome浏览器扩展Web服务器可以运行本地服务器，您需要安装它，接下来我们将需要它。没什么困难，只需指定项目所在的文件夹为index.html即可，他会自己完成。复制链接并将其粘贴到浏览器中。

这就是我们得到的。我不会说这很好，但是对我来说这很正常！

好吧，听着，最困难的事情，考虑完成，现在让我们看看谷歌验证对我们工作的看法。为此，请按f12键 ，然后转到Lighthouse选项卡（在Google更新之前，此选项卡名为Audits ），将有一个蓝色的Generate report按钮，即戳。

验证过程完成后，我们将看到以下图片：负责PWA的项目将为灰色。这意味着我们没有任何设置。

而且，如果向下滚动，则可以看到为了使PWA像发条一样工作需要遵循的建议。

“ 灯塔”选项卡将帮助您跟踪配置PWA时的所有错误。

好了，我们终于到了最有趣的部分。

首先，您需要在项目的根目录中创建manifest.json文件。我们向其中添加以下元数据：

名称 -全名。在应用快捷方式中使用；
short_name —在全名不适合的地方使用缩写名称；
icons — 图标列表，将显示在已安装应用程序的快捷方式中；
lang-默认语言；
start_url —必需参数。它告诉应用程序从哪个文件开始。打开应用程序时，浏览器将始终打开此页面；
display —指示打开浏览器窗口的格式；
background_color —首次在移动设备上启动应用程序时，在屏幕保护程序上使用此属性；
theme_color —设置工具栏的颜色，可以在任务开关的应用程序预览中显示。
theme_color必须与文档标题中指定的元主题颜色匹配。在我们的例子中，<meta name =“ theme-color” content =“ black” />：

{"name" : "Progressive Web Apps" ,
  "short_name" : "PWA" ,
  "icons" : [
    {
      "src" : "images/mstile-70x70.png" ,
      "sizes" : "70x70" ,
      "type" : "image/png"
    },
    {
      "src" : "images/mstile-144x144.png" ,
      "sizes" : "144x144" ,
      "type" : "image/png"
    },
    {
      "src" : "images/mstile-150x150.png" ,
      "sizes" : "150x150" ,
      "type" : "image/png"
    },
    {
      "src" : "images/mstile-192x192.png" ,
      "sizes" : "310x150" ,
      "type" : "image/png"
    },
    {
      "src" : "images/mstile-310x150.png" ,
      "sizes" : "310x150" ,
      "type" : "image/png"
    },
    {
      "src" : "images/mstile-310x310.png" ,
      "sizes" : "310x310" ,
      "type" : "image/png"
    },
    {
      "src" : "images/mstile-512x512.png" ,
      "sizes" : "310x310" ,
      "type" : "image/png"
    }
  ],
  "lang" : "en-US" ,
  "start_url" : "/index.html" ,
  "display" : "standalone" ,
  "background_color" : "black" ,
  "theme_color" : "black"
}

现在就足够了。这是对该文件的所有属性的描述，必将需要时间阅读。

<head>…</ head>标记中index.html中的插件manifest.json

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

让我们开始编写脚本。创建一个名为js的文件夹，在其中添加具有以下代码的main.js文件：

window .addEventListener( 'load' , () => {
  if ( 'serviceWorker' in navigator) {
    navigator.serviceWorker.register( '/sw.js' ).then( reg 
=> {
      console .log( 'SW registered!' );
    }).catch( err => console .log( 'SW registration 
FAIL:' , err));
  }
});

关于那里发生的事情的几句话：

页面加载后，我们会检查浏览器是否支持serviceWorker，如果成功，我们会进一步
然后注册我们的文件sw.js（尚未配置）。没什么不寻常的。

在index.html中启用脚本，但不再在<head>…</ head>标记中，而是在结束</ body>标记之前。

<script src="js/main.js" > </ script >

好了，现在让我们创建文件本身sw.js。它将存储Service Worker的所有逻辑。在项目的根目录中创建它，并将缓存名称添加为第一行。

const cacheName = 'pwa_v1' ;

在下一行，添加includeToCache变量。在其中，我们指定要缓存的文件。是的，我知道这不方便，我必须用手注册所有文件，但我们拥有的是全部。但是我们将始终确保不会缓存任何多余的内容。节省流量和稳定性。

const includeToCache = [
  '/' ,
  '/index.html' ,
  '/images/favicon.ico' ,
  '/images/logo.svg' ,
  '/images/logo-black.svg' ,
  '/css/styles.css' ,
  '/js/main.js'
];

接下来我们去参加活动。服务人员在后台有多个事件，也称为生命周期。首先是install 。写入缓存时仅触发一次。

/* Start the service worker and cache all of the 
app's content */
self.addEventListener( 'install' , e => {
  e.waitUntil(
    caches.open(cacheName).then( cache => {
      return cache.addAll(includeToCache);
    })
  );
});

提取事件。此事件将扫描所有请求，并且如果某些内容与缓存中的内容匹配，它将从缓存中返回匹配项。否则，它将返回来自服务器的内容。
responseWith方法负责从缓存中检索数据或服务器返回的数据。如果服务器未返回任何内容，我们将从缓存中获取它。

/* Serve cached content when offline */
self.addEventListener(‘fetch’, e => {
  e.respondWith(
    caches.match(e.request).then( response => {
      return response || fetch(e.request);
    })
  );
});

这段代码到目前为止已经足够。现在，确保已注册文件sw.js并记录了缓存。转到开发人员控制台，打开“应用程序”选项卡，然后转到“ Service Workers”设置。在这里，我们看到文件sw.js已成功注册，这已通过绿灯确认。

我们继续在侧面导航面板上移动，找到一个名称为Cache Storage的下拉列表，其中实际上存储了我们的缓存。如果单击它，则可以看到已缓存了哪些文件和内容。

现在，如果您禁用Internet并重新加载页面，则该站点将正常工作。

总结。为了在没有Internet的情况下使站点正常工作，您不需要安装任何框架，添加库等。只需几行代码和对该技术的一般理解就足够了。

如何更新缓存？

我在处理PWA时遇到的第一个问题是更新旧缓存。但是，事实证明，这很容易解决。

让我们更改一些样式，以便您可以看到某些更改。然后刷新页面，并确保页面上的样式已更改。我们切断了Internet连接，并再次重新加载了页面，但是由于某种原因，缓存未更新，因此我们看到了该网站的旧版本。

解决方案是将激活事件添加到sw.js文件中，在调用该事件时，我们将检查旧缓存和新缓存的名称，如果名称不同，则删除旧缓存并添加新缓存。是的，为了更新缓存，我们需要在每次更新代码时更改其名称。

一开始，我没有在缓存名称中指定后缀* _v1 ，而是将其版本化。只要名称不同，您叫它什么都没有关系。

self.addEventListener(‘activate’, e => {// delete any caches that aren’t in cacheName
  // which will get rid of version
  e.waitUntil(
    caches.keys().then( keys => Promise .all(
      keys.map( key => {
        if (cacheName !== key) {
          return caches.delete(key);
        }
      })
    )).then( () => {
      console .log(cacheName + ‘ now ready to handle 
fetches!’);
    })
  );
});

如果阅读该代码，则可以看到比较缓存名称的条件，如果不匹配，则会删除旧的缓存。

关于激活事件的几句话。在工作人员注册并准备工作后，将触发此事件。但是，为了使其准备就绪，您需要等待直到站点不再使用旧的缓存为止，这将需要一些时间。为了摆脱这种期望，您可以添加以下方法。

self.skipWaiting();

现在，缓存将在注册新工作线程之后立即更新。将其添加到安装事件。

/* Start the service worker and cache all of the 
app's content */
self.addEventListener( 'install' , e => {
self.skipWaiting();
e.waitUntil(
    caches.open(cacheName).then( cache => {
      return cache.addAll(includeToCache);
    })
  );
});

并在main.js文件中添加了update函数，该函数将在每次重新加载页面时开始更新缓存。

reg.update();

添加console.log（）方法。实际上，没关系，主要是在回调.then（）中

window .addEventListener( 'load' , () => {
  if ( 'serviceWorker' in navigator) {
    navigator.serviceWorker.register( '/sw.js' ).then( reg 
=> {
      
      reg.update();
      
      console .log( 'SW registered!' );
    }).catch( err => console .log( 'SW registration 
FAIL:' , err));
  }
});

就是这样，重新加载页面。再次打开开发人员工具，在侧面板的Service Workers选项卡中脱机检查，再次重新加载页面，然后查看Cache Storage选项卡。在这里，您可以看到旧的缓存将如何被新的替换。

安装新工作程序大约需要2分钟，因此您可能需要重新加载页面几次。