美文网首页
PWA实战记录

PWA实战记录

作者: locky丶 | 来源:发表于2020-04-06 14:39 被阅读0次

PWA全称是Progressive Web App,意为“渐进式web应用”,刚看到这名字感觉很高级,接触了才知道,它是很亲民的。

PWA的核心是Service Worker。Service Worker是后台运行的worker脚本,需要浏览器提供支持。

PWA的配置很简单,在项目根目录下创建两个文件即可,manifest.json(添加主页首屏用到的配置文件)和sw.js(service worker的配置文件)。

manifest.json

{
  // 应用全名
  "name": "Progressive Times web app",
  // 添加到主屏幕的应用名称  
  "short_name": "hihj.cn",
  // 主屏幕点击后进入的页面路径  
  "start_url": "/",
  // 显示模式
  "display": "fullscreen",
  // 皮肤主题颜色
  "theme_color": "#FFDF00",
  // 北京颜色
  "background_color": "#FFDF00",
  // 主屏幕显示的图标
  "icons": [
    {
      "src": "./static/images/homescreen.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./static/images/homescreen-144.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ]
}

sw.js

// 缓存名称
var cacheName = 'helloWorld'

// '安装'service worker服务
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(cacheName)
      .then(cache => cache.addAll([
        '/js/script.js',
        '/images/hello.png'
      )]
  )
})

// 监听请求
self.addEventListener('fetch', function(event) {
  event.respondWith(
     // 当前请求是否匹配缓存中存在的内容
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response
        }
        // return fetch(event.request)
        
        // 复制请求,请求是一个流,只能使用一次
        var requestToCache = event.request.clone()
        return fetch(requestToCache).then(
          function (response) {
            if (!response || response.status !== 200) {
              return response
            }

          var requestToCache = response.clone()

          caches.open(cacheName)
              .then(function (cache) {
                cache.put(requestToCache, responseToCache)
              })
          return response
        })
      }
  )
})

以上两步完成后,我们只要在首页index.html文件中引入service-worker.js就可以了。

<script>
  // 判断浏览器支持service worker 的情况
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./sw.js')
      })
    }
</script>

相关文章

  • PWA实战记录

    PWA全称是Progressive Web App,意为“渐进式web应用”,刚看到这名字感觉很高级,接触了才知道...

  • PWA实战

    二、PWA实战 你的第一个pwa应用 首先我们新建目录结构如下: 我们在index.html文件中配置如下: 然后...

  • pwa初探

    pwa项目初探 pwa简介 pwa优点 pwa特点 项目 运行项目 验收pwa是否生效(必须是https) 5、然...

  • PWA架构【翻译】

    PWA系列: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【...

  • 利用Service workders使得PWA支持离线工作【翻译

    PWA: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【翻译...

  • 利用消息推送增强PWA用户粘度【翻译】

    PWA: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【翻译...

  • PWA简介【翻译】

    PWA系列: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【...

  • 让PWA可安装【翻译】

    PWA系列: PWA简介【翻译】 PWA架构【翻译】 利用Service workders使得PWA支持离线工作【...

  • 书和资料

    书:《ES6 入门 阮一峰》《深入理解typescript》《PWA 应用实战》《函数式编程指北》 资料:前端开发规范

  • 认识PWA

    大纲 前言1、什么是PWA2、PWA 应该具备的特点3、PWA基础4、构建 PWA 的业务场景5、PWA的核心技术...

网友评论

      本文标题:PWA实战记录

      本文链接:https://www.haomeiwen.com/subject/hahvphtx.html