从零搭建pwa项目

最新推荐文章于 2023-11-17 08:46:46 发布

冬久久

最新推荐文章于 2023-11-17 08:46:46 发布

阅读量456

点赞数

分类专栏： pwa

本文链接：https://blog.csdn.net/m0_45236510/article/details/113871839

版权

pwa 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

基本实现

相信会看这篇文章的同学都知道pwa是什么，所以就不废话了！

1、index.html

首先在window加载完后并serviceWorker存在的情况下注册，不存在的情况不会影响代码的任何功能，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>Document</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script>
    window.addEventListener('load', () => {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker
        .register('./sw.js')
        .then((registration) => {
          console.log('成功')
        }).catch((err) => {
          console.log('失败')
        });
      }
    })
  </script>
</body>
</html>

2、 manifast.json

配置信息详情查看mdn文档manifast

{
  "name": "pwa项目",
  "short_name": "pwa",
  "start_url": "/pwa/index.html",
  "description": "pwa app",
  "icons": [
    {
      "src": "./images/logo.png",
      "sizes": "48x48",
      "type": "image/png"
    }
  ],
  "background_color": "#fff",
  "display": "standalone"
}

2、sw.js

/**
 * service worker注册之后install事件会触发
 */
self.addEventListener('install', () => {
  console.log('注册')
})

/**
 * 在该事件中可以用来删除旧的缓存
 */
self.addEventListener('activate', () => {
})

/**
 * 每次任何被 service worker 控制的资源被请求到时，都会触发 fetch 事件
 */
self.addEventListener('fetch', () => {
  console.log('请求')
})

基本实现的效果

项目已经启动，当然现在不能称之为真正的pwa，因为还没有缓存数据等，没有实现离线访问，这篇文章记录了基本的pwa项目需要的东西，下一篇文章开始实现一个真正的pwa项目
在这里插入图片描述
如果你觉得不错就留下一个赞吧，这是我分享的动力源泉哦-_-

冬久久

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从零搭建pwa项目

基本实现相信会看这篇文章的同学都知道pwa是什么，所以就不废话了！1、index.html首先在window加载完后并serviceWorker存在的情况下注册，不存在的情况不会影响代码的任何功能，index.html代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫