渐进式web应用程序已被证明可以提高用户参与度并有效降低成本。建立现代化的pwa不仅需要核心设置来满足用户的期望。因此，让我们直接了解如何为pwa添加现代特征，从离线功能到用户友好的权限请求。
渐进式web应用程序（pwa）在2020年仍将继续流行。考虑到更高的转换率，客户参与度，降低的页面加载速度以及更低的开发和开销成本，这并不奇怪。
我们可以看到受人尊敬的公司也通过其pwa获得成功，例如twitter，uber，tinder，pinterest和forbes。他们都为实施渐进式应用程序带来巨大收益。
好消息是，开发pwa并非只有大型预算公司才能负担得起。这些应用程序平均为小型企业和普通企业提供服务，创建起来并不那么复杂。
您可以在smashing magazine上找到全面的《渐进式web应用程序初学者指南》，该指南侧重于构建pwa的核心。
但是，让我们更进一步，学习如何为pwa部署现代质量，例如脱机功能，基于网络的优化，跨设备用户体验，seo功能以及非侵入式通知和请求。您还将找到示例代码或对更具体指南的引用，以便可以将这些技巧应用于pwa。
渐进式web应用程序（pwa）快速概述让我们不要跳过基础知识，而快速了解pwa的核心。
什么是pwa？“渐进式web应用程序（pwa）使用现代api进行了构建和增强，以提供增强的功能，可靠性和可安装性，同时只需一个代码库即可在任何设备上访问任何地方的任何人。”
-谷歌的开发者
换句话说，pwa是用户可以用作独立应用程序的网站。它们与本机应用程序不同，主要是因为pwa不需要安装并且可以与各种设备一起使用-本机应用程序主要是为移动设备构建的。
pwa如何工作？pwa的核心由三个组件组成：web应用程序清单，服务工作者和应用程序外壳。您可以在上述初学者指南中找到有关构建这些对象的详细说明。
这些组件的作用如下。
web app清单web应用程序清单是使网站在全屏模式下作为独立应用程序运行的核心。您可以定义pwa的外观，针对不同的设备对其进行优化，并分配在应用程序安装后显示的图标。
服务人员服务工作人员通过获取缓存的数据或通知用户不存在internet连接来启用pwa的脱机使用。恢复服务器连接后，服务人员还可以检索最新数据。
应用程序外壳架构用户访问pwa时将看到应用程序外壳。这是驱动用户界面所需的最低html，css和javascript。开发pwa时，可以在浏览器中缓存应用程序外壳程序的资源和资产。
为您的pwa部署现代特征除了核心功能之外，现代的pwa还具有其他特征，这些特征进一步推动其用户获得更加非凡的用户体验。
让我们看一下pwa的一些特定现代特征，并了解有关将其添加到pwa中的信息。google开发人员认为以下质量是基本pwa的重要补充。
该应用程序可以像联机操作一样脱机工作构建pwa时，您还可以开发自定义的脱机页面作为核心部分。但是，如果您的pwa甚至在没有internet连接的情况下仍能继续运行，甚至在需要连接的特定点上，仍将更加方便用户使用。否则，用户体验就像ankita masand对订购蛋糕的折磨一样令人沮丧，就像她在她的pwa痛点文章中所描述的那样。
通过使用缓存的内容，后台同步和框架屏幕，可以实现更重要的用户体验。让我们看看每个。
缓存内容?indexeddbindexeddb?是浏览器内的nosql存储系统，可用于缓存和检索所需的数据以使pwa脱机工作。
但是，并非所有浏览器都支持indexeddb，因此您要做的第一件事是检查用户浏览器是否支持它。
if (!('indexeddb' in window)) {
console.log('this browser doesn\'t support indexeddb');
return;
}
之后，您可以使用indexeddb api创建缓存的内容。这是来自google开发人员的一个示例，该示例打开数据库，添加对象存储并向该存储添加项目。
var db;
var openrequest = indexeddb.open('test_db', 1);
openrequest.onupgradeneeded = function(e) {
var db = e.target.result;
console.log('running onupgradeneeded');
if (!db.objectstorenames.contains('store')) {
var storeos = db.createobjectstore('store',
{keypath: 'name'});
}
};
openrequest.onsuccess = function(e) {
console.log('running onsuccess');
db = e.target.result;
additem();
};
openrequest.onerror = function(e) {
console.log('onerror!');
console.dir(e);
};
function additem() {
var transaction = db.transaction(['store'], 'readwrite');
var store = transaction.objectstore('store');
var item = {
name: 'banana',
price: '$2.99',
description: 'it is a purple banana!',
created: new date().gettime()
};
var request = store.add(item);
request.onerror = function(e) {
console.log('error', e.target.error.name);
};
request.onsuccess = function(e) {
console.log('woot! did it');
};
}
后台同步如果您的pwa在后台同步数据，则用户可以在脱机时执行操作，然后在恢复internet连接时执行这些操作。一个简单的示例是消息传递应用程序。用户可以在脱机时发送消息，而无需等待发送消息-连接恢复后，后台同步会自动发送消息。
这是jake archibald如何开发背景同步功能的示例。
// register your service worker:
navigator.serviceworker.register('/sw.js');
// then later, request a one-off sync:
navigator.serviceworker.ready.then(function(swregistration) {
return swregistration.sync.register('myfirstsync');
});
然后在中收听事件/sw.js：
self.addeventlistener('sync', function(event) {
if (event.tag == 'myfirstsync') {
event.waituntil(dosomestuff());
}
});
骨架屏幕使用框架屏幕的主要好处之一是用户会感觉到应用程序正在工作，而不是闲置。当用户没有连接时，框架屏幕将在没有内容的情况下绘制界面-一旦恢复连接，该界面就会填充。
代码我的ui具有一些出色的代码段，可用于为pwa创建框架屏幕。
根据网络使用情况进行优化pwa的主要好处是可以为用户提供更快的体验。您可以通过让pwa使用缓存优先网络，优先化资源并根据网络质量使用自适应加载来进一步优化加载速度。
让我们看看如何将这些开发到pwa中。
先缓存，再缓存网络首先使用缓存的内容，可以使您的pwa脱机运行，甚至为用户在低网络覆盖区域访问内容铺平道路。您可以通过创建服务工作者来缓存内容，然后提取内容来做到这一点。
这是jeff posnick的一个示例，它介绍了如何使用service worker缓存静态html。
self.addeventlistener('fetch', event => {
if (event.request.mode === 'navigate') {
// see /web/fundamentals/getting-started/primers/async-functions
// for an async/await primer.
event.respondwith(async function() {
// optional: normalize the incoming url by removing query parameters.
// instead of https://example.com/page?key=value,
// use https://example