如何解决PWA:使用Service Worker缓存PHP文件以供脱机使用
我尝试创建一个简单的test-PWA,它仅包含一个 index.html 文件,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
<script type="text/javascript">
if ( "serviceWorker" in navigator ) {
navigator.serviceWorker.register( "sw.js" )
.then( function ( registration ) {
console.log( "ServiceWorker registration successful with scope: ",registration.scope );
} ).catch( function ( err ) {
console.error( "ServiceWorker registration failed: ",err );
} );
}
</script>
</head>
<body>
My awesome PWA
</body>
</html>
及其随附的 sw.js 服务工作者
const version = "1.06",preCache = "PRECACHE-" + version,cacheList = [
"index.html",];
/* Service Worker Event Handlers */
self.addEventListener( "install",function ( event ) {
console.log( "Installing the service worker!" );
self.skipWaiting();
caches.open( preCache )
.then( cache => {
cache.addAll( cacheList );
} );
} );
self.addEventListener( "activate",function ( event ) {
event.waitUntil(
caches.keys().then( cacheNames => {
cacheNames.forEach( value => {
if ( value.indexOf( version ) < 0 ) {
caches.delete( value );
}
} );
console.log( "service worker activated" );
return;
} )
);
} );
self.addEventListener( "fetch",function ( event ) {
event.respondWith(
caches.match( event.request )
.then( function ( response ) {
if ( response ) {
return response;
}
return fetch( event.request );
} )
);
} );
如果我抓住一个Android设备,启动Chrome,使用“添加到主屏幕”功能“安装”该设备,停用Internet访问并使用其图标就可以正常运行该应用程序。
好吧,如果我将index.html文件转换为php文件 index.php :
<?php /*empty*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="manifest" href="manifest.json" crossorigin="use-credentials">
<script type="text/javascript">
if ( "serviceWorker" in navigator ) {
navigator.serviceWorker.register( "sw.js" )
.then( function ( registration ) {
console.log( "ServiceWorker registration successful with scope: ",err );
} );
}
</script>
</head>
<body>
My awesome PWA
</body>
</html>
在服务工作者中将文件扩展名更改为.php并尝试脱机运行应用程序,这是默认的“找不到页面”页面。
使用Chrome /台式机的开发者控制台,然后转到应用程序->缓存->缓存存储,我可以看到我的php文件的内容长度为0字节。
现在我想知道-不能缓存.php文件以供脱机使用(也许是因为没有后端服务器实际在解释该文件)还是我做错了吗?
解决方法
PWA(尤其是服务工作者)的目的是执行交互的缓存和站点(html,css,js)的缓存。
服务工作者通常负责客户端和PHP后端之间的通信,因此服务工作者的工作是将交互缓存在本地数据库中,并在后端再次可用时与后端同步。
您的PHP需要充当普通的REST API,因此您的前端(angular,vue等)可以与执行请求和解释答案的服务工作者一起正常工作。 为了使其离线可用,您的PWA应用程序需要本地缓存html边,然后缓存交互以将它们重新排队到服务器中。
此处提供了解释这些问题和可用策略的文章: https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。