angular 模块构建_如何使用Angular和服务人员构建无需Internet即可运行的网站

angular 模块构建

by Tomiwa

通过Tomiwa

如何使用Angular和服务人员构建无需Internet即可运行的网站 (How to build websites that work without internet using Angular & service workers)

介绍 (Introduction)

In this article, you will learn the theory of how service workers work. I provide a short tutorial to apply that theory to make a website that runs without the internet. Finally, I’ll discuss what this means for you and the future of the internet.

在本文中，您将学习服务人员如何工作的理论。 我提供了一个简短的教程，以应用该理论建立一个无需互联网即可运行的网站。 最后，我将讨论这对您和互联网的未来意味着什么。

I get excited when talking about service workers. I am going to go on a quick rant on the problem this solves and why this is awesome. Then I dive into the theory of how service workers work and why it is awesome. If you want to jump straight to the theory or the tutorial, go to the sections starting with titles Theory and Application for the code.

当谈到服务人员时，我很兴奋。 我将就解决的问题以及为什么如此出色进行快速调查。 然后，我将深入探讨服务人员的工作原理以及为何如此出色。 如果您想直接跳到理论或教程，请转至以“ 理论和应用”标题开头的部分。

This blog post is also available as:

该博客文章也可通过以下方式获得：

• Youtube Video

  YouTube视频

• Slide deck

  滑板

• Podcast

  播客

目录 (Table of Contents)

• Websites are Strange
  网站很奇怪
• Theory: How Servicer Workers Work
  理论：服务人员的工作方式
• Application: Tutorial on How to Build Offline Websites
  应用程序：有关如何构建脱机网站的教程
• Prerequisites
  先决条件
• Installing the Service Worker
  安装服务人员
• Part 1a: Build The Service Worker
  第1a部分：建立服务工作者
• Service Worker Output
  服务人员输出
• Part 1b: Testing The Service Worker (#2001441)
  第1b部分：测试服务工作者(＃2001441)
• Creating A Mini Server
  创建一个迷你服务器
• Inspecting the Server Requests
  检查服务器请求
• Where are the Files Being Saved?
  文件保存在哪里？
• Part 2: Saving External Data (Part 1 Git Tag: pwa-tutorial-0.1 )
  第2部分：保存外部数据(第1部分Git标签：pwa-tutorial-0.1)
• Saving External API calls: #8593ada
  保存外部API调用：＃8593ada
• Part 3: Notify Users of New Updates (Part 2 Git Tag: pwa-tutorial-0.2)
  第3部分：通知用户新更新(第2部分Git标签：pwa-tutorial-0.2)
• Part 4: Deployment (Part 3 Git Tag: pwa-tutorial-0.3)
  第4部分：部署(第3部分Git标签：pwa-tutorial-0.3)
• Conclusion
  结论
• Who Needs Mobile Apps
  谁需要移动应用
• The Future of Websites
  网站的未来
• Further Reading
  进一步阅读

网站很奇怪 (Websites are Strange)

I realized something recently that made me truly realize how powerful service workers can be. When I have internet, it feels like there are infinitely many things competing for my attention.

最近我意识到，使我真正意识到服务人员的能力将是多么强大。 当我拥有互联网时，感觉就像有无数事物在吸引我的注意力。

But when I am on a plane for example, and there is no internet connection, the competition for my attention is much less fierce. The three things I can usually do is look through my photos, watch a downloaded movie or read an ebook.

但是，例如，当我在飞机上且没有互联网连接时，引起我注意的竞争就不会那么激烈。 我通常可以做的三件事是浏览照片，观看下载的电影或阅读电子书。

With service-workers, if you are able to deliver an offline web experience for your users, you are able to get their attention in one of those few moments when the competition for it is least fierce.

使用服务人员，如果您能够为用户提供脱机的Web体验，则您可以在竞争最激烈的那一瞬间获得他们的关注。

Let’s start with a simple diagram. What do the two circles in this Venn diagram represent?

让我们从一个简单的图开始。 该维恩图中的两个圆圈代表什么？

Let me give you a hint. Amazon, Alibaba, and Facebook are some of the world’s biggest websites, servicing millions of users every day. Here are some stats to put things in context for you:

让我给你一个提示。 亚马逊，阿里巴巴和Facebook是世界上最大的网站，每天为数百万用户提供服务。 以下是一些统计数据，可为您提供相关信息：

• Alibaba $25 billion in sales in one day (singles day)

  阿里巴巴一天内(一天)的销售额达到250亿美元

• 40% of cloud computing clients use Amazon Web Services Including Apple, Netflix, and CIA

  40％的云计算客户使用包括苹果 ，Netflix和CIA在内的Amazon Web Services

• 2.2 Billion people use Facebook every month, 700 million on Instagram

  每月有22亿人使用Facebook，Instagram上有7 亿人

This is all well and good but there’s just one small problem. Without wifi, their entire websites are completely unusable. Even if you just want to do simple tasks like look at product reviews for items that are already in your shopping cart, you can’t do anything.

这一切都很好，但是只有一个小问题。 没有wifi，他们的整个网站将完全无法使用。 即使您只想执行简单的任务，例如查看购物车中已有商品的产品评论，也无法做任何事情。

Now compare that to sites like Google Drive or Atila.ca. Atila.ca doesn’t have a million users but even when you have no internet connection, you can still use the site. Google Drive is another website that does this well. You can actually use Google Drive even without internet. Like how you would use a desktop app like Microsoft Word. Learn something new everyday right?

现在将其与Google Drive或Atila.ca之类的网站进行比较。 Atila.ca没有一百万用户，但是即使您没有互联网连接，您仍然可以使用该网站。 Google云端硬盘是另一个做得很好的网站。 即使没有互联网，您实际上也可以使用Google云端硬盘。 就像您如何使用Microsoft Word这样的桌面应用程序一样。 每天学习新东西吧？

In the past, it almost seemed like a truism that websites would not work without the internet. Once you realize the potential of service workers, you completely change your perspective on how you think about websites. You begin to imagine the significant user experience improvements we can have on our favorite sites.

过去，如果没有互联网，网站将无法正常运行，这似乎是不言而喻的。 一旦意识到服务人员的潜力，就可以完全改变对网站的看法。 您开始想象我们可以在我们喜欢的网站上获得重大的用户体验改善。

Imagine if you are on the subway commuting to work with no internet. You do not even have any cell phone service. But you could still review the product reviews of the items in your Amazon shopping cart. Or you’re on a long plane ride. While your phone is in airplane mode you can read the most popular articles from The New York Times. Or your favorite articles in a list that you chose to save for later.

想象一下，如果您在地铁上通勤而没有互联网。 您甚至没有任何手机服务。 但是您仍然可以查看亚马逊购物车中商品的商品评论。 或者您正在乘坐长途飞机。 当手机处于飞行模式时，您可以阅读《纽约时报》上最受欢迎的文章。 或您喜欢的文章，然后选择保存以供以后保存。

You can see that the potential is great and it easy to start daydreaming. Let’s get back to reality and dig into the theory of how this is all possible.

您会看到潜力很大，并且很容易开始做白日梦。 让我们回到现实，并深入探讨一切皆有可能的理论。

理论：服务人员的工作方式 (Theory: How Servicer Workers Work)

A service worker is a proxy or messenger between your browser and the internet. When your web app asks for resources (images, html files, json API etc.) the servic