渐进式app_如何编写渐进式Web App新闻网站

最新推荐文章于 2024-06-13 10:02:45 发布

cumi6497

最新推荐文章于 2024-06-13 10:02:45 发布

阅读量198

点赞数

文章标签： java python vue mysql 人工智能 ViewUI

原文链接：https://www.freecodecamp.org/news/coding-a-newspaper-as-a-freakin-progressive-web-app-e456d4a2b9cd/

版权

渐进式app

For the last two weeks, I worked on a personal project called The Global Upvote. The Global Upvote aggregates top voted stories from across the web, summarized and updated every sixty seconds.

在过去的两个星期中，我从事了一个名为The Global Upvote的个人项目。 Global Upvote汇总来自网络的投票最多的故事，每60秒进行汇总和更新。

This article focuses on how I was able to implement The Global Upvote for aspiring developers. I wrote a separate article about design process behind this. These two stories may seem completely separate. But the design and development process was deeply intertwined in real life.

本文重点介绍如何为有抱负的开发人员实施The Global Upvote。我为此撰写了另一篇有关设计过程的文章。这两个故事似乎完全分开。但是设计和开发过程在现实生活中深深地交织在一起。

Note that I’ve written a sister article about how to design this Progressive Web App news website here.

请注意，我已经写了有关如何设计这种渐进的Web App的新闻网站一姐的文章在这里。

查找数据 (Finding the Data)

In design, there is a concept of content-first. Content-First Design says you need to design around the content. For me to do that, I needed to ensure I could grab the correct data. Before I started on any of the actual front-end work, I worked with the Reddit API and my Node server.

在设计中，有一个内容优先的概念。内容优先设计要求您围绕内容进行设计。为此，我需要确保可以获取正确的数据。在开始任何实际的前端工作之前，我曾使用Reddit API和我的Node服务器。

I knew there were two parts of content I wanted to capture from Reddit:

我知道我想从Reddit捕获内容的两个部分：

The top posts of r/WorldNews for their headlines
r / WorldNews的头条新闻
A bot user’s comment that summarized the story
机器人用户对故事的总结

Luckily, there was a great Node wrapper for the API called Snoowrap. It was easy to use and had me getting content in no time.

幸运的是，API有一个很棒的Node包装器，称为Snoowrap 。它易于使用，让我很快就能获得内容。

One big thing I learned on this project was request management. In the past, I had used my Node server as a API requester every time a user would visit my app. But, I had an obvious epiphany.

我在这个项目上学到的一大件事是请求管理。过去，每次用户访问我的应用程序时，我都将Node服务器用作API请求者。但是，我有一个明显的顿悟。

I could hold on to the small amount of data (stories) on my server and update it once a minute with a simple setInterval. This stopped pushing the risk of abusing my Reddit API limits and shortened story load times because I would not have to ping the Reddit API every time.

我可以保留服务器上的少量数据(故事)，并通过简单的setInterval每分钟更新一次。这不再增加滥用Reddit API限制的风险，并缩短了故事加载时间，因为我不必每次都ping Reddit API。

保持进步 (Keeping It Progressive)

Wanna know the cheap, dirty secret about making a progressive web app in React? Just use Create-React-App. The contributors on that project have done a wonderful job of adding service workers for near-instant loads and a manifest file for your meta data, and optimizing the Webpack bundling the best they can. In the past, I had to do a lot of work for PWAs ( Progressive Web Apps) and even wrote a tutorial on perfecting them.

想知道在React中制作渐进式Web应用程序便宜又肮脏的秘密吗？只需使用Create-React-App即可。该项目的贡献者做了出色的工作，添加了用于即时加载的服务工作者和用于元数据的清单文件，并尽最大可能优化了Webpack捆绑。过去，我不得不为PWA(渐进式Web应用程序)做很多工作，甚至撰写了有关完善PWA的教程。

This was the first time I worked on an offline-friendly mode for Chrome and Firefox to do stuff like read articles before my computer connected to wifi.

这是我第一次在Chrome和Firefox的离线友好模式下工作，以便在计算机连接到wifi之前进行阅读文章之类的工作。

The first half was to do things whenever the internet connection changed using event listeners. That way, a new connection to the internet could trigger fetching stories, and a lost connection could notify the user they are offline.

上半部分是每当互联网连接使用事件侦听器更改时执行的操作。这样，与互联网的新连接可能会触发获取故事，而丢失的连接可能会通知用户他们处于离线状态。

The second half of offline-mode was saving new stories to the user’s device every time they were fetched. This was my first time using LocalStorage, and I was pleasantly surprised by how easy it was.

离线模式的后半部分是每次将新故事保存到用户的设备时，都会将它们保存到设备中。这是我第一次使用LocalStorage ，它是如此的容易让我感到惊喜。

A last bit of the PWA to get done was improving the perceptual speed index. You can see this user-centric metric by opening Chrome DevTools and running an audit. To improve this score, I made skeletons that would appear when my app’s state was fetching.

完成PWA的最后一步是提高感知速度指数。您可以通过打开Chrome DevTools并运行审核来查看以用户为中心的指标。为了提高该分数，我制作了一些骨架，这些骨架会在我的应用程序状态为时出现。

插入插件 (Plugging a Plugin)

I had determined that I wanted the user to be able to save the experience as their new tab for Chrome and Firefox. The browsers natively support setting a home page. But that does not give you control of the URL bar immediately. This was an important detail because a user does not want to have to click the URL bar every time they open a new tab.

我确定我希望用户能够将体验保存为他们的Chrome和Firefox新标签。浏览器本身支持设置主页。但这不能让您立即控制URL栏。这是一个重要的细节，因为用户不需要每次打开新选项卡时都必须单击URL栏。

I feared that I was about to dive into the deep-end of browser extension development. This was something I was not familiar with besides a grid checker to help my visual skills. Once again, this solution ended up being handed to me on a silver platter. Google includes a similar extension in their sample downloads. I was working in no time with the Global Upvote Tab Extension. No changes were even needed for the submission to Firefox’s store!

我担心自己将要深入浏览器扩展的开发。除了帮助检查我的视觉技能的网格检查器之外，这是我不熟悉的。再一次，这个解决方案最终被交给了我。 Google在其样本下载中包含了类似的扩展名。我很快就使用了Global Upvote Tab Extension 。甚至不需要更改即可提交到Firefox的商店！

最终结果 (The Final Outcome)

From a development standpoint, I loved all the different solutions I could put together for The Global Upvote. These solutions tell me that the web community is getting better at working together to make development experience less frustrating. Acing the Chrome DevTools Audit, formerly the Google Lighthouse Extension has also gotten the easiest it has ever been.

从开发的角度来看，我喜欢为The Global Upvote可以组合的所有不同解决方案。这些解决方案告诉我，Web社区在协作方面变得越来越好，可以减少开发经验。通过Chrome DevTools审核，以前的Google Lighthouse Extension也变得前所未有的简单。

All source code has been open-sourced in case you want to dig around or make it work for you.

所有源代码都是开源的，以备您深入研究或使其适用于您。

Several quick things to note:

需要注意的几件事：

Where are the CSS files?!
CSS文件在哪里？

There are none. I use
没有了。我用

Styled Components to attach styles directly to their component!
带样式的组件可将样式直接附加到其组件！

Check out this talk I gave at IBM about why CSS-in-JS is insanely good:
看看我在IBM上发表的关于CSS-in-JS为何如此出色的演讲：

https://vimeo.com/230614037
https://vimeo.com/230614037
Where is the source code for your tab extension?
标签扩展名的源代码在哪里？

Check it out in the separate repo for
在单独的仓库中查看

Global Upvote Tab.
全局更新选项卡。
How do I get started running this locally?
我如何开始在本地运行它？

Check out the documentation for
查看有关的文档

Create-React-App if you haven’t already.
如果还没有Create-React-App 。

Much wow. You also need a file called
好厉害您还需要一个名为

keys.json in the root directory with your information for Snoowrap. It should look like this:
keys.json在根目录与您的信息Snoowrap 。它看起来应该像这样：

{
  "userAgent": "random-term",
  "clientId": "FromYourRedditAPISettings",
  "clientSecret": "FromYourRedditAPISettings",
  "username": "YourRedditUsername",
  "password": "YourRedditPassword"
}

I hope you enjoyed this case write-up!

希望您喜欢这个案例！

Again, I’ve written a sister article about how to design this Progressive Web App news website here.

再次，我已经写了有关如何设计这种渐进的Web App的新闻网站一姐的文章在这里。

For further information: Feel free to contact me by the comments, email, or @seejamescode. I work in ATX for IBM Design and always love conversation with the web design community. Leave any questions you may have and I will try to answer them for you!

有关更多信息：请通过评论，电子邮件或@seejamescode与我联系。我在ATX for IBM Design工作，并且一直喜欢与Web设计社区进行对话。留下您可能有的任何问题，我会尽力为您解答！