如何开发一个渐进式Web应用程序PWA


Posted in Javascript onMay 10, 2021

概述

自苹果推出了iPhone应用商店以来,App成为了我们生活中不可或缺的一部分,而对于实体业务也是如此,现在各行业都在推出自己的App,但有没有人想过这样一种场景,如果自己的潜在客户还没有安装你的App亦或是即便安装但因为客户的手机存储空间紧张而卸载掉了你的App?那有没有使App更轻量,更易安装的技术实现呢?答案是“有的”。

渐进式Web应用程序就是为此而生的,它同时具备了Web应用功能和以前只有在原生应用才有的功能的特点,渐进式Web应用程序通过从主屏幕上的图标启动,也可以根据推送通知启动,加载时间几乎可以忽略不计,而且除了可以在线使用外,也可以打包成可离线使用。

最重要的是,渐进式Web应用程序在手机上创建方式也很简单,因为它们只是对你网站的增强,当有人在第一次访问你的网站时,PWA的功能在经过你授权后就会自动为你创建在手机上。

下面, 我们会一起来看看如何来创建一个属于自己的PWA应用。

要求

要开始学习本教程,您必须安装以下软件:

  • node 8.9 版本及以上 (https: // nodejs.org/en/download/). Yarn(https://yarnpkg.com) Git.

作为本教程初始的工程,你可以clone以下Github库:

git clone https://github.com/petereijgermans11/progressive-web-app

然后,到以下目录中  

cd pwa-article / pwa-app-manifest-init

通过以下命令安装依赖并启动工程

npm i && npm start

通过以下地址打开应用:http:// localhost:8080

如何开发一个渐进式Web应用程序PWA

应用的网址

有许多方法可以访问我的本地主机:为了从远程访问发布在你机器上的8080端口的地址。为此,您可以使用ngrok。请参阅:https://ngrok.com/

使用以下命令安装ngrok:

npm install -g ngrok

在终端中运行以下命令。该命令为您生成一个可供外部访问的URL

ngrok http 8080

然后在Chrome中的移动设备上浏览至生成的网址。

PWA需要的技术组件是什么?

PWA有三个重要的技术组件协调工作,包括:

Manifest清单文件,Service Worker和在https下运行。

如何开发一个渐进式Web应用程序PWA

Manifest清单文件

清单文件是一个JSON配置文件,其中包含了PWA的基础信息,例如应用的icon,Web应用程序名称及背景颜色。如果浏览器检测到网站存在PWA清单文件,Chrome会自动出现“添加到主屏幕”按钮。如果用户点击同意,该图标将被添加到主屏幕,并且将安装PWA。

如何开发一个渐进式Web应用程序PWA

创建一个Manifest.json

PWA的Manifest.json文件如下所示:

JSON格式

{
  "name": "Progressive Selfies",
  "short_name": "PWA Selfies",
  "icons": [
    {
      "src": "/src/images/icons/app-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/src/images/icons/app-icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/index.html",
  "scope": ".",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3f51b5"
}

告诉浏览器你应用的清单

在与index.html文件相同的级别的目录中创建Manifest.json文件。清单文件创建后,将清单文件引用链接添加到index.html中。

<link rel=”manifest” href=”/manifest.json”>

Manifest 属性介绍

Manifest有很多配置属性,接下来我们会对其中的属性做一个简单的介绍

  • name、short_name:指定Web应用的名称,short_name是该应用的简称,当没有足够空间展示应用的name属性时,系统就会使用short_name 。 
  • display:display属性指定Web应用的显示模式,它有四个值可供配置:fullscreen、standalone、minimal-ui和browser,但一般常用的属性就是fullscreen和standalone。 fullscreen:全屏显示 standalone:这种模式下打开的应用不会出现浏览器的地址栏,所以因此看起来更像是一个原生应用 minimal-ui、browser:和使用浏览器访问区别不大。 
  • orientation:控制Web应用的显示的方向及禁止手机转屏。 
  • icons、background_color:icon用于指定应用图标,background_color是应用加载完成前的背景色,通过设置这两个属性,可组合成应用的Splash Screen。 
  • theme_color:定义应用程序的默认主题颜色。 
  • description:设置应用的一段描述内容。

以上是pwa 清单文件属性的一些说明,我们通过将设置完成的清单文件并将其放置在与index.html文件同级的目录中即可完成清单文件的添加。

打开Chrome开发者工具 ? Application - Manifest,查看添加的清单文件是否加载完成,如果没有下图的信息,我们可以通过重新启动服务器npm start来重新加载。

如何开发一个渐进式Web应用程序PWA

什么是Service Worker?

Service Worker(SW) 是一段JavaScript,它作为浏览器和网络服务器间的代理。Service Worker可以在基于浏览器的 web 应用中实现如离线缓存、消息推送、静默更新等 native 应用常见的功能,以给 web 应用提供更好更丰富的使用体验。

另外,这个API还允许利用缓存来支持离线体验,从而使开发人员可以完全控制用户的使用体验

如何开发一个渐进式Web应用程序PWA

Service Worker生命周期

对于Service Worker,基本设置的步骤如下:

  • 首先应注册SW,如果SW已注册,浏览器会根据于安装事件自动开始安装。
  • 安装SW后,它将收到激活事件。此激活事件可用于清理SW早期版本的中使用的资源。

如何开发一个渐进式Web应用程序PWA

实际操作应该首先创建一个和index.html同级,名为sw.js的空文件。然后再index.html文件中,添加一个base标签,如下:

<base href="/" rel="external nofollow" >

最后,在src/js/app.js中添加以下代码注册SW。此代码将在页面 “加载”过程中被激活。

你可以打开Chrome DevTools ? Application - Service Worker 中检查SW是否已经启用。

window.addEventListener('load', () => {
    const base = document.querySelector('base');
    let baseUrl = base && base.href || '';
    if (!baseUrl.endsWith('/')) {
        baseUrl = `${baseUrl}/`;
    } 
   
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register(`${baseUrl}sw.js`)
            .then( registration => {
            // Registration was successful
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        })
        .catch(err => {
            // registration failed :(
            console.log('ServiceWorker registration failed: ', err);
        });
    }
});

以上这段代码主要的作用是检查SW的API在window对象的navigator属性中是否可用。window对象代表浏览器窗口。如果SW在navigator中可用,则在页面加载时立即注册SW。

虽然注册一个SW很简单,但在有些情况下我们依然会遇到无法注册Service Worker的问题,我们来简单看看无法注册SW的原因都有什么并如何解决:

  • 您的应用程序无法在HTTPS下运行。在开发过程中,你可以通过localhost使用SW。但如果将其部署在网站上时,则需要启用HTTPS。
  • SW的路径不正确。

没有勾选Update on reload。 

如何开发一个渐进式Web应用程序PWA

Service Worker 事件

除了install和activate事件外,其他事件还有message、fetch、sync和push事件。

如何开发一个渐进式Web应用程序PWA

将以下代码添加到你的SW中以监听生命周期事件(安装和激活):

self.addEventListener('install', event => {
    console.log('[Service Worker] Installing Service Worker ...', event);
    event.waitUntil(self.skipWaiting());
});
self.addEventListener('activate', event => {
    console.log('[Service Worker] Activating Service Worker ...', event);
    return self.clients.claim();
});

install回调调用skipWaiting()函数来触发activate事件,并告诉Service Worker立即开始工作,而无需等待用户浏览或重新加载页面。

skipWaiting()函数强制等待中的Service Worker成为活动的Service Worker。self.skipWaiting()函数也可以和self.clients.claim()函数一起使用,以确保对底层Service Worker的更新立即生效。

在这种情况下,self-property 代表窗口对象(即你的浏览器窗口)。

添加到主屏幕按钮

"添加到主屏幕按钮" 允许用户在其设备上安装PWA。为了真正用这个按钮安装PWA,你必须在SW中定义一个fetch事件处理程序。让我们在sw.js中解决这个问题。

self.addEventListener('fetch', event => {
    console.log('[Service Worker] Fetching something ....', event);
    // This fixes a weird bug in Chrome when you open the Developer Tools
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
        return;
    }
    event.respondWith(fetch(event.request));
});

Service Worker缓存

Service Worker的强大之处在于其拦截HTTP请求的能力。在这一步中,我们使用这个选项来拦截HTTP请求和响应,直接从缓存为用户提供闪电般快速的响应。

在Service Worker安装期间进行预缓存

当用户第一次访问你的网站时,SW会开始自行安装。在这个安装阶段,你可以将PWA使用的所有页面、脚本和样式文件下载并缓存起来,以下是完成这项工作的sw.js文件代码:

const CACHE_STATIC_NAME = 'static';
const URLS_TO_PRECACHE = [
    '/',
    'index.html',
    'src/js/app.js',
    'src/js/feed.js',
    'src/lib/material.min.js',
    'src/css/app.css',
    'src/css/feed.css',
    'src/images/main-image.jpg',
    'https://fonts.googleapis.com/css?family=Roboto:400,700',
    'https://fonts.googleapis.com/icon?family=Material+Icons',
];
self.addEventListener('install', event => {
    console.log('[Service Worker] Installing Service Worker ...', event);
    event.waitUntil(
        caches.open(CACHE_STATIC_NAME)
            .then(cache => {
                console.log('[Service Worker] Precaching App Shell');
                cache.addAll(URLS_TO_PRECACHE);
            })
            .then(() => {
                console.log('[ServiceWorker] Skip waiting on install');
                return self.skipWaiting();
            })
    );
});

这段代码使用安装事件,并在安装阶段添加了一个URLS_TO_PRECACHE数组。一旦调用开启缓存函数(caches.open),你就可以使用cache.addAll()函数来缓存数组中的文件。通过event.waitUntil()方法使用JavaScript promise来知道安装需要多长时间以及是否成功。

安装事件会调用self.skipWaiting()直接激活SW。如果所有文件都已被成功缓存,SW就会被安装。但如果其中一个文件无法下载,则安装步骤将会失败。在Chrome开发者工具中,你可以检查缓存(在Cache Storage中)是否被URLS_TO_PRECACHE数组中的静态文件填充。

如何开发一个渐进式Web应用程序PWA

但是,如果你查看Network选项卡,文件仍然是通过网络获取的。原因是虽然缓存已经准备就绪了,但我们并没有从缓存中读取引用资源。所以为了完成这部分工作,我们首先要监听应用的fetch事件,然后拦截并从缓存中获取资源,让我们看看下面的代码吧:

self.addEventListener('fetch', event => {
    console.log('[Service Worker] Fetching something ....', event);
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if (response) {
                    console.log(response);
                    return response;
                }
                return fetch(event.request);
            })
    );
});

我们使用caches.match()函数检查传入的URL是否与当前缓存中可能存在的资源匹配。如果匹配,我们就返回该缓存资源,但如果该资源不存在于缓存中,我们就像正常情况下一样继续获取请求的资源。

在Service Worker安装并激活后,刷新页面并再次检查网络选项卡。现在,Service Worker将拦截HTTP请求,并从缓存中即时加载相应的资源,而不是向服务器发出网络请求。

现在,如果我们在网络选项卡中设置离线模式,我们的应用也依然能正常访问。

后台传输

Background Fetch API是SW的后台功能,它允许用户在后台下载大文件、视频和音乐等资源。在获取/传输过程中,你的用户即便关闭标签,乃至关闭整个浏览器,也不会清除传输任务。当用户再次打开浏览器后,传输过程将恢复。这个API也可以将传输的进度可以显示给用户,用户可以取消或暂停这个过程。

如何开发一个渐进式Web应用程序PWA

默认情况下,后台传输功能是不可用的,你必须通过url(chrome://flags/#enable-experimental-web-platform-features)允许chrome的“Experimental Web Platform features”选项

如何开发一个渐进式Web应用程序PWA

以下是如何实现此类后台传输的示例。

在你的index.html文件中添加ID为“ bgFetchButton”的按钮

<button id="bgFetchButton">Store assets locally</button>

然后,在加载事件处理程序中的app.js中添加用于执行后台传输的代码

window.addEventListener(‘load', () => {
...
       bgFetchButton = document.querySelector(‘#bgFetchButton');
       bgFetchButton.addEventListener(‘click', async event => {
         try {
            const registration = await navigator.serviceWorker.ready;
            registration.backgroundFetch.fetch(‘my-fetch', [new              Request(`${baseUrl}src/images/main-image-lg.jpg`)]);
         } catch (err) {
            console.error(err);
         }
     });
...
});

上面的代码在以下条件下开始执行后台传输:

  • 用户点击ID为bgFetchButton的按钮
  • SW已注册

后台传输必须在异步函数中执行,因为传输过程不能阻塞用户界面。

传输完成后放入缓存

self.addEventListener(‘backgroundfetchsuccess', event => {
  console.log(‘[Service Worker]: Background Fetch Success', event.registration);   event.waitUntil(
   (async function() {
     try {
     // Iterating the records to populate the cache
       const cache = await caches.open(event.registration.id); const records =          await event.registration.matchAll(); const promises = records.map(async          record => {
         const response = await record.responseReady;
         await cache.put(record.request, response);
       });
       await Promise.all(promises);
     } catch (err) {
       console.log(‘[Service Worker]: Caching error');
     }
   })()
  );
});

这段代码由以下步骤组成:

  • 当Background Fetch传输完成,你的SW将收到Background Fetch成功事件。
  • 创建并打开一个与registration.id同名的新缓存。
  • 通过registration.matchAll()获取所有记录并遍历。

最后,通过Promise.all(),执行所有的承诺。

如何开发一个渐进式Web应用程序PWA

总结

在本文中我们讨论了PWA的基础组成部分的其中两部分:Manifest、Service Worker的基础功能介绍,因为HTTPS之前我们已经有过一些讨论了https://www.cnblogs.com/powertoolsteam/p/http2https.html

以上就是如何开发一个渐进式Web应用程序PWA的详细内容,更多关于开发一个渐进式Web应用程序的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
基于jquery的超简单上下翻
Apr 20 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
常用的javascript设计模式
Jan 11 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
Html5生成验证码的示例代码
May 10 #Javascript
Vue详细的入门笔记
如何理解Vue前后端数据交互与显示
Vue实现下拉加载更多
May 09 #Vue.js
微信小程序实现拍照和相册选取图片
微信小程序实现录音Record功能
如何用JavaScipt测网速
May 09 #Javascript
You might like
德生PL330测评
2021/03/02 无线电
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Pycharm更换python解释器的方法
2018/10/29 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
Django 反向生成url实例详解
2019/07/30 Python
python多线程扫描端口(线程池)
2019/09/04 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
python中adb有什么功能
2020/06/07 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
日语求职信范文
2013/12/17 职场文书
主题党日活动总结
2014/07/08 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
怎样写离婚协议书
2015/01/26 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
Nginx利用Logrotate实现日志分割
2022/05/20 Servers