first-pwa's People
first-pwa's Issues
创建并且部署一个PWA应用
现在开始从头部署一个PWA项目
Step1 新建一个项目文件
其中manifest.json
如下所示:
{
"name": "Weather",
"short_name": "Weather",
"icons": [{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "images/icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
然后根目录下面的service-worker.js文件内容如下:
/**
* author:SunShinewyf
* date:2017-4-20
* desc:some setting of worker
**/
var dataCacheName = 'ppData-v1';
var cacheName = 'ppPWA-final-1';
var filesToCache = [
'/',
'/index.html',
'styles/index.css'
];
self.addEventListener('install',function(e){
console.log('[pp serviceWorker install');
e.waitUntil(
caches.open(cacheName).then(function(cache){
console.log('serviceWorker Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(e) {
console.log('[Service Worker] Fetch', e.request.url);
var dataUrl = 'https://query.yahooapis.com/v1/public/yql';
if (e.request.url.indexOf(dataUrl) > -1) {
e.respondWith(
caches.open(dataCacheName).then(function(cache) {
return fetch(e.request).then(function(response){
cache.put(e.request.url, response.clone());
return response;
});
})
);
} else {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
}
});
至于app.js
和index.html
则根据你具体的项目而定,你可以根据自己的项目填充一些东西
在本地运行
添加web server for Chrome
点击这里
添加后会跳转到这个页面:
点击choose folder
,然后选中上面新建的index.html
,然后打开下面的http://127.0.0.1:8887
就可以访问了
部署
部署到firebase
- 进入https://firebase.google.com/console/
- 创建一个
Firebase
账户 - 添加一个项目
- 通过
npm
安装Firebase
:npm install -g firebase-tools
- 进入到你上面建的目录下面,执行
firebase login
,会看到下面的页面:
这时浏览器会自动跳转到下面这个页面
点击'允许'之后就会弹出一个页面
这里是public
目录里面初始的index.html
页面,这里需要将这个页面更改为你自己的项目文件
-
执行
firebase init
这时会跳出一些选项,你可以针对自己的实际情况进行选择。这里不多说 -
执行
firebase deploy
当看到控制台出现下面这样的时候:
就说明已经部署成功了
- 在收集浏览器打开上面最后图片最后一行的网址,如下图所示:
- 点击上图中右上角的三个小点的图标,然后选择 '添加到主屏幕'
- 回到手机桌面,就可以看到有相应的图标出来了,离线打开该应用,看是否正常加载页面
- 用 lighthouse 跑一下,按照提示改进一下
- 对比一下谷歌的 PWA Checklist,按照提示改进改进;
至此,大功告成。
不过这个demo比较简单,也没有配置数据库,仅当入门教程使用
PWA初探
什么是PWA
PWA是Progressive Web App
的简称,主要有下面几个特点:
- 渐进式 - 适用于选用任何浏览器的所有用户,因为它是以渐进式增强作为核心宗旨来开发的。
- 适合任何机型:桌面设备、移动设备、平板电脑或任何未来设备。
- 连接无关性 - 能够借助于服务工作线程在离线或低质量网络状况下工作。
- 类似应用 - 由于是在 App Shell 模型基础上开发,因此具有应用风格的交互和导航,给用户以应用般的熟悉感。
- 持续更新 - 在服务工作线程更新进程的作用下时刻保持最新状态。
- 安全 - 通过 HTTPS 提供,以防止窥探和确保内容不被篡改。
- 可发现 - W3C 清单和服务工作线程注册作用域能够让搜索引擎找到它们,从而将其识别为“应用”。
- 可再互动 - 通过推送通知之类的功能简化了再互动。
- 可安装 - 用户可免去使用应用商店的麻烦,直接将对其最有用的应用“保留”在主屏幕上。
- 可链接 - 可通过网址轻松分享,无需复杂的安装。
看上面这么多特性,感觉很高大上,其实真正深入进去,还是依托于前端最基础的html
,css
,js
这些技术,还有manifest以及Service Worker。
PWA在**的现状
- 国内较重视 iOS,而 iOS 目前还不支持 PWA。
- 国内的 Android 实为「安卓」,不自带 Chrome 是一,可能还会有其他兼容问题。
- 国内厂商可能并不会像三星那样对推动自家浏览器支持 PWA 那么感兴趣。
- 依赖 GCM 推送的通知不可用,Web Push Protocol 还没有国内的推送服务实现。
- 国内 webview 环境较为复杂(比如微信),黑科技比较多。
下面是一张service Worker在各个浏览器中兼容的图片:
从上图可以看出,Chrome和Firefox,Opera都已经支持Service Worker
,Safari2015年也提过会在5年计划中提供支持
PWA中使用的技术
Web App Manifest
web App Manifest
是指通过一个清单文件像浏览器暴露web应用的元数据,其中包括名字,要缓存的icons信息以及一些页面的主题颜色等。
下面附上一个例子:
{
"name": "pp android",
"short_name": "pp",
"icons":[{
"src":"public/images/1.jpg",
"type":"image/jpg"
}],
"start_url": "/index.html",
"description": "the pp android of pwa version",
"display": "standalone",
"background_color": "#FFF",
"theme_color": "#2F3BA2",
"lang":"en"
}
这里解释一下比较生疏的字段含义:
scope
:定义了web
应用的浏览作用域.start_url
:定义了一个 PWA 的入口页面。orientation
:屏幕旋转theme_color/background_color
:主题色与背景色
manifest
还有一些其他的字段,具体信息可移步这里
Service Worker
Service Workers
是谷歌 chrome
团队提出并大力推广的一项 web 技术,可以充当应用通服务器之间的代理服务器,可以用于拦截请求
Service Workers
有几点需要注意的地方:
Service Workers
基于Https
,这是硬性条件- 每个
Service Worker
都有自己的作用域,它只会处理自己作用域下的请求,而Service Worker
的存放位置就是它的最大作用域 Service Workder
是Web Worker
的一种,它不能够直接操作DOM
Service Worker
有一个生命周期,如下图所示:
关于Service Worker
的一些api和用法,可以异步这里和这里
下面收录一些关于PWA的文章
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.