Tạo ứng dụng React với các tệp tĩnh Pre-Rendering React-Snapshot

Tôi đang sử dụng ứng dụng tạo phản ứng với react-snapshot để tạo trước đánh dấu tĩnh cho các tuyến đường của mình. tức là "/", "/signIn", "/signUp" tạo ra tương ứng index.html, signIn.html, signUp.html.Tạo ứng dụng React với các tệp tĩnh Pre-Rendering React-Snapshot

Issue tôi phải đối mặt là không có vấn đề gì tuyến đường tôi đi đến, ban đầu các tĩnh index.html tạo ra từ phản ứng-chụp cho con đường rễ "/" được phục vụ và sau đó là đúng tĩnh tập tin tuyến đường và sau đó là main.js bó được phục vụ (xem gif). Điều này sẽ ổn nếu tôi chỉ đang phân phối ứng dụng của mình từ một gói main.js một mình. nhưng vì tôi muốn sử dụng các tệp html được tạo trước tĩnh, làm cách nào để vô hiệu hóa nhân viên dịch vụ phục vụ index.html trên các tuyến đường nhất định mà tôi đã có tệp html tĩnh.

Cập nhật: Nếu tôi xóa nhân viên dịch vụ khỏi ứng dụng tạo phản ứng, ứng dụng sẽ tải tệp tĩnh cho đường dẫn. Tuy nhiên, tôi muốn giữ chức năng của nhân viên dịch vụ cho các tính năng PWA.

Cập nhật 2: Trên chrome browser nhấp nháy nhanh của đánh dấu tĩnh tuyến gốc chỉ xảy ra một lần cho mỗi tuyến đường. Sau khi nhấp nháy lần đầu tiên có vẻ như bộ nhớ cache của trình duyệt chrome sửa chữa nó, bổ sung nếu tôi vô hiệu hóa bộ nhớ cache từ các công cụ chrome dev và cố gắng đi đến tuyến đường mới nhấp nháy của tuyến đường gốc trở về. Trên Firefox browser vấn đề tồn tại không có vấn đề gì, trên mọi thay đổi tuyến đường hoặc làm mới bộ phim tạm thời của đánh dấu tuyến tĩnh gốc xảy ra.

Làm cách nào để tránh hiển thị index.html ban đầu trên tất cả tuyến đường từ nhân viên dịch vụ mà không xóa nhân viên dịch vụ.

Cụ thể hơn:

Với Dịch vụ lao động tích cực các mã sau đây làm cho trong cơ thể của mã nguồn trang web của tất cả các tuyến đường:

<body> 
<script>window.react_snapshot_state = {};</script> 
<noscript>You need to enable JavaScript to run this app.</noscript> 
<div id="root" data-react-checksum="-928641672"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="navItemActive sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div class="sc-bdVaJa eRTdVS">Home</div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script></body>

NẾU tôi loại bỏ các nhân viên dịch vụ các tuyến đường "/signIn" renders nội dung sau trong phần nội dung của nguồn trang:

<body> 
<script>window.react_snapshot_state = {};</script> 
<noscript>You need to enable JavaScript to run this app.</noscript> 
<div id="root" data-react-checksum="143569200"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div><div class="sc-EHOje bssfxk"><div class="sc-EHOje bssfxk"><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="email" placeholder="email" name="email" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="password" placeholder="password" name="password" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form></div><p class="sc-dnqmqq ccTWaR"></p><div><div class="sc-gzVnrw cCgvhR"><button class="ui basic button sc-iwsKbI Vfjvd"><!-- react-text: 37 -->Login<!-- /react-text --><!-- react-text: 38 --> <!-- /react-text --></button><div class="sc-gzVnrw cCgvhR"><!-- react-empty: 40 --><div class="ui horizontal divider" style="width: 220px;">Or</div><div class="sc-bZQynM kECAnI"><button class="ui google plus button" style="text-transform: capitalize;"><i aria-hidden="true" class="google icon"></i><!-- react-text: 45 --> Google<!-- /react-text --></button><button class="ui facebook button" style="text-transform: capitalize;"><i aria-hidden="true" class="facebook icon"></i><!-- react-text: 48 --> Facebook<!-- /react-text --></button></div></div></div><div><p class="sc-htoDjs dErAlA">forgot your password ?</p></div></div></div></div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script><iframe style="display: none;"></iframe>

GIF chỉ cho tôi cố gắng truy cập "/signIn" Route, và thông báo từ home (đánh dấu tĩnh cho "/" tuyến đường) đưa ra trong một khoảnh khắc trước khi các hình thức thực tế cho "/signIn" đường ám.

Nguồn

2017-09-14 jasan

Vấn đề là Service Worker(SW) theo mặc định trong Create React App chỉ lưu trữ nội dung của static folder và index.html. Các tệp .html được hiển thị trước của tôi từ ảnh chụp phản hồi không bao giờ được lưu trong bộ nhớ cache SW.các SW trong create react app cũng được thiết lập để phục vụ index.html cho tất cả các url chưa biết, vì thế nó được phục vụ đường dẫn gốc "/" tệp tĩnh index.html. tôi giải quyết điều này bằng cách ghi đè lên tập tin service-worker.js bằng cách thay đổi build lệnh trong package.json như vậy:

"build": "react-scripts build && react-snapshot && sw-precache --config=sw-precache-config.js"

nơi sw-precache-config.js của tôi trông giống như sau:

module.exports = { 
    staticFileGlobs: [ 
    './build/**/**.html', 
    './build/images/**.*', 
    './build/static/**', 
    ], 
    dontCacheBustUrlsMatching: /\.\w{8}\./, 
    swFilePath: './build/service-worker.js', 
     // For unknown URLs, fallback to the index page 
    navigateFallback: './200.html', 
     // Ignores URLs starting from /__ (useful for Firebase): 
     // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219 
    navigateFallbackWhitelist: [/^(?!\/__).*/], 
     // Don't precache sourcemaps (they're large) and build asset manifest: 
    staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], 
    stripPrefix: './build' 
}

Nguồn

2017-09-23 09:52:07 jasan

các s nội dung tatic được tạo ra và tôi đã thực hiện tất cả các thay đổi như được mô tả. Nó không có tác dụng với tôi. Chrome vẫn hiển thị nội dung index.html. PreCacheConfig của tôi cập nhật độc đáo. – kushalvm

Nếu bạn có danh sách cho tất cả các đánh dấu được tạo ra từ phản ứng-ảnh chụp bạn có thể tự thiết lập các quy tắc viết lại cho họ và sau đó thêm một quy tắc dự phòng cho phần còn lại.

Ví dụ

"rewrites": [ 
    { 
    "source": "/signup", 
    "destination": "/signup.html" 
    }, 
    { 
    "source": "/orders", 
    "destination": "/orders.html" 
    }, 
    { 
    "source": "**", 
    "destination": "/index.html" 
    } 
]

Nguồn

2017-09-14 09:13:50 bennygenel

này không giải quyết nó, index.html vẫn làm cho đầu tiên trên tất cả các tuyến – jasan

Tạo ứng dụng React với các tệp tĩnh Pre-Rendering React-Snapshot

Trả lời

Các vấn đề liên quan