如何离线运行“Progressive Web Apps”？ [英] How to run offline "Progressive Web Apps"?

问题描述

我是渐进式网络应用程序开发的新手。我想实现渐进式网络应用程序。所以我已经实现了一个演示页面，这个页面工作正常，网络连接但是没有网络（在离线状态下）它不起作用。

我想打开我的渐进式网站没有任何互联网连接（离线）。我看过一个链接

我将逐步解释：

第一步：

我正在使用网络服务器chrome：

第二步：
index.html

  //注册服务工作者如果可供使用的话。 
 if（导航器中的'serviceWorker'）{
 navigator.serviceWorker.register（'./ service-worker.js'）。then（function（reg）{
 console.log（'成功注册服务工作者'，reg）; 
}）。catch（函数（错误）{
 console.warn（'注册服务工作者时出错'，错误）; 
}）; 
} 
 
 window.addEventListener（'online'，function（e）{
 //与服务器重新同步数据。
 console.log（你在线） ）; 
 Page.hideOfflineWarning（）; 
 Arrivals.loadData（）; 
}，false）; 
 
 window.addEventListener（'offline'，function（e）{
 //为服务器排队事件。
 console.log（你离线）; 
 Page.showOfflineWarning（）; 
}，false）; 
 
 //检查用户是否已连接。 
 if（navigator.onLine）{
 Arrivals.loadData（）; 
} else {
 //显示离线消息
 Page.showOfflineWarning（）; 
} 
 
 //设置Knockout视图模型绑定。 
 ko.applyBindings（Page.vm）; 
  

Service-worker.js

  //使用cacheName进行缓存版本化
 var cacheName ='v1：static'; 
 
 //在安装阶段，您通常需要缓存静态资产。 
 self.addEventListener（'install'，function（e）{
 //安装服务工作者后，继续获取资源以使此工作脱机。
 e.waitUntil（ 
 caches.open（cacheName）.then（function（cache）{
 return cache.addAll（[
'。/ index.html'，
'./ screen.css '，
'。/ script.js'，
'。/ styles / app.css'，
'。/ styles / font.css'，
'。/ styles /header.css'，
'./styles/hidden.css'，
'。/ styles / list.css'，
'。/ styles / page.css'，
'./styles/suggest.css'，
'./styles/tags.css'，
 
]）。then（function（）{
 self.skipWaiting （）; 
}）; 
}）
）; 
}）; 
 
 //当浏览器获取URL时... 
 self.addEventListener（'fetch'，function（event）{
 // ...要么使用缓存对象进行响应，要么继续并获取实际的URL 
 event.respondWith（
 caches.match（event.request）.then（function（response）{
 if（response）{
 // from from缓存
返回响应; 
} 
 //正常获取
返回fetch（event.request）; 
}）
）; 
 }）; 
  

第三步
签到网络：

签入申请表：

Service-worker.js文件工作正常，你可以在屏幕截图中看到：

但是当我点击离线复选框时，我的网站无效。如果所有这些事情都是正确的，那么它必须在离线状态下打开。

如果有任何遗漏，请告知我们。请不要拒绝这个问题。如果有人有想法，请分享。

如果有人有疑问，请看这个链接 https://pwa.rocks/ 。您可以
在Chrome中打开此链接，然后在没有互联网连接的情况下，它将打开
。

如果说明然后请向我询问。

解决方案

你需要一个额外条件的根请求 / 处理 fetch 事件时：

  self。 addEventListener（'fetch'，function（event）{
 // ...要么使用缓存对象进行响应，要么继续获取实际URL 
 event.respondWith（
 caches.match（event。请求）.then（函数（响应）{
 if（response）{
 //从缓存中检索
返回响应; 
} 
 
 //如果在缓存中找不到，则返回默认的离线内容（仅当这是导航请求时）
 if（event.request.mode ==='navigate'）{
 return caches.match（'./ index.html'）; 
 } 
 
 //正常获取
 return fetch（event.request）; 
}）
）; 
}）; 
  

I am new in progressive Webs Apps development. I want to implement progressive webs app. So I have implemented one demo page and this page working fine with net connection but without network(In Offline) it is not working.

I want to open my progressive website without any internet connection(offline). I have seen one link https://developers.google.com/web/fundamentals/getting-started/codelabs/offline/. And I have implemented service worker javascript file.

I will explain step by step:

First Step:

I am using web server chrome:

Second Step: index.html

  // Register the service worker if available.
  if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service-worker.js').then(function(reg) {
  console.log('Successfully registered service worker', reg);
  }).catch(function(err) {
  console.warn('Error whilst registering service worker', err);
  });
  }

  window.addEventListener('online', function(e) {
  // Resync data with server.
  console.log("You are online");
  Page.hideOfflineWarning();
  Arrivals.loadData();
  }, false);

  window.addEventListener('offline', function(e) {
  // Queue up events for server.
  console.log("You are offline");
  Page.showOfflineWarning();
  }, false);

  // Check if the user is connected.
  if (navigator.onLine) {
  Arrivals.loadData();
  } else {
  // Show offline message
  Page.showOfflineWarning();
  }

  // Set Knockout view model bindings.
  ko.applyBindings(Page.vm);

Service-worker.js

// Use a cacheName for cache versioning
  var cacheName = 'v1:static';

  // During the installation phase, you'll usually want to cache static assets.
  self.addEventListener('install', function(e) {
  // Once the service worker is installed, go ahead and fetch the resources to make this work offline.
  e.waitUntil(
  caches.open(cacheName).then(function(cache) {
  return cache.addAll([
  './index.html',
  './screen.css',
  './script.js',
  './styles/app.css',
  './styles/font.css',
  './styles/header.css',
  './styles/hidden.css',
  './styles/list.css',
  './styles/page.css',
  './styles/suggest.css',
  './styles/tags.css', 

  ]).then(function() {
  self.skipWaiting();
  });
  })
  );
  });

  // when the browser fetches a URL…
  self.addEventListener('fetch', function(event) {
  // … either respond with the cached object or go ahead and fetch the actual URL
  event.respondWith(
  caches.match(event.request).then(function(response) {
  if (response) {
  // retrieve from cache
  return response;
  }
  // fetch as normal
  return fetch(event.request);
  })
  );
  });

Third Step Check in Network:

Check in Application:
Service-worker.js file working fine you can see in screen shot:

But when I clicked on offline check box my website is not working. If all these things did right way then its have to open in offline.

If anything missing then please let me know. Please don't decline this question. If anybody has an idea then please share.

If anybody has doubt then see this link https://pwa.rocks/. You can open this link in chrome and after then without internet connection it will open.

If explanation need then please ask from me.

解决方案

You need an extra condition for the root request / when handling the fetch event:

self.addEventListener('fetch', function(event) {
    // … either respond with the cached object or go ahead and fetch the actual URL
    event.respondWith(
        caches.match(event.request).then(function(response) {
            if (response) {
                // retrieve from cache
                return response;
            }

            // if not found in cache, return default offline content (only if this is a navigation request)
            if (event.request.mode === 'navigate') {
                return caches.match('./index.html');
            }

            // fetch as normal
            return fetch(event.request);
        })
    );
});

这篇关于如何离线运行“Progressive Web Apps”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！