小程序动画从头开始_渐进式Web应用程序102：从头开始构建渐进式Web应用程序-基礎知識庫-匯編語言學習筆記

小程序动画从头开始_渐进式Web应用程序102：从头开始构建渐进式Web应用程序

2023-09-06 阅读 18 评论 0

摘要：小程序动画从头开始We learnt about what is a Progressive Web App (PWA) in part 1. In this part, we are going to build a progressive web app using no frameworks but just DOM manipulation. 我们在第1部分中了解了什么是渐进式Web应用程序(PWA) 。在这一部分中ÿ

小程序动画从头开始

We learnt about what is a Progressive Web App (PWA) in part 1. In this part, we are going to build a progressive web app using no frameworks but just DOM manipulation.

我们在第1部分中了解了什么是渐进式Web应用程序(PWA) 。在这一部分中，我们将不使用框架而是仅使用DOM操作来构建渐进式Web应用程序。

Let’s do a quick recap of what we have learnt so far. For an app to be progressive, it needs to have the following requirements:

让我们快速回顾一下到目前为止所学到的知识。为了使应用程序逐步发展，它需要满足以下要求：

a manifest file — manifest.json
清单文件— manifest.json
service worker with at least a fetch event — serviceworker.js
至少具有fetch事件的服务工作者— serviceworker.js
icon — icon.jpeg
图标— icon.jpeg
served over HTTPS — https://www.myawesomesite.com
通过HTTPS服务— https://www.myawesomesite.com

In this tutorial, I will be talking about requirements 1 and 2 — creating a manifest file and registering a service worker.

在本教程中，我将讨论需求1和2-创建清单文件并注册服务工作者。

目的 (Objective)

For this example, we are going to create a simple progressive web app. The complexity is kept intentionally simple so that we can focus on the concepts of a progressive web app. You should be able to take these concepts and apply them in your own Angular, React, Vue or vanilla JavaScript app.

对于此示例，我们将创建一个简单的渐进式Web应用程序。故意使复杂性保持简单，以便我们可以专注于渐进式Web应用程序的概念。您应该能够采用这些概念并将其应用到您自己的Angular，React，Vue或Vanilla JavaScript应用中。

We are going to create a meme engine. We will pull the latest trending memes from giphy.com and display them in our app. A user should be able to view the images even if the connection is down. Hence, we are providing a seamless offline experience.

我们将创建一个模因引擎。我们将从giphy.com提取最新趋势的模因，并在我们的应用程序中显示它们。即使连接断开，用户也应该能够查看图像。因此，我们提供了无缝的离线体验。

Great! So now let's get to the important stuff.

大！现在让我们来了解重要的内容。

步骤0：建立应用程式 (Step 0: Build the app)

Let’s start with a skeleton index.html:

让我们从一个骨架index.html开始：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>All the memes!</title><link rel="stylesheet" href="/styles.css">
</head>
<body>
<header><h1 class="center">Top trending memes today</h1>
</header>
<main><div class="container"></div>
</main>
<script src="app.js"></script></body>
</html>

As you can see, it is a simple index.html that only prints out the text Top trending memes today. Nothing fancy.

如您所见，这是一个简单的index.html ，仅打印出Top trending memes today文本。没有什么花哨。

Next, let’s add an ability to fetch trending memes from giphy.com. Here is what the fetch function looks like:

接下来，让我们添加一种从giphy.com获取趋势模因的giphy.com 。这是fetch函数的样子：

async function fetchTrending() {const res = await fetch(`https://api.giphy.com/v1/gifs/trending?api_key=${apiKey}&limit=25`);const json = await res.json();main.innerHTML = json.data.map(createMeme).join('\n');
}

让我们不断进步 (Let’s make it progressive)

步骤1：清单文件 (Step 1: Manifest file)

As you may recall from part 1, the manifest file is a json file. It has meta information about the app like icon name, background color, the name of the app, etc. Here is a manifest.json file with these parameters:

您可能在第1部分中回忆过，清单文件是一个json文件。它具有有关应用程序的元信息，例如图标名称，背景色，应用程序名称等。这是带有以下参数的manifest.json文件：

{"name": "Meme","short_name": "Meme","icons": [{"src": "images/icons/icon-128x128.png","sizes": "128x128","type": "image/png"}, {"src": "images/icons/icon-144x144.png","sizes": "144x144","type": "image/png"}, {"src": "images/icons/icon-152x152.png","sizes": "152x152","type": "image/png"}, {"src": "images/icons/icon-192x192.png","sizes": "192x192","type": "image/png"}, {"src": "images/icons/icon-256x256.png","sizes": "256x256","type": "image/png"}],"start_url": "/index.html","display": "standalone","background_color": "#3E4EB8","theme_color": "#2F3BA2"
}

You can also use a tool to generate this. Here is a tool that I found useful:

您也可以使用工具生成此信息。这是我发现有用的工具：

Adding it to our app is simple. Add the following line to index.html :

将其添加到我们的应用程序很简单。 index.html下行添加到index.html ：

<link rel="manifest" href="/manifest.json">

步骤2：服务人员 (Step 2: Service Worker)

Let’s create the file serviceworker.js . First, we are going to register the service worker on install. Then we will cache some static assets such as styles.css and app.js. Next, we need to provide offline capability using fetch . Here is what the serviceWorker.js looks like:

让我们创建文件serviceworker.js 。首先，我们将在安装时注册服务工作者。然后，我们将缓存一些静态资产，例如styles.css和app.js. 接下来，我们需要使用fetch提供脱机功能。这是serviceWorker.js样子：

const staticAssets = ['./','./styles.css','./app.js'
];self.addEventListener('install', async event => {const cache = await caches.open('static-meme');cache.addAll(staticAssets);
});self.addEventListener('fetch', event => {const {request} = event;const url = new URL(request.url);if(url.origin === location.origin) {event.respondWith(cacheData(request));} else {event.respondWith(networkFirst(request));}});async function cacheData(request) {const cachedResponse = await caches.match(request);return cachedResponse || fetch(request);
}async function networkFirst(request) {const cache = await caches.open('dynamic-meme');try {const response = await fetch(request);cache.put(request, response.clone());return response;} catch (error){return await cache.match(request);}}

Let’s break this down. A service worker will help us cache data and fetch resources. If we have data in our cache, we return the data from cache or else fetch it from the network. For your own app, think of what functionality you will need to provide for offline access. Then, cache resources accordingly. For my case, I want to show previously cached images when the network is down.

让我们分解一下。服务人员将帮助我们缓存数据和获取资源。如果缓存中有数据，则从缓存中返回数据，或者从网络中获取数据。对于您自己的应用程序，请考虑需要为脱机访问提供哪些功能。然后，相应地缓存资源。就我而言，我想在网络中断时显示以前缓存的图像。

We will need to add this to our index.html. To add it, we will register the service worker by leveraging the browser’s navigator library:

我们需要将其添加到我们的index.html中。要添加它，我们将利用浏览器的导航器库注册服务工作者：

window.addEventListener('load', async e => {await fetchTrending();if ('serviceWorker' in navigator) {try {navigator.serviceWorker.register('serviceWorker.js');console.log('SW registered');} catch (error) {console.log('SW failed');}}
});

Let’s verify that it actually has been registered. Click on the network tab in the browser and go to application settings. This tab is really helpful when developing a progressive web app. Reload the page, and you will be able to see a service worker in this tab.

让我们确认它实际上已经被注册。单击浏览器中的网络选项卡，然后转到应用程序设置。在开发渐进式Web应用程序时，此选项卡非常有用。重新加载页面，您将可以在此选项卡中看到服务工作者。

Now let’s refresh the browser. In the first load, data will be cached by the service worker. Try turning the connection off. We will still be able to view images.

现在，让我们刷新浏览器。在第一次加载中，数据将由服务工作者缓存。尝试关闭连接。我们仍然可以查看图像。

Our app is now available even offline! If you have enabled HTTPS and uploaded an icon, congratulations you now have a Progressive Web App!

我们的应用程序现在甚至可以离线使用！如果您启用了HTTPS并上传了图标，那么恭喜您现在拥有渐进式Web应用程序！

下一步 (Next Steps)

If you are interested in developing your own progressive web app, I would highly recommend checking out this codelabs by Google Developers.

如果您有兴趣开发自己的渐进式Web应用程序，我强烈建议您通过Google Developers查看此代码实验室。

Did you learn something new? Have comments? Know a DevJoke? Tweet me @shrutikapoor08

你学到新东西了吗？有意见吗？知道开发笑话吗？鸣叫我@ shrutikapoor08

// When I wrote this, only God and I understood what I was doing// Now, only God knows#devjoke #notajoke #development #javascript pic.twitter.com/4V6lMUdhdb
— Shruti Kapoor (@shrutikapoor08)
//当我写这一点，只有上帝和我明白我在做什么//现在，只有上帝知道#devjoke #notajoke #development #javascript pic.twitter.com/4V6lMUdhdb
-Shruti Kapoor(@ shrutikapoor08)
August 9, 2018
八月9，2018