PWA：使用 Service Worker 缓存 PHP 文件以供离线使用

Question

我尝试创建一个简单的 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，使用添加到主屏幕功能“安装”它，停用互联网访问并使用它的图标启动应用程序一切正常。

好吧，如果我将 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: ", registration.scope );
         
             } ).catch( function ( err ) { 
         
               console.error( "ServiceWorker registration failed: ", err );
             } );
         
         }
      </script>
   </head>
   <body>
      My awesome PWA
   </body>
</html>

在 Service Worker 中将文件扩展名更改为 .php 并尝试离线运行应用程序，我看到的是默认的“找不到页面”页面。

使用 Chrome/desktop 的开发者控制台并转到 Application -> Cache -> Cache Storage 我可以看到我的 php 文件的 Content-length 说它是 0 字节。

现在我想知道 - 是不是可以缓存 .php 文件以供离线使用（可能是因为没有后端服务器实际解释该文件）还是我做错了什么？

Answer 1

PWA 的目的，尤其是 Service Worker 的目的是执行交互缓存和站点缓存（html、css、js）。

Service Worker 通常负责客户端和 PHP 后端之间的通信，因此 Service Worker 的工作是将交互缓存在本地数据库中，并在后端再次可用时与后端同步。

您的 PHP 需要充当普通的 REST API，因此您的前端（angular、vue 等）可以与执行请求和解释答案的 service worker 一起正常工作。 为了使其离线可用，您的 PWA 应用程序需要在本地缓存 html 端，然后缓存交互以将它们排队到服务器再次可用。

一篇解释这些事情和不同可用策略的文章可以在这里找到： https : //developers.google.com/web/ilt/pwa/caching-files-with-service-worker

PWA：使用 Service Worker 缓存 PHP 文件以供离线使用

问题描述

1 个解决方案

解决方案1
0 2020-09-24 12:56:47

PWA：使用 Service Worker 缓存 PHP 文件以供离线使用

问题描述

1 个解决方案

解决方案1 0 2020-09-24 12:56:47

解决方案1
0 2020-09-24 12:56:47