移动设备现在占网络流量的一半以上，网络应用程序使用户能够在浏览器中与本机应用程序相媲美，而渐进式增强WEB应用就是解决方案。在青岛网站建设开发中我们也强烈推荐使用渐进式增强WEB应用。
渐进式增强WEB应用使用渐进增强功能首先加载最重要的内容，然后根据需要添加表示和功能附加功能，这意味着所有用户都可以尽快获得相同的核心体验。如果您想要尽可能广泛的受众，渐进式增强WEB应用是您的最佳选择。
引人入胜的用户体验的10个步骤，虽然渐进式增强WEB应用带来了许多好处和功能，但它们不需要重写整个应用程序。任何应用都可以通过添加一些额外的图层转换为渐进式增强WEB应用。为了获得最佳效果，您需要从一开始就强调性能 - 但任何Web应用都是如此。在这里，我们将逐步介绍使您的应用程序渐进的步骤。
通过HTTPS服务，老实说：无论如何你应该这样做。SSL为网络添加了额外的安全保护，帮助您的用户在使用您的网站时感到安全。使用渐进式增强WEB应用。HTTPS对于使用服务工作者和允许主屏幕安装至关重要。您可以从您的域名注册商处以较低的费用购买SSL证书，然后通过您的托管服务进行配置。
创建一个应用程序shell，您的应用程序shell是第一个加载的东西 - 用户看到的第一件事。它应该完全存在于您的索引HTML文档中，使用内联CSS，以确保它尽可能快地显示，并且您的用户不会盯着白屏超过必要的时间。应用程序shell构成渐进增强模式的一部分。您的应用应尽快为用户提供内容，然后随着更多数据（可能是JavaScript）加载而逐步增强。
以下示例来自React.js应用程序。向用户显示应用程序的大纲和index.html中的加载指示符。然后，一旦JavaScript加载并且React启动，整个应用程序就会在shell中呈现。
<!--index.html-->
<body>
<div id="root">
<div id="container">
<div class="inner-container">
<div id="header">
<img src="/assets/icon.png" alt="logo" />
<h1>Chat</h1>
</div>
<div id="loading-container">
<img src="/assets/icon.png" alt="logo" id="loader"/>
</div>
</div>
</div>
</div>
</body>
// index.js
ReactDOM.render(
<App />,
document.getElementById('root')
);
要充分利用PWA的各种好东西（推送通知，缓存，安装提示），您将需要一名服务工作者。幸运的是，它们很容易设置。下面，我们首先检查用户的浏览器是否支持服务工作者。然后，如果是这样，我们可以继续注册服务工作文件，这里称为service-worker.js。请注意，此时您不需要该文件中的任何特殊内容 - 它可以为空白。 但是，在下面的示例中，我们将展示如何利用三个关键服务工作者生命周期事件。当用户首次访问您的网页时，这些是“安装”; 在注册完成之前'激活'; 和'fetch'，当应用程序发出网络请求时。最后一个与缓存和脱机功能相关。
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
// Registration was successful
console.log('Registered!');
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
}).catch(function(err) {
console.log(err);
});
});
} else {
console.log('service worker is not supported');
}
</script>
// service-worker.js
self.addEventListener('install', function() {
console.log('Install!');
});
self.addEventListener("activate", event => {
console.log('Activate!');
});
self.addEventListener('fetch', function(event) {
console.log('Fetch!', event.request);
});
服务工作者允许您的用户通过Web Push API接收推送通知。要访问它，您可以从服务工作文件中点击self.registration.pushManager。由于推送通知的发送在很大程度上依赖于您的后端设置，因此我们不会在此处深入了解。
如果您从头开始使用应用，Google的Firebase服务会附带Firebase云消息传递，以实现相对轻松的推送通知。下面的代码显示了如何通过Push API注册推送通知。
navigator.serviceWorker.ready.then(function(registration) {
if (!registration.pushManager) {
alert('No push notifications support.');
return false;
}
//To subscribe `push notification` from push manager
registration.pushManager.subscribe({
userVisibleOnly: true //Always show notification when received
})
.then(function (subscription) {
console.log('Subscribed.');
})
.catch(function (error) {
console.log('Subscription error: ', error);
});
})
为了使您的应用程序可安装，您需要在应用程序的根目录中包含manifest.json。您可以将此视为对应用程序的描述，类似于您可能提交给App Store的内容。它包括图标，启动画面，名称和描述。
从用户主屏幕启动应用程序时，还有一些配置可用于显示：您是否要在浏览器中显示地址栏？您想要状态栏的颜色是什么颜色？等等。请注意，正确的manifest.json应包含各种设备的全部图标大小。下面的代码是您的清单可以包含的一些属性的预览。
{
"short_name": "Chat",
"name": "Chat",
"icons": [
{
"src":"/assets/icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/?utm_source=homescreen",
"background_color": "#e05a47",
"theme_color": "#e05a47",
"display": "standalone"
}
当用户使用服务工作者和清单访问渐进式增强WEB应用时，Chrome会自动提示他们将其安装到主屏幕，具体如下：用户必须访问该网站两次，访问间隔五分钟。 这里的想法是等到用户对你的应用程序表现出兴趣，然后让他们把它作为他们设备的固定装置（这与本机app方法形成鲜明对比，后者要求预先投资）。
但是，在某些情况下，您可能希望在不同情况下显示安装提示，例如在用户执行特定有用操作之后。为此，我们拦截beforeinstallprompt事件并将其保存以供日后使用，然后在我们认为合适时部署提示。
window.addEventListener('beforeinstallprompt', e => {
console.log('beforeinstallprompt Event fired');
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredPrompt = e;
return false;
});
// When you want to trigger prompt:
this.deferredPrompt.prompt();
this.deferredPrompt.userChoice.then(choice => {
console.log(choice);
});
this.deferredPrompt = null;
性能是渐进式增强WEB应用的核心和灵魂。在所有网络条件下，您的应用应该快速为用户所用。缓存和脱机功能有很大帮助，但最终，即使用户没有支持服务工作者技术的浏览器，您的应用程序也应该快速。这是渐进增强的定义 - 为每个人提供良好的体验，无论设备的现代性或网络条件如何。
为此，一组有用的指标是RAIL系统。RAIL是谷歌所谓的“以用户为中心的性能模型” - 一套衡量我们应用程序性能的指南。
首字母缩略词代表响应（应用程序响应用户操作所需的时间），动画（保持动画速度为60fps），空闲（使用时间，当您的应用程序没有执行任何其他操作来加载和缓存其他资产时）和加载（在一秒或更短时间内加载您的应用）。
谷歌是推动渐进式增强WEB应用成为网络未来的最大赢家。因此，它提供了一个指导渐进式增强WEB应用开发的有用工具。
以前称为Lighthouse并作为Chrome扩展程序提供，从Chrome 60开始，它是Chrome AudTools的一部分，位于“审核”标签下。Lighthouse所做的是在不同条件下运行您的应用程序，并根据渐进式Web应用指南衡量其响应和成功。然后它会给出100分的分数。它还可以同时为网络最佳实践评分您的应用程序。