vs写第一个python

vs写第一个python

什么是服务人员？ (What is a service worker?)

A service worker is a little file that will allow you to cache files and other assets on a user's machine. How is this different from server-side caching? Because the assets are stored on a user's machine, rather than a server, there is no need to go across a network. This offers a lot of gains for your app's reliability and speed. Since the app is being served from a cache, there's no need to go over the network which can take up a lot of time.

服务人员是一个小文件，可让您在用户计算机上缓存文件和其他资产。 这与服务器端缓存有何不同？ 因为资产存储在用户的计算机上而不是服务器上，所以不需要跨网络访问。 这为您的应用程序的可靠性和速度提供了很多好处。 由于应用是从缓存中提供的，因此无需通过网络，这会占用大量时间。

为什么这对您的应用有帮助 (Why this will help your app)

Adding a service worker will not only help increase the speed of your app, it'll offer a reliability that your users haven't seen before. By removing the immediate need for internet access, we can help anyone with a spotty internet connection -- and really everyone has a spotty internet connection.

添加服务人员不仅有助于提高应用程序的速度，而且还可以提供用户前所未有的可靠性。 通过消除对互联网访问的迫切需求，我们可以帮助互联网连接不畅的任何人-实际上每个人的互联网连接都参差不齐。

生命周期 (Lifecycle)

The service worker lifecycle looks a bit like this:

服务人员的生命周期看起来像这样：

Install

安装 Activate

启用 Fetch

取

Let's look at these events individually.

让我们分别看一下这些事件。

安装 (Install)

Prior to the install event, your application does not have a service worker. The browser will detect the registration event from your code and install the service worker. Your service worker will contain a function called oninstall that will handle which files are cached onto the user's machine.

在安装事件之前，您的应用程序没有服务工作者。 浏览器将从您的代码中检测到注册事件并安装服务工作程序。 您的服务工作者将包含一个名为oninstall的函数，该函数将处理将哪些文件缓存到用户计算机上。

启用 (Activate)

The activate event is fired after the service worker is installed and ready to go. This is a really good place to do clean up on old files and caches that you don't need anymore. However, for this example, we won't do anything with our activate event.

在安装服务工作人员并准备就绪后，将激活事件。 这是清理不再需要的旧文件和缓存的好地方。 但是，在此示例中，我们不会对Activate事件执行任何操作。

取 (Fetch)

This is where our service worker really shines. When a fetch request is made, our service worker will intercept it using a function aptly named fetch. Your service worker can look for a similar fetch request from our cache, or send the request onward.

这就是我们的服务人员真正发亮的地方。 发出提取请求后，我们的服务工作者将使用一个恰当地名为fetch的函数来拦截该请求。 您的服务人员可以从我们的缓存中查找类似的提取请求，也可以继续发送该请求。

The interesting thing about the service worker lifecycle is that activate and fetch don't necessarily run back-to-back. Fetch will only run when there is a fetch event to intercept, so it could be some time between the activate event and a fetch event. During that time the service worker is idle.

关于服务工作者生命周期的有趣之处在于，激活和获取不一定会背靠背运行。 只有在存在要拦截的提取事件时，提取才会运行，因此，在激活事件和提取事件之间可能需要一段时间。 在此期间，服务人员处于空闲状态。

Now that we have a solid understanding of the service worker lifecycle, let's take a look at a sample.

现在我们对服务人员的生命周期有了深刻的了解，下面让我们看一个示例。

样品服务人员 (Sample service worker)

For this example, let's use FayePI. This is a little API I wrote to help women learn to build dynamic websites, and the documentation page uses a very simple service worker.

对于此示例，让我们使用FayePI 。 这是我写的一个小API，旨在帮助女性学习构建动态网站，文档页面使用了非常简单的服务人员。

Before a service worker can ever be installed, we have to add a registration function to our app's code.

在可以安装服务人员之前，我们必须在应用程序的代码中添加注册功能。

// index.js if(navigator.serviceWorker) { navigator.serviceWorker.register('serviceworker.js'); }

That will usually go in your index.js file to be fired when the page is loaded. That's the only reference to your service worker in your app-specific code.

通常，这将在您的index.js文件中加载页面时触发。 那是您的应用程序特定代码中对服务工作者的唯一引用。

Now we'll have a separate file for our service worker.

现在，我们将为我们的服务人员提供一个单独的文件。

// serviceworker.js self.oninstall = function() { caches.open('fayeFrontEndV1').then(function(cache) { cache.addAll([ / ... / ]) .catch( / ... / ); }) .catch( / ... /) }

This is the function that runs when our service worker installs. First, we initialize and open a cache. This is a specific place where the files will be stored on the user's machine.

这是我们的服务工作者安装时运行的功能。 首先，我们初始化并打开一个缓存。 这是文件将存储在用户计算机上的特定位置。

caches.open returns a promise with a reference to the cache we opens. Then we use addAll to pass in an array of strings. These are file paths, and they are added to the cache we created. Lastly we'll add a few catch functions for any error handling we need.

caches.open返回一个带有对我们打开的缓存的引用的promise。 然后，我们使用addAll传入字符串数组。 这些是文件路径，它们被添加到我们创建的缓存中。 最后，我们将为需要的任何错误处理添加一些catch函数。

Next step is activate:

下一步被激活：

// serviceworker.js self.onactivate = function(event) { console.log('sw is up and running!'); }

This can be a good place for clean up, but we'll save that for another blog post.

这可能是清理的好地方，但我们会将其保存在另一篇博客文章中。

We saved the best for last! Let's take a look at fetch.

我们把最好的留在了最后！ 让我们来看看提取。

// serviceworker.js self.onfetch = function(event) { event.respondWith( caches.match(event.request) .then(function(cachedFiles) { if(cachedFiles) { return cachedFiles; } else { return fetch(event.request); } }) ); }

This function will run when the service worker detects a fetch request. This function in all caches attempting to find a matching request. If a matching request is found, the function returns that request. Otherwise the service worker will go ahead and go over the network with the request.

当服务工作者检测到提取请求时，将运行此功能。 在尝试查找匹配请求的所有缓存中，此功能均可用 。 如果找到匹配的请求，该函数将返回该请求。 否则，服务人员将继续处理请求并通过网络。

Let's take a closer look at event.respondWith and caches.match, both of which are pretty service worker specific.

让我们仔细看看event.respondWith和caches.match ，它们都是特定于服务工作者的。

event.respondWith is a function which allows you to intercept a fetch request and give your own response instead. It's important to use this function instead of simply returning a response because this is what allows your intercepted response to be sent to the correct place.

event.respondWith是一个函数，可让您拦截获取请求并给出自己的响应。 使用此函数而不是简单地返回响应很重要，因为这可以将您拦截的响应发送到正确的位置。

caches.match is a function that allows us to search through CacheStorage and find a match for our request. When we add something to our cache, it'll be stored in a stack, with the oldest additions at the bottom and the newest at the top. caches.match will find the newest match and return that. If it doesn't find a match at all, it'll return null.

caches.match是一项允许我们搜索CacheStorage并找到与我们的请求匹配的函数。 当我们将某些内容添加到缓存中时，它将存储在堆栈中，最旧的添加项在底部，最新的添加项在顶部。 caches.match将找到最新的匹配并返回。 如果根本找不到匹配项，则返回null 。

And that's it! That's everything you need for a simple starter service worker! If you think service workers are super cool, I'd recommend seeing what else they can do, including background fetch, in this blog post.

就是这样！ 这是一个简单的入门服务人员所需的一切！ 如果您认为服务人员超酷，建议您在此博客文章中看看他们还能做些什么，包括后台获取。

If you want to learn more about service workers, I hope you'll head over to serviceworkerbook.com and sign up for my mailing list, and follow me on Twitter! You'll be the first to know when my book, 'Let's Take This Offline' is out!

如果您想了解有关服务人员的更多信息，希望您能访问serviceworkerbook.com并注册我的邮件列表，然后在Twitter上关注我！ 您将是第一个知道我的书“让我们脱机”的人！

翻译自: https://davidwalsh.name/write-your-first-service-worker-in-5-minutes

vs写第一个python