渐进式Web应用程序:速成课程
渐进式Web应用程序(PWA)试图通过向移动用户提供每种功能的最佳功能来重叠移动Web应用程序和本机移动应用程序的世界。
它们提供类似应用程序的用户体验(启动屏幕和主屏幕图标),由受HTTPS保护的服务器提供服务,即使在质量较低或网络速度较慢的情况下,也可以快速加载(由于页面加载性能的最佳做法),并且他们具有离线支持,即时加载和推送通知。 PWA的概念最初是由Google提出的,但仍受许多Chrome功能和出色工具的支持,例如Lighthouse,这是一个用于辅助功能,性能和渐进性审核的开源工具,我们将在稍后进行探讨。
在整个崩溃过程中,我们将使用ES6和React从零开始构建PWA,并使用Lighthouse逐步对其进行优化,直到获得用户体验和性能方面的最佳结果。
术语“ 渐进式”仅表示PWA的设计方式使其可以在已经支持许多新功能和新技术的现代浏览器中逐步增强,但在没有尖端功能的旧浏览器中也可以正常工作。
原生vs移动=渐进
本地应用程序可以从移动操作系统的相应应用程序商店中分发和下载。 另一方面,只需在Web浏览器中输入地址或URL即可访问它们。 从用户的角度来看,启动浏览器并导航到某个地址比去应用商店并下载,安装然后启动该应用要方便得多。 从开发者/所有者的角度来看,支付一次一次性的费用来获得应用商店帐户,然后上载其应用以供全世界的用户访问,比必须处理网络托管的复杂性要好。
本机应用程序可以脱机使用。 如果需要从某个API服务器检索远程数据,则可以轻松地设计该应用程序以支持对最新访问数据的某种SQLite缓存。
谷歌等搜索引擎可以为移动网络应用编制索引,并且通过搜索引擎优化,您可以吸引更多用户。 对于本机应用程序也是如此,因为应用程序商店拥有自己的搜索引擎,开发人员可以在其中使用不同的技术(通常称为“应用程序商店优化”)来吸引更多用户。
本机应用程序至少在启动屏幕上立即加载,直到所有资源可供应用程序执行为止。
这些是最重要的感知差异。 每种应用程序分发方法都对最终用户(关于用户体验,可用性等)和应用程序所有者(关于成本,客户覆盖范围等)都有好处。 考虑到这一点,Google引入了PWA,将双方的最佳功能整合到一个概念中。 Google Chrome工程师Alex Russell在这份清单中总结了这些方面。 (来源: 不经常提及 。)
- 响应式:适合任何尺寸。
- 独立的连接性:逐步增强了服务人员的能力,使他们可以脱机工作。
- 类应用互动:采用Shell + Content应用模型创建应用导航和互动。
- 新鲜:由于服务人员的更新过程,透明地始终保持最新。
- 安全:通过TLS(服务工作者要求)提供服务以防止监听。
- 可发现:由于W3C清单和服务人员注册范围而使搜索引擎可以将它们识别为“应用程序”。
- 可重新参与:可以访问操作系统的重新参与用户界面; 例如推送通知。
- 可安装:通过浏览器提供的提示进入主屏幕,使用户可以“保留”他们认为最有用的应用,而无需麻烦应用商店。
- 可链接:表示它们零摩擦,零安装且易于共享。 URL的社会力量很重要。
灯塔
Lighthouse是用于审核Google创建的Web应用程序的工具。 它与Chrome开发工具集成在一起,可以从“审核”面板中触发。
您还可以将Lighthouse用作NodeJS CLI工具:
npm install -g lighthouse
然后可以使用以下命令运行它:
lighthouse https://sitepoint.com/
Lighthouse也可以作为Chrome扩展程序安装,但是Google建议使用与DevTools集成的版本,并且仅在您因某种原因无法使用DevTools时才使用该扩展程序。
请注意,即使您使用的是基于CLI的版本,也需要在系统上安装Chrome才能使用Lighthouse。
从头开始构建您的第一个PWA
在本节中,我们将从头开始创建一个渐进式Web应用程序。 首先,我们将使用React和Reddit的API创建一个简单的Web应用程序。 接下来,我们将按照Lighthouse报告提供的说明添加PWA功能。
请注意,公开的非身份验证Reddit API启用了CORS标头,因此您可以在没有中间服务器的情况下从客户端应用程序使用它。
在我们开始之前,本课程将假设您已经安装了NodeJS和NPM的开发环境设置。 如果您没有这样做,请从令人敬畏的Homestead Improvementd开始 ,它正在运行每个版本的最新版本,并且可以立即进行开发和测试。
我们首先安装Create React App,这是由React团队创建的项目样板,可将您从WebPack配置的麻烦中解救出来。
npm install -g create-react-app
create-react-app react-pwa
cd react-pwa/
应用程序外壳架构
应用程序外壳是渐进式Web应用程序的基本概念。 这只是负责呈现用户界面的最少HTML,CSS和JavaScript代码。
此应用程序外壳程序对性能有很多好处。 您可以缓存应用程序外壳程序,这样当用户下次访问您的应用程序时,由于浏览器不需要从远程服务器获取资产,因此将立即加载该应用程序外壳。
为了构建一个简单的UI,我们将使用Material UI,这是React中Google Material design的一个实现。
让我们从NPM安装软件包:
npm install material-ui --save
接下来打开src/App.js
然后添加:
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import {Card, CardActions, CardHeader,CardTitle,CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';import logo from './logo.svg';
import './App.css';class App extends Component {constructor(props) {super(props);this.state = {posts: []};}render() {return (<MuiThemeProvider><div><AppBartitle={<span >React PWA</span>}iconElementLeft={<IconButton><NavigationClose /></IconButton>}iconElementRight={<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" />}/>{this.state.posts.map(function (el, index) {return <Card key={index}><CardHeadertitle={el.data.title}subtitle={el.data.author}actAsExpander={el.data.is_self === true}showExpandableButton={false}/><CardText expandable={el.data.is_self === true}>{el.data.selftext}</CardText><CardActions><FlatButton label="View" onClick={() => {window.open(el.data.url);}} /></CardActions></Card>})}<FlatButton onClick={() => this.fetchNext('reactjs', this.state.lastPostName)} label="next" /></div></MuiThemeProvider>);}
}export default App;
接下来,我们需要使用两种方法fetchFirst()
和fetchNext()
来获取Reddit帖子:
fetchFirst(url) {var that = this;if (url) {fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) {return response.json();}).then(function (result) {that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });console.log(that.state.posts);});}} fetchNext(url, lastPostName) {var that = this;if (url) {fetch('https://www.reddit.com/r/' + url + '.json' + '?count=' + 25 + '&after=' + lastPostName).then(function (response) {return response.json();}).then(function (result) {that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name });console.log(that.state.posts);});}}componentWillMount() {this.fetchFirst("reactjs");
}
您可以在GitHub Repository中找到源代码。
在对您的应用运行审核之前,您需要构建并使用本地服务器在本地为您的应用提供服务:
npm run build
该命令调用package.json
的构建脚本,并在react-pwa/build
文件夹中生成一个构建。
现在,您可以使用任何本地服务器来服务您的应用程序。 在Homestead Improvementd上,您只需将nginx虚拟主机指向build文件夹并在浏览器中打开homestead.app
,或者可以通过NodeJS使用serve
软件包:
npm install -g serve
cd build
serve
使用serve
,您的应用程序将从http:// localhost:5000 /在本地提供。
您可以审核您的应用程序而没有任何问题,但是如果您想在移动设备中对其进行测试,则还可以使用surge.sh
服务通过一个命令来部署它!
npm install --global surge
接下来,从任何目录中运行涌流,以将该目录发布到Web上。
您可以从此链接找到此应用的托管版本。
现在,我们打开Chrome DevTools,转到“审核”面板,然后单击“执行审核”。
从报告中我们可以看到, 渐进式Web App的得分为45/100 , 性能为68/100 。
在Progressive Web App下,我们有6个失败的审核和5个通过的审核。 这是因为默认情况下,生成的项目已经添加了一些PWA功能,例如Web清单,视口元数据和<no-script>
标记。
在“ 性能”下,我们有诊断程序和不同的计算指标,例如“第一有意义的油漆”,“第一交互式”,“一致交互式”,“感知速度指数”和“估计输入延迟”。 稍后我们将研究这些。
Lighthouse建议通过减少下载大小或推迟不必要的资源下载来减少关键渲染链的长度,从而提高页面加载性能。
请注意, 性能得分和指标值可以在同一台计算机上的不同审核会话之间更改,因为它们受许多不同条件的影响,例如您当前的网络状态以及您当前的计算机状态。
为什么页面加载性能和速度很重要
根据DoubleClick(一家Google广告公司)的说法,如果加载网页需要3秒钟以上的时间,则将有53%的移动网站访问被放弃 。 通过优化页面加载性能和速度,PWA通过一系列技术和策略为用户提供即时的Web体验,我们接下来将介绍它们。
在开始构建PWA 之前,请考虑性能
大多数客户端应用是使用某种JavaScript库或框架(例如React,Preact,Angular,Vue等)构建的。如果要构建PWA,则需要确保选择移动优先的库,或者换句话说,首先是为移动网络设计的库。 否则,优化应用程序的性能将是一项不可能的任务。
您需要使用不同的测试工具(例如Chrome DevTools,Lighthouse,Google PageSpeed等)在不同的模拟网络条件下对应用程序进行大量测试,以便成功优化应用程序页面加载性能。
您需要关注的PWA性能指标
您可以使用Lighthouse通过不同的指标,诊断和机会来衡量和优化应用程序的页面加载性能。
Lighthouse使用不同的指标。 让我们一一介绍它们:
第一种有意义的涂料
第一有意义的绘画是仅指示用户可以在屏幕上看到有意义或主要内容的时间的度量。 审核次数越少,您的应用感知性能越好。
这是我们应用的指标。
我们看到,从1.3s开始浏览器开始渲染空白背景,然后从2s开始浏览器开始渲染标题,在2.4s开始,标题和底部的按钮都被渲染。 直到第三秒才发布帖子。 整个过程耗时3.4秒,第一个有意义的绘制时间为2.340毫秒 -呈现了没有下一个按钮的标题时。
首先有意义的绘画实际上取决于我们认为有意义的内容,不同用户之间可能会有所不同。 如果用户只对阅读帖子感兴趣,那么对他们来说,第一个有意义的绘画是在3秒标记之后。 您可以从本文档中了解Google如何计算该指标。
这是同一应用程序的另一个幻灯片,在最后一个屏幕截图中,Lighthouse报告FMP为2.560ms ,其中帖子标题完全显示在首屏区域中。
其次,您可以看到页面是逐步呈现的,而不是一次呈现的,这很好地表明了性能。
您可以通过优化关键渲染路径来优化此度量。
关键渲染路径
关键的渲染路径是一个与Web浏览器如何渲染页面有关的概念,即从接收HTML,CSS和JavaScript资产的第一刻到浏览器处理并渲染实际有意义的内容的步骤。 要优化关键渲染路径,您需要赋予与用户当前操作相关的内容更高的优先级。 也就是说,如果他们要访问您的应用程序,则可以首先显示UI的可见部分,即所谓的首屏区域。
有关更多详细信息,您可以阅读“ 优化关键渲染路径 ”。
您还可以看到此清单工具的清单,这些清单用于内联关键CSS资产。 还要检查以下工具以内联JavaScript和其他资产:
- inliner :一个Node实用程序,用于内嵌网页的图像,CSS和JavaScript
- inline-source :用于以HTML格式内嵌标记的JS,CSS和IMG源的工具
- inline-source-cli : 内联源的CLI工具。
关键请求链
关键请求链是与关键渲染路径有关的概念,可以用分解表示关键资源以绘制页面,每个资源花费多少时间以及为每个资源下载多少字节的图表来表示。 您可以使用“关键请求链”图更好地了解关键资源,以消除,延迟或标记为异步。 以下是我们的示例PWA报告的屏幕截图:
现在,我们尝试使用inline-source
和inline-source-cli
解决此问题:
npm install -g inline-source inline-source-cli
然后,我们在build文件夹中导航并打开index.html
,然后将关键字inline添加到要内联的<link>
和<script>
元素中:
<link inline href="/static/css/main.5c745aa1.css" rel="stylesheet">
<script inline type="text/javascript" src="/static/js/main.c35c5a6e.js"></script>
让我们内联这些资源:
cd build
cat ./index.html | inline-source --root ./ > ./index.html
通过内联CSS和JavaScript资产,我们将关键请求链减少到2个。
首次互动和持续互动
这两个指标均指示用户能够与该应用进行交互的时间。 两种指标都表示参与性和可用性,但是它们之间存在差异。 “首次互动”衡量的是页面最少互动的时间,而“ 持续互动”衡量的是页面完全互动的时间。
您可以通过优化关键渲染路径来优化交互时间。
感知速度指数
感知速度指数是一种度量页面的视觉性能的指标,同时考虑了布局稳定性(UI元素没有突然移位)。 它只是指示页面内容的可见填充速度。
PSI是SI或Speed Index度量标准的修改版本,SI或Speed Index度量标准是显示首屏(可见)区域而不考虑视觉稳定性的平均时间。
您还可以通过优化关键渲染路径来优化此指标。
估计输入延迟
估计的输入等待时间是一个指标,它指示主线程何时准备好处理输入。
您可以在此处阅读有关此指标的更多信息以及如何通过它。
到第一个字节的时间(TTFB)
维基百科将TTFB定义为:
到第一字节的时间(TTFB)是一种度量,用于指示Web服务器或其他网络资源的响应能力。 TTFB测量从用户或客户端发出HTTP请求到客户端的浏览器接收到页面的第一个字节的持续时间。
您可以使用WebpageTest和Lighthouse等工具来测量PWA的TTFB。 有关更多信息,请参见此链接 。
现在,让我们看看开发人员用来优化这些指标的一组概念和常用技术。
代码拆分和基于路由的分块
近年来,JavaScript生态系统发生了翻天覆地的变化,诸如WebPack和Browserify之类的模块捆绑器等新工具将所有脚本捆绑到一个文件中。 这被认为是一种好习惯,因为它有助于将对多个脚本文件的网络请求减少到一个请求(用于获取整个捆绑包),从而优化关键的渲染路径(没有长时间阻塞的JavaScript和CSS资产)。 但是问题是,对于大型应用程序,捆绑包的大小会更大,从而导致下载捆绑包,处理捆绑包,然后启动应用程序的过程效率非常低下,从而影响了即时Web体验(增加了首次有意义的时间绘画和UI互动的时间)。
作为此问题的解决方案,不同的应用程序使用代码拆分和基于路由的分块(将代码拆分为仅对每个路由都是必需的块)。 因此,浏览器只需要下载呈现第一个页面/路由所需的第一个块,然后在用户导航其他路由时就懒加载剩余的块。
服务器端渲染
服务器端渲染是在服务器而不是浏览器上渲染初始内容的过程-在许多情况下,由于浏览器可以在下载内容后立即显示内容(纯HTML),因此可以提高页面加载性能。
由于需要下载和启动JavaScript资产,因此仅服务器端渲染对优化用户交互时间没有太大帮助。
PRPL绩效模式
PRPL是一种性能模式,它利用HTTP / 2服务器推送,预加载标头,服务工作程序和延迟加载等概念来提高PWA交付和启动的性能。
PRPL代表:
- P USH关键资源初始URL路径
- ř安德初始路径
- P重新缓存剩余路由
- 大号 AZY负荷和按需创建其余路线。
资料来源:Google Web基础知识
通过缓存优化性能
缓存是将经常请求的数据保存在紧密存储位置的过程。 对于网络,这就是浏览器的内存或数据库。 浏览器实际上具有专门用于缓存网络响应的缓存位置,但是开发人员还可以利用其他存储机制,例如HTML5 Local Storage API和IndexedDB。
您可以缓存应用程序外壳程序(负责呈现UI的资产),数据或理想情况下两者。 缓存UI对于实现即时Web体验至关重要。 但是数据呢?
我们可以在这里考虑两类应用。 仅需要网络连接来使资产负责呈现UI和/或需要它来提供核心功能的应用程序。 例如,考虑一个为用户提供个人核算的应用程序,该应用程序仅取决于算法和计算(本地CPU)。
第二类是依赖远程服务器获取更新信息的应用程序。 您可能想知道为什么要缓存数据,因为它很快就会过时并且用户大多需要更新的信息。 问题是,在世界许多地方,问题不在于网络连接的永久中断,而是网络在缓慢和良好信号之间的波动状态,即使应用程序已经加载,这仍会影响用户体验。
该应用程序可以利用数据缓存(利用Background Sync API)来保证用户在页面之间导航时(即使他们在短时间内离开并回到应用程序中)的服务,方法是持续观看网络状态,然后继续在不中断用户的情况下获取/发送数据。
现在,让我们解决失败的问题以获得更高的分数。
注册服务人员
第一次失败的审核是说该应用程序未注册服务工作者。 在进行更改之前,让我们首先了解服务工作者和相关功能。
服务工作者是一种现代的浏览器技术,可用作客户端代理,允许您的应用程序(通过拦截网络请求)实现缓存以添加诸如即时加载和脱机支持等功能。
服务人员还可以用于实施更新和处理推送通知。
服务人员无法访问页面DOM,但可以通过postMessage()
方法与客户端(Window,Worker或SharedWorker)进行通信。
许多浏览器API可在服务工作者内部使用,例如:
- Fetch API:用于从远程服务器获取内容(发送请求和获取响应)
- 缓存API:用于缓存内容(创建以请求为键的响应的缓存存储)
- 推送API:用于获取推送通知
- Background Sync API:允许Web应用将操作推迟到用户连接稳定之前。
服务人员有许多生命周期事件,需要正确处理。
- 安装事件:当用户首次访问该应用程序并下载并安装服务工作者时,您将获得安装事件
- 激活事件:在调用
.register()
之后触发(在下载和安装事件之后) - 提取事件:如果在服务工作者的范围内或任何请求触发的范围页面内进行导航,则将获取事件。
React项目已经包含一个服务工作者。 我们可以使用它,也可以创建一个新的库,以便更好地了解服务人员的工作方式。
在public
文件夹中,我们创建一个名为service-worker.js
的新文件,然后通过在</body>
之前添加以下代码从public/index.html
文件中注册该文件:
<script>if ('serviceWorker' in navigator) {window.addEventListener('load', function() {navigator.serviceWorker.register('service-worker.js').then(function(registration) {console.log('Service Worker successfully registered');}, function(err) {console.log('Error when registering the Service Worker ', err);}).catch(function(err) {console.log(err)});});} else {console.log('No Support For Service Workers');}</script>
这段代码首先检查浏览器是否支持服务人员,然后侦听页面加载事件。 加载页面后,它将调用navigator.serviceWorker.register
方法来注册public/service-worker.js
。
现在,我们需要创建一个JavaScript文件public/service-worker.js
并添加以下代码来设置缓存:
self.addEventListener('install', function(event) {event.waitUntil(caches.open('react-pwa-v1').then(function(cache) {// The asset-manifest.json contains the names of assets to cachefetch("asset-manifest.json").then(response => {return response.json()}).then(assets => {cache.addAll(["/","https://fonts.googleapis.com/css?family=Roboto:300,400,500",assets["main.js"],assets["main.css"],assets["static/media/logo.svg"]]);})}));});
在service worker安装事件中,我们首先使用caches.open()
方法打开缓存,然后使用fetch()
获取WebPack生成的asset-manifest.json
文件,以将散列的资产映射到其原始名称。 接下来,我们调用cache.addAll()
将这些资产添加到应用程序缓存中:
// Serves the cached response for the corresponding requestself.addEventListener('fetch', function(event) {event.respondWith(caches.match(event.request).then(function(response) {if(response) return response;return fetch(event.request);}));});
此代码通过侦听fetch事件并在应用程序缓存中存在缓存的响应(使用caches.match()
方法)时对其进行响应,从而拦截每个网络请求。 否则,我们通常调用fetch()
来获取资产:
self.addEventListener("activate", event => {event.waitUntil(caches.keys().then(keys =>Promise.all(keys.map(key => {if (key !== 'react-pwa-v1') {return caches.delete(key);}}))));
});
激活该应用后,如果与当前缓存不同,我们将删除旧缓存。
这是用于缓存静态资产的简单服务工作者。 我们还可以使用高级工具来生成服务工作者,例如:
- sw-precache :由Google创建的NodeJS模块,旨在与您的构建系统集成,以生成用于添加离线支持的服务工作者
- sw-toolbox :也由Google创建,旨在为动态缓存提供帮助程序和常用的缓存策略,以帮助您创建自己的服务工作者。
最终结果
如果我们现在对应用程序进行审核,则PWA分数应为91。
该应用程序现在可以提示用户将其安装在设备的主屏幕或架子上。
我们的审核失败,该审核表明我们需要将HTTP流量重定向到HTTPS,但这超出了本文的范围 。 但是,一旦执行此操作,这些就是性能的最终结果:
通过通过JavaScript和CSS内联减少关键请求链 ,我们优化了关键渲染路径 ,这是我们之前看到的大多数性能指标所依赖的。 但是请记住,这个PWA非常简单; 它只有一页,React在设计时考虑了性能。 这就是我们如此之快获得95/100得分的原因。
通过灯塔审核
为了涵盖渐进式Web应用程序的所有核心原则,我还将在Lighthouse报告中解释通过的审核。
HTTPS
由于我们是在本地审核应用程序(来源: http://localhost
),Lighthouse假设它是安全的,因此HTTPS审核被标记为已通过,但是一旦使用实际主机并链接到顶层,就不会发生这种情况。域名,除非您实际拥有SSL证书。 (请注意,仅从安全来源为服务工作者提供服务,本地主机除外)。
您可以使用GitHub Pages托管您的应用程序,从而为您提供HTTPS保护的子域(github.io)。 您还可以将Firebase托管与受保护的子域一起使用,也可以免费使用Surge(surge.sh)(还附带基本的SSL证书)。
如果您决定链接自己的顶级域,则还可以通过Let's Encrypt或Cloudflare获得免费的SSL证书。
对于本课程,我们实际上不需要将应用程序托管在具有HTTPS保护的服务器上,因为Lighthouse在本地测试时会通过此审核。
网络应用清单
Web应用程序清单是一个JSON文件,可提供有关PWA的信息,例如名称,图标和说明等。 它允许用户像本地应用程序一样在主屏幕上安装Web应用程序,而无需通过应用程序商店。
需要使用rel属性设置为manifest的<link>
标记从index.html
文件引用Web应用程序的清单 。
例如,简单生成的React应用程序具有一个public/manifest.json
文件,其内容如下:
{"short_name": "ReeditPWA","name": "Reedit React PWA","icons": [{"src": "icon-192x192.png","sizes": "192x192","type": "image/png"}],"start_url": "./index.html","display": "standalone","theme_color": "#000000","background_color": "#ffffff"
}
从public/index.html
引用:
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
感知性能和启动画面
浏览器以前不支持PWA初始屏幕,因此,当用户从主屏幕图标运行应用程序时,他们通常会经过白屏几秒钟,才能看到实际的应用程序用户界面。 从Chrome 47开始,用户可以看到启动屏幕,该屏幕可以提高感知性能,并使用户从轻按主屏幕图标过渡到应用的第一幅画。
简而言之,感知性能是一种与用户的观点和体验有关的指标,而不是与实际性能/页面加载速度相关的指标-提供有关您的应用对最终用户的实际感觉的信息。
您可以阅读有关性能感知的文章,以了解更多信息。
此初始屏幕是根据Web清单中的信息动态地为您的应用程序构建的,但是(根据Lighthouse),您需要在manifest.json
文件中具有至少512×512大小的图标,才能获得高质量的初始屏幕。
因此,只需准备一个尺寸至少为512×512的图标,然后将以下内容添加到manifest.json
下的manifest.json
:
{"src": "splashscreen-icon-512x512.png","sizes": "512x512","type": "image/png"
}
渐进增强
PWA的核心宗旨之一是渐进增强功能,它是指PWA在不同的浏览器上运行的功能,但只有在受支持的情况下才提供更高级的功能。
您也可以阅读“ JavaScript依赖反弹:神话般的渐进增强 ”,以了解有关渐进增强的更多信息。
渐进增强的一个简单示例是在不支持JavaScript的浏览器中执行应用程序时,或者至少在禁用JavaScript时。 您可以使用HTML <noscript>
标记告诉用户应该启用JavaScript,而不是什么都不显示:
<noscript>
You need to enable JavaScript to run this app.
</noscript>
适用于PWA的Chrome DevTools
Chrome是第一个正式支持PWA的浏览器。 因此,Chrome的DevTools具有出色的PWA调试功能,特别是包含在两个面板(“ 审核”面板和“ 应用程序”面板)中。
在“ 审核”面板下,您可以找到我们之前看到的Lighthouse工具。 在“ 应用程序”面板下,您可以找到许多有用的工具来调试PWA的核心方面,例如:
- Web清单显示器,它显示与PWA相关的Web清单文件,并允许您将应用程序安装在架子上
- Service Worker调试器,它使您可以查看与应用程序一起安装的所有Service Worker,以启动和停止它们并模拟脱机状态
- 存储查看器,可让您查看和清除应用的IndexedDB,LocalStoarge和会话存储
- 缓存查看器,可让您查看和清除使用缓存API创建的应用缓存。
Chrome DevTools,用于模拟网络条件
在世界许多地方,移动设备通过速度较慢且不稳定的网络进行连接,因此,为了提供更好的用户体验和可接受的加载时间,或者更好的是,对于网络速度各异的大量用户而言,它们是即时的Web体验-您需要在可能不同的条件下优化应用程序。 借助Chrome DevTools的“ 网络”面板,您可以仿真多种网络状况,例如慢速3G,快速3G和离线状态,甚至可以使用自己的“ 下载” ,“ 上传”和“ 延迟”参数自定义值创建自定义配置文件。
“网络”面板提供了其他功能,例如禁用缓存,关闭脱机状态以及在加载时间获取应用程序屏幕截图。
禁用缓存和激活脱机状态对于调试PWA尤其有用。
有关更多信息,请查看Google的“ 网络分析参考 ”。
结论
PWA不仅是另一个注重性能的应用程序。 不仅如此! 得益于软件行业的大公司-Google,Microsoft等-他们正在成为多个平台上的一流应用程序。
除了性能优势之外,您也可以将其集成到任何Web应用程序中,即使您不打算构建完全合格的PWA,PWA也可以提供以下功能:
- 利用现代标准和最佳实践为用户提供最佳体验。
- 添加到主屏幕标语,以便提示用户将PWA添加到主屏幕。 当浏览器检测到您的应用正在参与时,就会发生这种情况。 所需参与程度的最简单示例是用户在短时间内再次使用您的PWA时。
- 三星Internet 5.2引入了一种称为环境标志的功能,该功能可在用户查看PWA时向用户发出警报,以便可以将其安装在其主屏幕上。
- Opera for Android还引入了环境标志。
- 从Chrome 59开始,当用户安装您的PWA时,将会创建一个APK并将其安装在该用户的设备上,这意味着您的PWA成为具有
<intent-filter>
的真正的Android应用 ,它告诉Android拦截任何链接上的点击属于您的应用范围,然后打开PWA(而不是Chrome)。 - 微软宣布Edge对PWA的支持即将推出。 不仅如此,在2017年的Edge Web Summit上,微软宣布将PWA引入Windows应用商店,以便它们可以作为来自Windows应用商店和Bing搜索引擎的一流应用程序进行搜索,发现和安装。
希望该速成课程可以帮助您开始使用PWA验证自己的Web应用程序!
From: https://www.sitepoint.com/progressive-web-apps-a-crash-course/
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 学会JavaScript函数式编程(第3部分)
摘要: JS函数式编程入门。 原文:学会使用函数式编程的程序员(第3部分)作者:前端小智Fundebug经授权转载,版权归原作者所有。 本系列的其它篇: 学会使用函数式编程的程序员(第1部分)学会使用函数式编程的程序员(第2部分)引用透明 (…...
2024/4/21 14:11:13 - 四月的十大Java故事:Angular v8,Apache NetBeans v11.0,Java 13及更高版本
在Angular v8的路上 Angular 8越来越近:两个新的候选版本已经到来! 这两个版本仅带来很少的变化。 即将推出的两个主要功能Bazel和Ivy发生了什么? 在这里检查我们的线程。 回顾2019年4月的TIOBE指数 根据2019年4月的TIOBE指数,C…...
2024/4/21 14:11:11 - Spring WebFlux
目录响应式编程Spring WebFlux简介WebFlux使用示例响应式编程 响应式编程(reactive programming)是一种异步编程风格,关注数据流、变化传播。 在命令式编程中,abc赋值,此后b、c的值的改变不会影响到a;在响…...
2024/4/21 14:11:10 - VUE响应式数据原理—19.3.28前端日报
给 前端开发博客 加星标,每天进步一点长按二维码即可识别“进入网页”查看哟~1、【前端进阶基础】VUE响应式数据原理 订阅-发布模式解析vue框架的两个抽象核心:虚拟DOM和相应式数据原理 关于虚拟DOM的核心算法,我们上一章已经基本解析过了&am…...
2024/4/21 14:11:09 - 双眼皮怎么贴眼睛变圆
...
2024/4/21 14:11:08 - 大数据舆情情感分析,如何提取情感并使用什么样的工具?
人工智能大数据与深度学习 公众号: weic2c情感分析是学术领域研究多年的课题,用google学术搜索可以找到很多paper,基本的方法上有基于词典规则的方法、语言文法的方法,此外还有分类器以及近几年比较火的深度学习的方法(稍后有详细介绍)。各类paper是有一定的借鉴意义的,不…...
2024/4/21 14:11:07 - 双眼皮怎么画眼妆图片
...
2024/4/21 14:11:06 - ionic3嵌入html页面,ionic3 在微信中配置路由导航 DeepLinker实现指定页面URL
Ionic3使用了近似原生App的页面导航方式,并不支持Angular5的路由。Ionic3的这种路由方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面,或者微信公众号的时候就有点问题了。比如:在首页是一个Tabs页面的情况下,如何控制…...
2024/4/21 14:11:05 - 双眼皮怎么变宽变深
...
2024/4/21 14:11:04 - 双眼皮有几种割法
...
2024/4/20 15:34:49 - 【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理
系列文章总结 【前端vue——系列1】vue的路由 【前端vue——系列2】vue中的data是函数而不是对象与computed的实现原理 【前端vue——系列3】vue框架的优缺点;vue实现双向绑定 【前端vue——系列4】vuex和angular 【前端vue——系列5】生命周期详讲(vue…...
2024/4/20 15:34:47 - Angular 根据 service 的状态更新 directive
TL;DR 这篇文章讲解了三种根据 service 的状态更新 directive 的做法。分别是 $watch 表达式,事件传递,和 controller 的计算属性。 问题 我有一个 readerService ,其中包含一些状态信息(比如连接状态和电量)。现在我需…...
2024/4/20 15:34:46 - Backbone和Angular的比较
将不同的思想和工具进行对比,是一种更好地理解它们的方式。在本文中,我首先将列举在创建web应用程序时需要重复进行的各项任务,随后为你展现Backbone和Angular将如何帮助你完成这些工作。 我们所尝试解决的问题 作为web开发者来说,…...
2024/4/20 15:34:45 - vue计算属性computed的使用
计算属性computed 描述:在同一个实例化对象中,其中一个属性改变,要求另外一个属性也跟着改变 angular事件监听: $scope.$watch计算属性的使用: computed:{ b:function(){ //默认调用get return 值 } }小例子:<div id&qu…...
2024/4/21 14:11:04 - 双眼皮应该画什么眼线
...
2024/4/20 17:54:04 - 双眼皮一年才恢复好
...
2024/4/21 14:11:01 - 双眼皮一个月了不自然
...
2024/4/21 14:11:01 - angular Ionic CLI组件建立,使用图标,弹窗,按钮,卡片,列表,无尽滚动,刷新
...
2024/4/21 14:10:59 - 双眼皮一个眼尾高
...
2024/4/21 14:10:58 - 双眼皮眼尾吊高了
...
2024/4/21 14:10:58
最新文章
- 网络安全-Diffie Hellman密钥协商
密钥协商是保密通信双方(或更多方)通过公开信道来共同形成密钥的过程。一个密钥协商方案中,密钥的值是某个函数值,其输入量由两个成员(或更多方)来提供。密钥协商的记过是参与协商的双方(或更多…...
2024/4/25 6:43:29 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 【Locust分布式压力测试】
Locust分布式压力测试 https://docs.locust.io/en/stable/running-distributed.html Distributed load generation A single process running Locust can simulate a reasonably high throughput. For a simple test plan and small payloads it can make more than a thousan…...
2024/4/24 5:56:42 - K8S容器空间不足问题分析和解决
如上图,今天测试环境的K8S平台出现了一个问题,其中的一个容器报错:Free disk space below threshold. Available: 3223552 bytes (threshold: 10485760B),意思服务器硬盘空间不够了。这个问题怎么产生的,又怎么解决的呢…...
2024/4/23 6:25:22 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/23 20:58:27 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/23 13:30:22 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/23 13:28:06 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/24 18:16:28 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/23 13:27:44 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/19 11:57:53 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/23 13:29:53 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/23 13:27:22 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/23 13:28:42 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/23 22:01:21 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/23 13:29:23 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/25 0:00:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/25 4:19:21 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/19 11:59:23 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/19 11:59:44 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/25 2:10:52 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/24 16:38:05 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/23 13:28:14 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/23 13:27:51 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/23 13:27:19 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57