因为专注,所以专业
2005 - 2020

关于渐进式 Web 应用,你应该知道的一切

时间:2020-02-05 17:41:33    作者:八叔模板堂

什么是渐进式 Web 应用

  1. 安全 – 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。
  2. 渐进式 – 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则
  3. 响应式 – 适应任何环境:桌面电脑、智能手机、平板电脑,或者其他设备。
  4. 不依赖网络连接 – 通过用 service workers 增强,可以在离线或者低质量网络下工作
  5. 类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的。
  6. 持续更新 – 受益于 service worker 的更新进程,应用能够始终保持更新。
  7. 可发现 – 可识别为“应用程序”,是得益于 W3C manifests 元数据和 service worker 的登记,让搜索引擎能够找到 web 应用。
  8. 可再次访问 – 通过推送通知等特性让用户再次访问变得容易。
  9. 可安装 – 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。
  10. 可链接 – 通过 URL 可以轻松分享应用,不用复杂的安装即可运行。

渐进式 Web 应用不是什么

1. 安全

2. 渐进式

navigator.getMedia = ( 
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
);
if (!navigator.getMedia) {
    displayErrorMessage("你的浏览器不支持 navigator.getUserMedia 接口。");
}
else {
    // 使用 Camera API
}

3. 响应式

4. 独立于网络连接

// 安装 service worker.
this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1').then(function(cache) {
            // 如果这些资源中有任何资源不能保存,缓存就会失败
            return cache.addAll([
                // 路径是相对于缓存来源,而不是应用程序的目录。
                '/pwa-photobooth/',
                '/pwa-photobooth/index.html',
                '/pwa-photobooth/assets/css/styles.css',
                '/pwa-photobooth/assets/fonts/MaterialIcons-Regular.woff2',
                '/pwa-photobooth/assets/js/script.js',
                '/pwa-photobooth/assets/icons/ic-face.png',
                '/pwa-photobooth/assets/icons/ic-face-large.png',
                '/pwa-photobooth/manifest.json'
            ])
            .then(function() {
                console.log('成功! App 离线可用!');
            })
        })
    );
});

// 定义一个资源被请求时候会发生什么
// 对于我们的应用,我们以缓存优先的方式
self.addEventListener('fetch', function(event) {
    event.respondWith(
        // 试着从缓存中获取.
        caches.match(event.request)
        .then(function(response) {
            // 如果资源没有存储在缓存中,就回退到网络
            return response || fetch(event.request);
        })
    );
});
// 注册 Service Worker.

if ('serviceWorker' in navigator) {
    // 路径是相对于缓存来源,而不是应用程序的目录.
    navigator.serviceWorker.register('/pwa-photobooth/sw.js')
    .then(function(reg) {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    })
    .catch(function(error) {
        console.error('Registration failed with ' + error);
    });
}

5. 类原生引用

6. 持续更新

this.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('v1.0.1').then(function(cache) {
            // ...
        })
    );
}); 

7. 可发现

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}
  • Shortname – 这是应用保存到主屏幕上时的名称。
  • Icons – 不同分辨率的图标数组。
  • Display – 定义应用打开的方式。我们选择的是独立(standalone),所以启动 PhoneBooth 时,会以全屏窗口出现,没有浏览器导航栏或者菜单。它还会被看作为多任务中的一个单独的应用。
<link rel="manifest" href="manifest.json">
<meta name=”apple-mobile-web-app-capable” content=”yes”>

8. 可再次访问

  • Google 开发者网站上的《推送通知:及时、相关和准确》 – 这里.
  • Google 开发者网站上的《开放 Web 上的推送通知 – 这里.
  • MDN 上的《使用 Push API》 – 这里.
  • Push.js 库,提供处理推送通知的更清洁的 API – 这里.

9. 可安装

  1. 有一个有效的 Web Manifest。
  2. 安装有有效的 Service Worker。
  3. 通过 HTTPS 访问应用程序。

10. 可链接

总结

赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部