PWA入门级

最新推荐文章于 2024-06-13 10:02:45 发布

Zedd_01

最新推荐文章于 2024-06-13 10:02:45 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： PWA

本文链接：https://blog.csdn.net/YZ0826/article/details/79764966

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

开始写PWA

前言

PWA（Progressive Web Apps）是 Google 提出的一个新的 web 体验方式，离线时也可以访问，极大的提升了用户体验。
有三个特性：
* Reliable (可靠的)
* Fast (快速的)
* Engaging (可参与的)
具体可以看官网的介绍，这里不再赘述。

技术点

PWA 有三个技术点：
* Service Worker
* Manifest
* Push Notification
SW 是最重要的技术点（缓存，离线浏览）；Manifest 是定义图标、启动地址等列表清单文件（和 Android app 的 manifest 文件类似）；Push Notification 是利用服务器和SW之间的通信来进行消息的订阅和推送的。

栗子

新建一个 index.html 文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello PWA</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <img src="images/logo.jpg">

    <script>
        if ('serviceWorker' in navigator) { // 浏览器支持SW
            navigator.serviceWorker.register('sw.js').then(function (registration) {
                console.log('ServiceWorker registration successful with scope: ', registration.scope);
            }).catch(function (err) {
                console.log('ServiceWorker registration failed: ', err);
            });
        }
    </script>
</body>
</html>

demo有 logo.jpg 和 style.css 文件

新建 sw.js 文件如下：

var cacheName = 'hello-pwa';

self.addEventListener('install', event => {
    event.waitUntil(
        caches.open(cacheName)
          .then(cache => cache.addAll(
            [
                '/',  // 这个一定要包含整个目录，不然无法离线浏览
                './images/logo.jpg',
                './index.html',
                './css/style.css'
            ]
          )).then(() => self.skipWaiting())
    );
});

self.addEventListener('fetch', function (event) {  
    event.respondWith(
      caches.match(event.request)                    
      .then(function (response) {
        if (response) {                              
          return response;                           
        }
        return fetch(event.request);                 
      })
    );
});

到这里就一个入门级的栗子就写完了，关于 Service Worker API 可以查看文档学习
接下来通过 http-server 和 ngrok（https）进行调试查看
安装 http-server

npm install http-server -g

安装 ngrok，下载解压即可

在项目目录下执行如下命令：

http-server -c-1  // -c-1 会关闭缓存

再开启另外一个终端在 ngrok 文件的目录下执行如下命令：

./ngrok http 8080 // http-server 默认开启8080端口

效果

以下是Chrome浏览器环境测试结果：
浏览器支持 SW 打印如下：

Application 控制台可以看到 ‘hello-pwa’ 已经缓存，如下：

尝试离线刷新：

总结

PWA 是极限体验的技术（离线也可以访问）
SW 是 PWA 的技术重点
SW 的权限比较大，会拦截网络请求，所以需要在 https 协议下进行访问
参考官网栗子
参考PWA-Book

Zedd_01

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
PWA入门级

开始写PWA前言PWA（Progressive Web Apps）是 Google 提出的一个新的 web 体验方式，离线时也可以访问，极大的提升了用户体验。有三个特性： * Reliable (可靠的) * Fast (快速的) * Engaging (可参与的) 具体可以看官网的介绍，这里不再赘述。技术点PWA 有三个技术点： * Service Wor...
复制链接

扫一扫