استفسار: تحويل مشروعي vuejs إلى PWA

الآن أحاول جعل تطبيقي PWA أو (Progressive Web Application)
الأمر في الفريموورك يختلف قليلا،،

ما فعلته حتى الآن هو:

إنشاء ملف `manifest.json` وربطه بصفحة `index.html`
{
  "name": "vue-shop",
  "short_name": "vue-shop",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#000000",
  "theme_color": "#4DBA87"
}

=> إضافة خاصية vue add @vue/pwa

الـplugin عمل ملف `registerServiceWorker.js`
/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' +
          'For more details, visit https://goo.gl/AFskqB'
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated () {
      console.log('New content is available; please refresh.')
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

النتيجة الحالية في كروم:

manifest

service workers

ما هي الخطوات التالية ومتى سيظهر تنويه تثبيت التطبيق على الموبايل؟
أيضا أحاول البحث عن طريقة عمل caching بشكل سليم

3 Likes

مرحبا نصر. لم اجرب استعمال vue-pwa من قبل لكن وجدت هذا المقال يبدو لي شرحه بطريقة جميلة

Creating Your First Vue.js PWA Project

1 Like

للأسف لم تعمل… انا استخدم CLI
حاولت أن أبحث عن مقالات أخرى لكنها تتعمق في workbox
وانا لا أعلم عنه شيئا

منها هذا المقال:

1 Like

مجرد تخمين فقط.
هل قمت بعمل import لملف service worker داخل ملف main.js؟.
لا أعلم إن كان نفس الشيء يحدث مع Vue.js ، لأنه في React.js ال service worker يعمل في production mode ولا يعمل في development mode.

3 Likes

الـvue تعمل بنفس طريقة react بالضبط
في حالة الproduction يتم خلق ملفين (حسب الـplugin المستخدم):
precache-manifest.json
service-worker.js

انا فقط قمت بعمل ملف manifest
سأحتاج لرؤية تجارب سابقة

1 Like

المشكلة ليست في ملف الـ manifest لأنه تم اكتشافه من قبل المتصفح، المشكل في اكتشاف ملف service-worker.jsوالدليل الرسالة الموجودة في السكرين شوت الأول الذي عملته والتي تقول
No matching service worker detected …

إن كنت لم تقم باستراد هذا الملف في main.sj فقد يكون هذا هو المشكل
وجرب عمل import له هكذا

import 'path/service-worker.js';

بحيث تحدد المسار الصحيح للـ path
في النهاية جرب لأنه مجرد تخمين

2 Likes

سأجربها :star_struck:

2 Likes

أعتقد أن الموضوع يهمك @sohep

2 Likes

@sniperadmin

أخذت فكرة عن كيفية عمل PWA بالـ Vue js وعدت:

  • أولا تأكد أنك عملت import في الـ main.js
import './registerServiceWorker'
  • في الـ development mode لا يؤخذ بعين الإعتبار خدمات الـ service worker، إذا لتجربته عليك بعمل build لمشروعك عن طريق الأمر:
    npm run build
    إن لم تقم بذلك من قبل سيتم إنشاء نسخة الـ build في مجلد باسم dist أو يقوم بتحديث التوزيعة وذلك بأخذ التغييرات المعمولة في الـ development mode
  • تقوم بتزيل serve package إن لم تقم بذلك من قبل عبر الأمر:
    npm install -g serve
  • بعد ذلك تشغل السرفر الخاص بالـ production mode وسيشتغل معك لأنني جربته واشتغل معي
    serve -s dist
    وافتح موقعك على http://localhost:5000 وبالتوفيق
2 Likes

الجديد هو الـ serve package و

اضافتك ساعدت كثيرا :star_struck:

2 Likes

جربت استخدم Nuxt.js
يا للهول :dizzy_face: لا صداع للـconfiguration بعد اليوم :smiley:

3 Likes

بالفعل ي نصر إطار nuxt سهلت الكثير خصوصاً الـ SSR والـ Automatic code splitting والتي تعتبر السبب الأول والأهم لي لإستخدام هذا الإطار في كل مرة أريد إستخدام Vue.js.

بالنسبة للمشكلة التي تواجهها مع إضافة الـ PWA للموبايل فما اعرف ايش نوع المشكلة التي تواجهها فقد قمت انا بتحميل البرنامج في في الـ Android studio Emulator وتم إضافته بدون أي مشاكل.

جرب ان تقوم أولاً بعمل build للمشروع حتى يتم إنتاج الملفات في الـ dist ومن ثم عمل serve له وبعد ذلك تنزيلة على المحاكي وأخبرني بالنتيجة

2 Likes

نعم ، فعلا في حالة الproduction يعمل بشكل جيد
كنت أظن انها تعمل على الlocalhost

2 Likes

الموضوع يكمن في انتاج ملفات ال PWA وال SW حيث انه بمجرد عمل build يتم تكوين الملفات اللازمة لتشغيل التطبيق وتنزيلة على الموبايل

2 Likes

نعم… nuxt تقوم بإنتاج هاته الملفات بشكل ديناميكي

3 Likes

ازيك يا نصر
كيف قمت بتحويل مشروع vue الى nuxt هل يوجد طريقة تعيد ترتيب الامور ام انه يجب ان يتم ذلك بشكل يدوي

2 Likes

يدوي يا صهيب، انا الآن كل مشروعاتي ستصبح بـ nuxtjs

2 Likes