二、创建PWA

作者: helloyoucan | 来源:发表于2019-02-01 11:47 被阅读0次

二、创建PWA
用angular 来构建PWA应用
pwa初探
PWA架构【翻译】
利用Service workders使得PWA支持离线工作【翻译
利用消息推送增强PWA用户粘度【翻译】
PWA简介【翻译】
让PWA可安装【翻译】
认识PWA
pwa

由于sw（Service Worker）运行于https上，在此我使用了腾讯的Goding page（类似于Github page）。

第一步创建项目

注册登录coding账号（我用的github账号授权登录）（https://coding.net/），创建项目

创建项目

创建项目
然后在电脑中找个地方，将项目用git clone下来

第二步创建相关文件

文件列表

其中，pwaicon.jpg是将pwa添加到主屏幕时的icon，可以随意找个图片~

第三步编写相关代码

index.html

<!DOCTYPE html>
<html lang="en-zh">
<head>
    <meta charset="UTF-8">
    <title>我的首个PWA</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="manifest"  href="manifest.json">
</head>
<body>
    <h3>Hello,my first PWA.</h3>
    <script type="text/javascript">
        if(navigator.serviceWorker!=null){//判断是否支持serviceWorker
             //加载相关serviceWorker脚本
            navigator.serviceWorker.register('sw.js').then(function(registartion){
                console.log('support sw',registartion.scope)
            })
        }
    </script>
</body>
</html>

main.css

h3{
    color: red;
}

manifest.json

{
    "lang":"en-zh",
    "name":"我的首个PWA",
    "short_name":"我的PWA",
    "description":"描述我的PWA",
    "start_url":"/pwa_demo01",
    "display":"standalone",
    "background_color":"#fff",
    "theme_color":"#9c67fc",
    "icons":[
        {
            "src":"pwaIcon.jpg",
            "sizes":"120x120 1x1",
            "type":"image/png"
        }
    ]
}

sw.js

var cacheStorageKey='pwa-demo01-v1' //版本号，当想更新缓存资源（文件、数据等）
var cacheList=[
    './',
    './index.html',
    './main.css',
    './pwaIcon.jpg'
] //需要缓存的文件路径
//当脚本加载完毕执行
self.addEventListener('install',function(e){
    e.waitUntil(
        //创建缓存并缓存cacheList的所以文件
            caches.open(cacheStorageKey)
            .then(function(cache){
                return cache.addAll(cacheList)
            })
            .then(function(){
                //使用了一个方法那就是 self.skipWaiting( ) ，为了在页面更新的过程当中，新的 SW 脚本能够立刻激活和生效
                return self.skipWaiting()
            })
        )
})
//缓存通过fetch获取的数据
self.addEventListener('fetch',function(e){
    e.respondWith(
        caches.match(e.request).then(function(response){
            if(response!=null){
                return response
            }
            // 因为 event.request 流已经在 caches.match 中使用过一次，
            // 那么该流是不能再次使用的。我们只能得到它的副本，拿去使用。
            var fetchRequest = e.request.clone();
            return fetch(fetchRequest)
                        .then(function(res){
                            // 检查是否成功
                            //失败了
                            if(!res || res.status !==200||res.type!=='basic'){
                                return res
                            }
                            // 如果成功，该 response 一是要拿给浏览器渲染，二是要进行缓存。
                            // 不过需要记住，由于 caches.put 使用的是文件的响应流，一旦使用，
                            // 那么返回的 response 就无法访问造成失败，所以，这里需要复制一份。
                            var responseToCache = res.clone()
                            caches
                                .open(cacheStorageKey)
                                .then(function(cache){
                                    cache.put(e.request,responseToCache)
                                });
                            return res
                }
            )       
        })
    )
})
//当被激活时，检查版本资源，移除旧版本的资源
self.addEventListener('activate',function(e){
    e.waitUntil(
        //获取所有cache名称
        caches.keys().then(function(cacheNames){
            return Promise.all(
                //移除不是该版本的所有资源
                cacheNames.filter(function(cacheName){
                    return cacheName !==cacheStorageKey
                }).map(function(cacheName){
                    return caches.delete(cacheName)
                })
            )

        }).then(function(){
            return self.clients.claim() //在新安装的 SW 中通过调用 self.clients.claim( ) 取得页面的控制权，这样之后打开页面都会使用版本更新的缓存。
        })
    )
})