PWA(Progressive Web App)入门系列:(二)相关准备

前言

在上一章中,对PWA的相关概念做了基本介绍,了解了PWA的组成及优势。为了能够更快的进入PWA的世界,这一章主要对在PWA开发中,需要注意的问题,运行的环境及调试工具做介绍说明。

浏览器要求

因为目前各浏览器对于PWA的支持度各不一样,在这里为了对PWA有更好的体验及使用,需要对浏览器做一下要求。

下图是目前各浏览器对PWA的支持度:

图片来自ispwaready

可以参考ispwaready和caniuse来了解浏览器的支持情况。

电脑端要求

电脑端这边建议使用Chrome 42+,或者用最新的。后面的课程会基于Chrome开发。

可以通过在Chrome浏览器的地址栏中输入chrome://settings/help,来查看版本信息。

手机端要求

因为目前,对于PWA中Push API实现最好的浏览器只有Chrome,所以这里仍然选择Chrome 62+。因为PWA的一些技术需要依赖于系统支持,所以这里建议使用纯正的Android OS,或者可以在一些国际版的ROM系统上进行。

安装网络服务器

因为PWA的一些技术需要运行在https上,或者localhost(127.0.0.1)上,不能直接通过打开html文件的方式运行,所以这里需要安装一下本地的服务器。

安装

本地服务器采用Web Server for Chrome,点击下载。

测试

安装完成后,点击书签中的应用

或者在地址栏中输入chrome://apps/

找到安装后的Web Server for Chrome应用,单击即可打开。

通过点击HOOSE FOLDER按钮,在弹出的文本框里选择自己开发的项目文件夹即可。

选择完成后,记住开启服务,开启后会显示Web Server:STARTED,表示服务开启。

开发者工具

打开

所有调试都是基于浏览器的开发者工具进行,可以通过快捷键打开。

  • F12 或者 Ctrl + Shift + I (Windows/Linxu)
  • Cmd+Opt+I(Mac)

或者通过菜单栏进入

面板说明

开发PWA,我们主要用到的是Application面板。

包含Manifest的调试、Service Worker的调试,Cache的调试等,在随后的章节里会详细说明。

总结

这一篇主要对后的学习,在开发工具和开发环境上做了铺垫,来方便后面的学习。


博客名称:王乐平博客

CSDN博客地址:http://blog.csdn.net/lecepin

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401662.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PWA(Progressive Web App)入门系列:(三)PWA关键技术Manifest

前言 前面说过,让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术,本章会详细说明manifest的实现,及各个参数的具体含义,还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…

利用百度LBS做一个小Demo

为什么80%的码农都做不了架构师?>>> 申请ak(即获取密钥)http://lbsyun.baidu.com/apiconsole/key?applicationkey 去这儿注册一个开发者账号即可拼写发送http请求的url譬如这样的调用http://api.map.baidu.com/geocoder/v2/?ad…

PWA(Progressive Web App)入门系列:(四)Promise

前言 这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢?因为PWA中的许多技术API中都是以Promise返回的方式返回的,为了对后续章节中PWA技术API更好的理解,这里就来说一个Promise对象。 Promise出现的背景 在JavaScrip…

图文详解如何搭建Windows的Android C++开发环境

原地址:http://www.apkbus.com/android-18595-1-1.html ////TITLE:// 图文详解如何搭建Windows的Android C开发环境(一)//AUTHOR:// norains//DATE:// Thursday 14-April-2011//Environment:// Cygwin 1.7.9// Android NDK r5//1. 下载A…

PWA(Progressive Web App)入门系列:(五)Web Worker

前言 在说Service Worker前有必要说一下Web Worker,因为Service Worker本身就属于Web Worker的延伸,大部分功能也是基于Web Worker进行的扩展。 背景 众所周知,JavaScript引擎是以单线程调度的方式进行,我们无法同时运行多个Ja…

Glob Patterns匹配模式使用

前段时间在用workbox时,在做precache时,匹配模式基于的是Glob Pattern模式,于是就看了下相关文档。 下面翻译一下node-glob的使用,原文:https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面&#x…

Workbox CLI v3.x 中文版

在写PWA应用时,用到WorkBox工具,使用过程中发现没有中文的帮助文档,为了体验好一些,也为了方便自己和他人查看,在这里翻译了一下workbox-cli。 Workbox CLI 是什么? Workbox命令行(在workbox-cli包内&…

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist和whitelist参数中的一个或两个,将此路由应用于导航请求中。 RegExpRout…

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的,像这种URLstyles/example.a8f5f1.css,因为它们可以长时间缓存…

集算器访问HTTP数据的代码示例

使用集算器(esProc)可以很方便的从http数据源读取数据进行处理。本例子中有一个servlet,对外提供json格式的雇员信息查询。Servlet访问数据库的员工表,保存了员工的信息,如下:EID NAME SURNAME …

PWA(Progressive Web App)入门系列:Cache Storage Cache

前言 目前浏览器的存储机制有很多,如:indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等,那为什么又制定了一套 Cache API 呢?对比其他存储机制有什么优势? 简介 Cache API 是一套…

「浏览器插件」无广告国内视频平台直接播放插件

前段时间发现一些比较不错的解析国内视频平台的一些 API 接口,很早之前基于这些接口做过一个 Android 端的播放软件,但为了更方便使用吧,于是做了一个 Chrome 的浏览器插件,解析接口也是在线更新的,所以用起来会比较方…

kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

来自:http://blog.liveramp.com/2013/04/08/kafka-0-8-producer-performance-2/ At LiveRamp, we constantly face scaling challenges as the volume of data that our infrastructure must deal with continues to grow. One such challenge involves the logging system. At…

Workbox-Window v4.x 中文版

Workbox 目前发了一个大版本,从 v3.x 到了 v4.x,变化有挺大的,下面是在 window 环境下的模块。 什么是 workbox-window? workbox-window 包是一组模块,用于在 window 上下文中运行,也就是说,在你的网页内…

媒体播放器三大底层架构

2019独角兽企业重金招聘Python工程师标准>>> 媒体播放工具,这里主要指视频播放,因为要面临庞大的兼容性和纷繁复杂的算法,从架构上看,能脱颖而出的体系屈指可数。大体来说业界主要有3大架构:MPC、MPlayer和…

PWA 可用性检测工具

针对移动端或者 PC 端浏览器是否对 PWA 可用的问题上,做了一个简单的站点,来实现上述问题的方便检测。让开发者较快的了解终端浏览器的特性支持度。 使用 工具地址:https://lecepin.gitee.io/detect-sw/ 地址二维码: 检测 可…

PWA 应用列表及常用工具

引言 在做 PWA 的过程中自己写了一些相关的应用和工具,在这里整合下,方便记录及查找使用。 应用列表 PWA 支持检测工具番茄钟二维码生成新闻应用身体数据统计应用支付宝集福应用田英章书法字典应用抖音无水印下载应用很好用的备忘录精神氮泵 PWA 支持检…

Struts2中访问HttpServletRequest和HttpSession

2019独角兽企业重金招聘Python工程师标准>>> 关键字: struts2 httpservletrequest httpsession 在没有使用Struts2之前,都习惯使用HttpServletRequest和HttpSession对象来操作相关参数,下面介绍一下在Struts2中访问隐藏的HttpServletRequest和HttpSession的两种方法…

web前端长度单位详解(px、em、rem、%、vw/vh、vmin/vmax、vm、calc())

基础理论1)简介2)绝对长度3)相对长度4)经验之谈1)简介 在前端开发中,会遇到各种不同类型的长度单位,比如px,em,rem等。 而整体的长度单位分为两大类:相对长度 和 绝对长度。 2&…

PWA(Progressive Web App)入门系列:Fetch Request Headers Response Body

前言 在 WEB 中,对于网络请求一直使用的是 XMLHttpRequest API 来处理,XMLHttpRequest 也很强大,传统的 Ajax 也是基于此 API 的。那么为什么 W3C 标准中又加入了类似功能的 Fetch API 呢?他有何优势。 Fetch 什么是 Fetch Fet…