尝试PWA

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的名字

猜你喜欢