vanilla_如何在Vanilla JavaScript中构建PWA

﹏ヽ暗。殇╰゛Y 2022-11-27 04:26 148阅读 0赞

vanilla

This is the first part of a three-part series about creating a Progressive Web App (PWA) which leverages the Web Push API and cron-schedule. In this article, we’ll cover the basics: the front-end, web app manifest and Service Worker aspect of the app, and we’ll be only using pure JavaScript to accomplish this. At the end of this post we’ll have a working PWA that’s cached so it can be accessed while offline.

这是一个由三部分组成的系列文章的第一部分，该系列文章创建了利用Web Push API和cron计划的渐进式Web应用程序(PWA)。 在本文中，我们将介绍基础知识：应用程序的前端，Web应用程序清单和Service Worker方面，并且我们将仅使用纯JavaScript来完成此操作。 在本文的结尾，我们将缓存一个有效的PWA，以便可以在脱机时对其进行访问。

## 我们正在建设什么 **(**What We Are Building**)** ##

My physician recently told me to take 3 pills a day. On my way back home I told myself: “I am a developer, I automate tasks, let’s build an app to help me take my pills”.

我的医师最近告诉我每天服用3粒。 在回家的路上，我告诉自己：“我是一名开发人员，使任务自动化，让我们构建一个应用程序来帮助我服药”。

We’re going to build a simple Progressive Web App (PWA) which will remind me to take my pills every day.

我们将构建一个简单的渐进式Web应用程序(PWA)，该应用程序将提醒我每天服药。

Our app will have a web server powered by Express.js. Express will push notifications to the clients which subscribed to the push notifications. It will also serve the front-end app.

我们的应用程序将具有由Express.js驱动的Web服务器。 Express会将推送通知发送给订阅了推送通知的客户端。 它还将服务于前端应用程序。

## 第一步：PWA **(**Step one: PWA**)** ##

The app we’re building has to remind us to take pills even when the browser is not opened. So we need a [Progressive Web App][].

我们正在构建的应用必须提醒我们即使在未打开浏览器的情况下也要服药。 因此，我们需要一个[渐进式Web应用程序][Progressive Web App] 。

## 准备清单并做好准备 **(**Getting the manifest up and ready**)** ##

My first step building a PWA is to generate a manifest using [this generator][]. This tool will create your `manifest.json` file which holds all basic information about your app. It will also create some icons which will show on the user’s phones when they download the app.

我构建PWA的第一步是使用[此生成器][this generator]生成清单。 该工具将创建您的`manifest.json`文件，其中包含有关应用程序的所有基本信息。 它还将创建一些图标，这些图标将在用户下载应用程序时显示在用户的手机上。

Just unzip everything inside a folder at the root of our project that we’ll call `public`. I decided to call my app Temporas.

只需将所有内容解压缩到我们项目的根目录下的文件夹中，我们将该文件夹称为`public` 。 我决定将我的应用称为Temporas。

Module: public/manifest.json

模块：public / manifest.json

"name": "Temporas",
      "short_name": "Temporas",
      "theme_color": "#222831",
      "background_color": "#ffad17",
      "display": "standalone",
      "Scope": "",
      "start_url": "/index.html",
      "icons": [
        // A lot of icons
      ]

PWAs rely on [Service Workers][]. Service workers are little programs that run as soon as they are registered independently from the rest of your JavaScript code. Service workers can’t interact directly with the DOM but can send messages to the rest of your code (we’ll explore this in more detail in part 2 of this series).

PWA依赖[服务人员][Service Workers] 。 服务工作者是一小程序，它们在与其他JavaScript代码无关地独立注册后立即运行。 服务人员不能直接与DOM交互，但可以将消息发送到代码的其余部分(我们将在本系列的第2部分中对此进行详细探讨)。

--------------------

Now let’s create our frontend and register our service worker:

现在，让我们创建前端并注册我们的服务人员：

Module: public/index.html

模组：public / index.html

<!DOCTYPE html>
    <head>
      <meta name='viewport' content='width=device-width, initial-scale=1'>
      <meta name="theme-color" content="#222831">
      <link rel='manifest' href='./manifest.json'>
    
      <script>
        // Registering our Service worker
        if('serviceWorker' in navigator) {
          navigator.serviceWorker.register('sw.js', { scope: './' })
        }
      </script>
    </head>
    <body>
      <div class="hero">
        <h1>Temporas</h1>
        <h2>Take your medicine my friend</h2>
        <div id="status"></div>
        <button id="unsubscribe">unsubscribe</button>
      </div>
    </body>

We are now one file away from having an installable web application. Let’s create our service worker:

现在，与可安装的Web应用程序相比，文件仅相距一个文件。 让我们创建我们的服务工作者：

Module: public/sw.js

模组：public / sw.js

✨✨ We have a PWA ✨✨

have我们有PWA✨✨

## 设置Express.js **(**Setting up Express.js**)** ##

The PWA will not work if you just open `/public/index.html` in your browser. We must serve our content from a web server.

如果仅在浏览器中打开`/public/index.html` ，则PWA将不起作用。 我们必须从Web服务器提供内容。

First let’s set things up in our command line. In your root folder run:

首先，让我们在命令行中进行设置。 在您的根文件夹中运行：

$ npm init
    $ npm install express body-parser
    $ touch app.js

Inside of `package.json` replace the `scripts` field with:

在`package.json`内部，将`scripts`字段替换为：

"scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "start": "node app.js"
    }

And now let’s populate our app:

现在，让我们填充我们的应用程序：

Module: app.js

模块：app.js

const bodyParser = require('body-parser');
    const express = require('express');
    const app = express();
    const port = 3000;
    
    // We want to use JSON to send post request to our application
    app.use(bodyParser.json());
    
    // We tell express to serve the folder public as static content
    app.use(express.static('public'));
    
    app.get('/public');
    
    app.listen(port, () => console.log(`Listening on port ${port}!`));

Now you can run `npm run start`. Go to [http://localhost:3000][http_localhost_3000], kill the server. Reload [http://localhost:3000][http_localhost_3000] and the app will look like it is still working! You can even turn off your laptop and go back to the web page on that port.

现在您可以运行`npm run start` 。 转到[http：// localhost：3000][http_localhost_3000] ，杀死服务器。 重新加载[http：// localhost：3000][http_localhost_3000] ，该应用程序看起来仍然可以正常工作！ 您甚至可以关闭笔记本电脑，然后返回该端口上的网页。

I highly advise disabling the caching mechanism of service workers when you are developing new features. It might cause some confusion.

我强烈建议您在开发新功能时禁用服务工作者的缓存机制。 这可能会引起一些混乱。

[Here’s a good post][Here_s a good post] if you want to learn more about setting up an Express server.

如果您想了解有关设置Express服务器的更多信息， [这是一篇好文章][Here_s a good post] 。

## 检查您的PWA **(**Checking your PWA**)** ##

To test your PWA I highly recommend using the [Lighthouse extension][] to see if everything is working. Remember also that when comes the time to deploying your app on the web, it needs to be served over HTTPS to be considered a PWA and to be installable as an app.

为了测试您的PWA，我强烈建议您使用[Lighthouse扩展程序][Lighthouse extension]来查看是否一切正常。 还要记住，当要在网络上部署应用程序时，需要通过HTTPS进行服务，以将其视为PWA并可以作为应用程序安装。

You can find all the code in this [Github repository][].

您可以在此[Github存储库中][Github repository]找到所有代码。

> 翻译自: [https://www.digitalocean.com/community/tutorials/js-vanilla-pwa][https_www.digitalocean.com_community_tutorials_js-vanilla-pwa]

vanilla

[Progressive Web App]: https://www.digitalocean.com/community/tutorials/js-intro-progressive-web-apps
[this generator]: https://app-manifest.firebaseapp.com/
[Service Workers]: https://www.digitalocean.com/community/tutorials/js-service-workers
[http_localhost_3000]: http://localhost:3000
[Here_s a good post]: https://www.digitalocean.com/community/tutorials/nodejs-express-basics
[Lighthouse extension]: https://developers.google.com/web/tools/lighthouse
[Github repository]: https://github.com/alligatorio/Vanilla-JS-PWA
[https_www.digitalocean.com_community_tutorials_js-vanilla-pwa]: https://www.digitalocean.com/community/tutorials/js-vanilla-pwa