正确使用PWA

达拉崩巴斑得贝迪卜多比鲁翁_

于 2022-06-20 11:55:13 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： pwa 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_46034375/article/details/125369464

pwa 专栏收录该内容

2 篇文章

订阅专栏

作为一个前端程序员，在没有任何Android/IOS的开发情况下，想想我们有多少种方法来开发一个原生移动应用程序！我们可以有非原生、混合开发，PWA等等手段。类似uniapp，Reactive native为我们提供了更简便的手段！抛开这些框架，我们该如何仅使用 HTML、CSS 和 Javascript 来开发一个多平台的标准移动程序！这就是本文要介绍的渐进式WEB应用程序（PWA）！

PWA

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。这些应用无处不在、功能丰富，使其具有与原生应用相同的用户体验优势.
--MDN

通俗的说：PWA是风格类似移动应用程序的网站！它可以运行在浏览器中也可以直接安装在移动设备上！

PWA必须包含下面三个关键内容！

1: Service Worker：它运行在一个与页面JavaScript主线程的独立线程上。它提供了离线功能，允许用户从网站下载和缓存设备上的文件。
2: Web Manifest：实现了将PWA网页应用添加至桌面的功。具体的配置文件manifest.json通常放在应用的根目录，包含类似应用标题、移动设备上的图标等安装信息！但该项技术目前仍处于实验性阶段，各浏览器支持度不高！
3: HTTPS：HTTP是PWA强制要求的，用来保证程序的安全性！

优点

1：跨平台可用，可以安装和运行在跨各种系统各种设备上！
2：无需下载，我们只需要访问网址，添加到桌面即可！这样就不需要第三方商店的审核！
3: 不需要开发Android和IOS两套代码！

劣势

1：浏览器支持存在差异，并不是所有浏览器都完美支持！
2：调用底层硬件比原生麻烦。
3：分发效果差，因为PWA不通过应用商店，这导致你的应用无法在应用商店展示搜索！

开发

项目以及目录

index.html
index.js
manifest.json
sw.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试PWA</title></title>
   <link rel="manifest" href="manifest.json" />

</head>

<body>
    <header>
        <h1>测试</h1></h1>
        <form id="todo-form">
            <input type="text"  placeholder="请输入 " />
            <button >提交</button>
        </form>
    </header>
    <main>
        <h2>测试</h2> 
    </main> 
</body>
<script src="index.js"></script>
</html>

配置manifest.json

MDN : https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Installable_PWAs

name: 网站应用的全名。
short_name: 显示在主屏上的短名字。
description: 一两句话解释你的应用的用途。
icons: 一串图标信息：源 URL，大小和类型。多包含几个图标，这样就能选中一个最适合用户设备的。
start_url: 启动应用时打开的主页。
display: 应用的显示方式；可以是 fullscreen、standalone、minimal-ui 或者 browser。
theme_color: UI 主颜色，由操作系统使用。
background_color: 背景色，用于安装和显示启动画面时。

{
  "name": "Todo PWA",
  "short_name": "ToDo",
  "icons": [
    {
      "src": "./logo.png",
      "sizes": "100x100",
      "type": "image/png"
    },
    {
      "src":  "./logo.png",
      "sizes": "150x150",
      "type": "image/png"
    },
    {
      "src": "./logo.png",
      "sizes": "250x250",
      "type": "image/png"
    }
  ],
  "theme_color": "#FFFFFF",
  "background_color": "#FFFFFF",
  "start_url": "/",
  "display": "standalone"
}

最后我们还需要在index.html引入

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

注册 Service Worker

上面我们提供了安装所需的配置文件，但是仅仅也支持配置了，我们想要可以安装，还必须注册 Service Worker。

一个注册好的 Service Worker，可以让应用离线工作（这仅对于安卓设备上的 Chrome 浏览器是必需的）

我们在sw.js中来添加service worker的事件，然后再index.js中注册。

详细的设置，请参考：developer.mozilla.org/zh-CN/docs/…

install 事件一般是被用来填充你的浏览器的离线缓存能力。这里我们将文件加入到缓存中！
fetch自定义请求，每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件，这些资源包括了指定的 scope 内的文档，和这些文档内引用的其他任何资源（比如 index.html 发起了一个跨域的请求来嵌入一个图片，这个也会通过 service worker 。）

const todo = "todo";
const assets = [
  "/",
  "./index.html", 
  "./index.js",
  "./logo.png",
];

self.addEventListener("install", installEvent => {
  installEvent.waitUntil(
    caches.open(todo).then(cache => {
      cache.addAll(assets);
    })
  );
});

self.addEventListener("fetch", fetchEvent => {
  fetchEvent.respondWith(
    caches.match(fetchEvent.request).then(res => {
      return res || fetch(fetchEvent.request);
    })
  );
});

index.js注册：

window.onload = ()=>{ 
  if ("serviceWorker" in navigator) {
        navigator.serviceWorker
          .register("./sw.js")
          .then(res => console.log("注册serviceWorker：成功"))
          .catch(err => console.log("注册serviceWorker：失败", err));
      
    }
};