1、一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

2、创建HTML文件

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">

    <meta name="x5-orientation" content="portrait">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <meta name="format-detection" content="telephone=no">

    <meta name="viewport" content="width=device-width, user-scalable=no" />

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

    <link rel="apple-touch-icon" href="e.png"/>

    <title>1v1</title>

</head>

<body>

    <div id="main">3</div>

    <script>

        if (navigator.serviceWorker != null) {

            navigator.serviceWorker.register('sw.js')

                .then(function (registration) {

                    console.log('Registered events at scope: ', registration.scope);

                });

        }

    </script>

    <script src="index.js"></script>

</body>

</html>

3、HTML中有引入manifest.json(名字配置项等内容)、apple-touch-icon(ios显示图标)、引入sw.js(增加单机缓存内容等)

4、manifest.json的大致内容

{

    "name": "Minimal app to try PWA",　　\\名字

    "short_name": "PWA",　　　　　　　　　　\\短名字

    "display": "standalone",　　　　　　　　\\状态

    "start_url": "/pwa/index.html",　　　　\\入口

    "theme_color": "#8888ff",　　　　　　　　\\预设主题颜色

    "background_color": "#aaaaff",　　　　　\\预设背景颜色

    "icons": [　　　　　　　　　　　　　　　　　\\安卓的图标

      {

        "src": "e.png",

        "sizes": "256x256",

        "type": "image/png"

      }

    ]

  }

5、sw.js大致内容

var cacheStorageKey = 'v2'　　\\版本号，每次根据这个号是否有修改来决定再替换缓存内容

var cacheList = [　　\\缓存内容

    "index.html",

    "index.js",

    "e.png"

]

self.addEventListener('install', e => {　　\\添加缓存

    e.waitUntil(

        caches.open(cacheStorageKey)

            .then(cache => cache.addAll(cacheList))

            .then(() => self.skipWaiting())

    )

})

self.addEventListener('fetch', function (e) {　　\\再次获取缓存的回调

    e.respondWith(

        caches.match(e.request).then(function (response) {

            if (response != null) {

                return response

            }

            return fetch(e.request.url)

        })

    )

})

self.addEventListener('activate', function (e) {　　\\根据缓存名不同获取内容

    e.waitUntil(

        Promise.all(

            caches.keys().then(cacheNames => {

                return cacheNames.map(name => {

                    if (name !== cacheStorageKey) {

                        return caches.delete(name)

                    }

                })

            })

        ).then(() => {

            return self.clients.claim()

        })

    )

})

6、创建index.js测试

let body = document.getElementsByTagName('body')[0]

body.style.backgroundColor='#333'

7、要在前缀是https或者localhost下才能有缓存的内容，每次更新都要先修改一下版本号，也就是sw.js里的cacheStroageKey的名字

尝试PWA的更多相关文章

  1. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  2. 前端应该了解的PWA

    一.传统web 应用 当前web应用在移动时代并没有达到其在桌面设备上流行的程度,下面有张图来对比与原生应用之间的差别. 究其原因,无外乎下面不可避免的几点: 移动设备网络限制-不可忽略的加载时间 w ...

  3. 网站PWA升级

    前面的话 渐进式网络应用 ( Progressive Web Apps ),即我们所熟知的 PWA,是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案.PWA 本 ...

  4. 经典文摘：饿了么的 PWA 升级实践（结合Vue.js）

    自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...

  5. H5 PWA技术以及小demo

    H5 PWA技术 1.原生app优缺点 a.体验好.下载到手机上入口方便 b.开发成本高(ios和安卓) c.软件上线需要审核 d.版本更新需要将新版本上传到不同的应用商店 e.使用前需下载 2.we ...

  6. 重识 PWA 进阶到 workbox3

    看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...

  7. PWA 入门: 写个非常简单的 PWA 页面

    Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案. 这篇文章里我们来完成一个非常简单的 PWA 页面. 一个 PWA ...

  8. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】：前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  9. PWA之serviceWorker应用

    1.serviceWorker介绍service worker是一段运行在浏览器后台的JavaScript脚本,在页面中注册并安装成功后,它可以拦截和处理网络请求,实现缓存资源并可在离线时响应用户的请 ...

随机推荐

  1. [笔记] 几个前端bug的解决方案

    jQuery UI下被拖动的元素上飘 症状出现在几乎所有浏览器里.使用 1.10.x 的draggable,在滚动栏下移(即非处于页面顶部)的时候拖动draggable的元素,它会向上跳一段距离.解决 ...

  2. python和shell间变量互相传递

    Python -> shell: 参考文章 1.环境变量 import os var=123或var=’123’ os.environ[’var’]=str(var) #environ的键值必须 ...

  3. C++ 字符串基本操作

    C++ 规定,不能直接进行数组名的赋值,因为数组名是一个常量,而结构类型的变量可以赋值,不同结构体的变量不允许相互赋值,即使这两个变量可能具有相同的成员.在程序中不能同时出现无参构造函数和带有全部默认 ...

  4. matlab下mex 调用opencv库

    1. 首先写好待编译的.cpp文件,使用混合编程,以人脸检测为例 #include "mex.h" // Required for the use of MEX files // ...

  5. thinkphp5.0读取配置

    读取配置参数 设置完配置参数后,就可以使用get方法读取配置了,例如: echo Config::get('配置参数1'); 系统为get方法定义了一个助手config,以上可以简化为: echo c ...

  6. Java多线程编程——生产者-消费者模式（1）

    生产者-消费者模式在生活中非常常见.就拿我们去餐馆吃饭为例.我们会遇到以下两种情况: 1.厨师-客人 如下图所示,生产者.消费者直接进行交互. 生产者生产出产品后,通知消费者:消费者消费后,通知生产者 ...

  7. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  8. linux-ARM的几个使用指令

    1.u-boot.bin arm-linux-gnueabi-objdump -D -b binary -m arm u-boot.bin > u-boot.s arm-linux-gnueab ...

  9. BZOJ3881 Coci2015 Divljak fail树+差分

    题目大意,给出两个字符串集合S和T,向T中添加字符串,查询S_i在T中有几个字符串出现过.一看这种多字符串匹配问题,我们联想到了AC自动机,做法就是,对于S集合我们建立一个AC自动机,建出fail树, ...

  10. BZOJ2754 SCOI2012喵星球上的点名

    绝世好题. 正当我犹豫不决时,hzwer说:“MAP!!!” 没错这题大大的暴力,生猛的stl,贼基尔爽,,ԾㅂԾ,, 由于我们求点名在名字中的子串个数,所以将点名建AC自动机,记录节点属于哪次点名, ...