渐进式web应用程序
by Ondrej Chrastina
通过Ondrej Chrastina
如何调整渐进式Web应用程序以获得完美的审核分数 (How to tune up your Progressive Web App to get a perfect audit score)
Progressive Web Apps (PWAs) quickly became the hottest development platform during the last year. Let’s take a look at what you need to do to adhere to the PWA standards.
渐进式Web应用程序(PWA)在去年Swift成为最热门的开发平台。 让我们看看要遵守PWA标准需要做什么。
Articles about the PWA concept are all over the place. I will focus on the actual steps that need to be done to have the PWA fully aligned to the specification. I will provide a GitHub link with the list of changes for each step I performed to allow you to easily try it yourself.
有关PWA概念的文章无处不在。 我将重点介绍使PWA完全符合规范所需执行的实际步骤。 我将提供一个GitHub链接，其中包含我执行的每个步骤的更改列表，以便您自己轻松尝试。
先决条件 (Prerequisites)
node.js v8+
node.js v8 +
Google Chrome browser v60+
Google Chrome浏览器v60 +
I will start with that simple Angular application I used for showcasing the combination of Angular and PWA approach in my previous article. I have upgraded it to Angular v6 and Kentico Cloud SDK v4.
我将以我在上一篇文章中展示Angular和PWA方法结合的简单Angular应用程序开始。 我已经将其升级到Angular v6和Kentico Cloud SDK v4 。
This application is a simple listing of interesting places stored in a headless CMS loaded by the SDK. The app already has these two perks that make it a PWA app:
此应用程序简单列出了有趣的地方，这些地方存储在由SDK加载的无头CMS中。 该应用程序已经具有这两个特权，使其成为PWA应用程序：
manifest.jsonwith a set of icons used when the app is installed in the system.该应用程序安装在系统中时，
manifest.json带有一组图标。- service worker implementation used for caching of the application skeleton (called the app shell) and the data from the headless CMS. 服务工作者实现，用于缓存应用程序框架(称为应用程序外壳)和来自无头CMS的数据。
Although the app is ready to be installed and used, it still needs a few touches to meet the PWA specification.
尽管已准备好安装和使用该应用程序， 但仍需要一些操作才能满足PWA规范 。
如何通过PWA检查表 (How to get through the PWA checklist)
To verify whether the app meets all the criteria defined by the Google checklist, one can use various tools these days. The most popular is called Lighthouse.
为了验证该应用程序是否满足Google清单定义的所有条件， 如今人们可以使用各种工具。 最受欢迎的是灯塔 。
Lighthouse is already embedded into the Google Chrome browser developer tools on the audit tab. To run it, I recommend that you publish the production variant of the app on the internet, and perform the audit from there.
Lighthouse已嵌入在“ 审核”选项卡上的Google Chrome浏览器开发人员工具中 。 要运行它，我建议您在Internet上发布该应用的生产版本，然后从那里进行审核。
To achieve this, just download the app in the “initial state” and then run the following commands.
为此，只需以“初始状态”下载该应用程序，然后运行以下命令。
For deployment, I am using surge.You just have to register and install the CLI tools. Then, you're able to deploy the folder into a *.source.sh sub-domain.
对于部署，我使用的是电涌 。您只需注册并安装CLI工具。 然后，您可以将文件夹部署到* .source.sh子域中。
npm installnpm installnpm run buildto build the application in production mode into the/distfoldernpm run build以生产模式将应用程序npm run build到/dist文件夹中npm install -g surgeto install surge CLI globallynpm install -g surge振在全球范围内安装喘振CLIsurge /dist your-own-subdomain.surge.shdeploy “dist” folder to the specified URL. This requires you to either log in or set the surge environment variables with the login and token.surge /dist your-own-subdomain.surge.sh将“ dist”文件夹部署到指定的URL。 这要求您登录或使用登录名和令牌设置喘振环境变量 。
Then, just navigate to the app in the Chrome browser. Go to “Developer Tools” > “Audits” > “Perform an audit” > select “Progressive Web App” > “Run audit”. You’ll see the following results.
然后，只需在Chrome浏览器中导航到该应用即可。 转到“开发人员工具”>“审计”>“执行审计”>选择“ Progressive Web App”>“运行审计”。 您会看到以下结果。
As you could see, eight checks already passed.
如您所见，已经通过了八项检查。
Now, let’s inspect the PWA checklist.
现在，让我们检查一下PWA清单。
PWA清单 (PWA checklist)
没有JavaScript时的后备 (Fallback when no JavaScript is available)
All you have to do to remove this message is to provide some message for non-JavaScript browsers. The noscript tag is an ideal way to do that. Just add the following HTML code to the body of index.html.
删除此消息所需要做的就是为非JavaScript浏览器提供一些消息。 noscript标记是实现此目的的理想方法。 只需将以下HTML代码添加到index.html的主体即可。
...<noscript> This page requires you to have the Javascript enabled.</noscript>...地址栏与品牌颜色不匹配 (Address bar does not match brand colors)
This warning tells you that you should specify the basic thematic color for the address bar. All you need is just an HTML meta tag in the head section of the page. I’ve chosen the same color that’s used for the top toolbar.
此警告告诉您应为地址栏指定基本主题颜色。 您所需要的只是页面顶部的HTML meta标签。 我选择了与顶部工具栏相同的颜色。
<html><head>...<meta name="theme-color" content="#1e88e5">...</head>...HTTP通信不会自动重定向到HTTPS (HTTP traffic is not automatically redirected to HTTPS)
This is just about deployment configuration. To achieve automatic https enforcement just use “https://” before the domain you want to deploy the app to.
这只是关于部署配置。 要实现自动执行https，只需在要将应用程序部署到的域之前使用“ https：//”即可。
surge /dist https://your-own-subdomain.surge.shsurge /dist https:// your-own-subdomain.surge.sh
Now you are ready to perform the audit again.
现在您可以再次执行审核了。
npm run buildnpm run buildsurge /dist https://your-own-subdomain.surge.shsurge /dist https:// your-own-subdomain.surge.sh
Yippee!
pp！
You’ve passed all the automatic checks. Now, you might have noticed that there were manual steps outlined in the report:
您已通过所有自动检查。 现在，您可能已经注意到报告中概述了手动步骤：
- Site works cross-browser 跨浏览器的网站作品
- Page transitions don’t feel like they block on the network. Every time you tap a link/button, the app should be transitioning immediately or displaying a loading indicator while the app waits for a response from the network. 页面过渡不会像它们在网络上那样阻塞。 每次您点击链接/按钮时，应用程序都应立即转换或在等待网络响应时显示加载指示。
- Each page should have a URL — we should be able to create URLs for sharing. This is mainly meant to be applied for single-page-apps to ensure the client-side router is able to re-construct the app state from a given URL. 每个页面都应该有一个URL-我们应该能够创建用于共享的URL。 这主要用于单页面应用程序，以确保客户端路由器能够从给定的URL重建应用程序状态。
奖金-Angular中更快的首次加载 (Bonus - quicker first load in Angular)
Do you plan on making your app really big? Do you want it to render its app shell immediately while having all Angular components loaded in the background? In fact, with bigger apps, you might get a warning in the report saying that the first load takes too much time.
您是否打算使您的应用程序真正变大？ 您是否要在后台加载所有Angular组件时立即渲染其应用程序外壳？ 实际上，对于更大的应用程序，您可能会在报告中得到警告，提示第一次加载会花费太多时间。
To make things fast, just add a static HTML code into the root Angular component file. This HTML will be shown during initialization. In the commit link below, you can see that I’ve also thrown in a few static styles to make things render in one go.
为了快速处理，只需将静态HTML代码添加到Angular根组件文件中即可。 该HTML将在初始化期间显示。 在下面的提交链接中，您可以看到我还抛出了一些静态样式来使事物一口气渲染。
..<app-root> <header class="static" style="width: 100%; height: 56px; color: #fff; background: #1e88e5; position: fixed; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 2px 9px 1px rgba(0, 0, 0, .12), 0 4px 2px -2px rgba(0, 0, 0, .2); padding-left: 16px; margin: auto; z-index: 10000;"> <h2 style="font-size: 20px;">Pack and Go</h2> </header> <main style="padding-top: 60px; flex: 1; overflow-x: hidden; overflow-y: auto;"></main></app-root>...Below you can see the result when tested with the “Slow 3G” connection setting in place.
在适当的“慢速3G”连接设置下进行测试时，您可以在下面看到结果。
收线 (Closing lines)
All right, we’re done! If you strive for an ultra-modern PWA app built on top of a robust framework, now you have it.
好吧，我们完成了！ 如果您想要在强大的框架之上构建超现代的PWA应用程序，现在就拥有了。
The app runs on the latest version of Angular, and is backed by a fast and headless Kentico Cloud CMS. It meets all the requirements of the Lighthouse audit tool made by Google.
该应用程序在Angular的最新版本上运行，并具有快速， 无头的Kentico Cloud CMS支持 。 它符合Google提供的Lighthouse审核工具的所有要求。
If you’re interested in seeing how to incorporate the Lighthouse checks into your continuous integration ecosystem, just reach out to me over Twitter!
如果您有兴趣了解如何将Lighthouse检查整合到您的持续集成生态系统中，请通过Twitter与我联系！
渐进式web应用程序
扫一扫
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
