码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-12-27 14:17:39      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:tle   ping   androi   .net   title   get   ctr   html   str   

前言

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

浏览器要求

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

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

技术分享图片

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

电脑端要求

电脑端这边建议使用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 国际许可协议进行许可。

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

标签:tle   ping   androi   .net   title   get   ctr   html   str   

原文地址:http://blog.csdn.net/lecepin/article/details/78898097

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!