PWA 环境准备实战

因为目前各大浏览器对于 PWA 的支持度各不一样,所以这里为了对 PWA 有更好的体验及使用,需要对浏览器做一下统一要求。沃师傅我今天就和大家讨论下PWA下浏览器的选择

电脑端环境准备


PWA 既然是 Google 力推的项目,所以在支持度上我们首选 Chrome 浏览器。电脑端这边建议使用 Chrome 42+,或者用最新的。

那么如何知道我们用的是什么版本呢

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

手机端环境准备

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

手机端(Android)Chrome 浏览器截图

安装网络服务器

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

下载链接为:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

安装完成后,搜索栏输入chrome://apps/,找到安装后的 Web Server for Chrome 应用,单击打开。如下图:

点击 CHOOSE FOLDER 按钮可以配置项目目录,勾选 Accessible on local network 可以让其他终端也访问到此服务器,Enter Port 用于设置端口号。

这里我在桌面创建项目根目录 app,里面创建一个 index.html,代码如下:

“`js <!DOCTYPE html>

Learning PWA


this service is running on Web Server for Chrome.

“`

打开浏览器,访问 Web Server URL(s)下所提供的任意一个 URL,效果如下:

手机上浏览器访问效果如下:

调试环境

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

  • F12 或者 Ctrl + Shift + I (Windows/Linux)

  • Cmd+Opt+I(Mac)

开发 PWA,我们主要用到的是 Application 面板。包含 Manifest 的调试、Service Worker 的调试,以及 Cache 的调试等。

总结

本文主要介绍了开发 PWA 之前的环境准备工作。无论是 PC 端,还是手机端,我们都选择支持度最好的 Chrome 浏览器。服务器环境我们选择安装了 Web Server for Chrome 插件。最后,调试 PWA 程序时最常用的是 Application 面板。包含 Manifest 的调试、Service Worker 的调试,以及 Cache 的调试等。

今天沃师傅的知识小讲堂就到这里,朋友们,明天见~

未经允许不得转载:大自然的搬运工 » PWA 环境准备实战

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址